本文介绍在 ExtJS 应用中防止 XSS 漏洞的核心实践：通过 Ext.htmlEncode() 对用户输入进行 HTML 编码，确保恶意标签被原样显示而非执行，从而在不依赖第三方库的前提下实现基础但有效的输出净化。
本文介绍在 extjs 应用中防止 xss 漏洞的核心实践：通过 `ext.htmlencode()` 对用户输入进行 html 编码，确保恶意标签被原样显示而非执行，从而在不依赖第三方库的前提下实现基础但有效的输出净化。
在 ExtJS 开发中，当动态渲染用户提交的内容（如表单字段、列表项或弹窗提示）时，若直接将原始字符串插入 DOM（例如通过 html 配置项、setText() 或模板插值），极易触发跨站脚本（XSS）攻击。例如，用户输入 <script>alert('xss')</script> 或 ，若未经处理即渲染，浏览器会执行其中的脚本逻辑，危及应用安全。
ExtJS 提供了内置的防御工具——Ext.htmlEncode() 方法，它将 , &, ", ' 等特殊字符转义为对应的 HTML 实体（如
const userInput = '<script>alert("xss")</script> Hello <b>World</b>';
// ✅ 安全：转义后渲染为纯文本
const safeHtml = Ext.htmlEncode(userInput);
// 结果：<script>alert("xss")</script> Hello <b>World</b>
// 在组件中安全使用
Ext.create('Ext.panel.Panel', {
title: '用户评论',
html: safeHtml, // 直接赋值给 html 配置项
renderTo: Ext.getBody()
});
⚠️ 关键注意事项：
- Ext.htmlEncode() 仅适用于输出编码（Output Encoding），不能替代输入验证或服务端过滤；
- 不要对已编码的字符串重复调用该方法，否则会导致双重编码（如 & → &），显示异常；
- 若需保留部分格式（如允许
或 但禁用 <script>），则必须引入专业 HTML 清洗库（如 DOMPurify），并配合 Ext.dom.Helper 或自定义渲染逻辑；</script> - 所有数据绑定场景（如 Ext.grid.Panel 的 renderer 函数、Ext.XTemplate 中的 {value} 插值）均应显式编码：
renderer: function(value) {
return Ext.htmlEncode(value); // 始终在此处编码
}✅ 总结：Ext.htmlEncode() 是 ExtJS 应用抵御反射型 XSS 的第一道轻量级防线。它简单、可靠、无外部依赖，适用于绝大多数“仅显示、不解析”的文本渲染场景。但请牢记：前端编码无法替代服务端的安全策略，生产环境务必结合 CSP 头、输入白名单校验与后端深度清洗，构建纵深防御体系。
