HTML防XSS技巧：内容转义基础方法

本文深入剖析了HTML中防范XSS攻击的核心防线——内容转义，明确指出仅需严格转义5个关键字符（、&、"、'），并强调纯文本场景应无条件优先使用textContent以彻底规避风险；对于富文本需求，则必须坚持“先全局转义、再白名单过滤”的双重策略，严禁依赖不可靠的正则清洗；同时厘清服务端转义为安全底线、前端转义为必要补漏的协同关系，并特别警示JSON接口中富文本字段必须在服务端完成HTML转义后透传，否则任何前端防护都将失效——掌握这些基础却常被忽视的实践要点，是构建真正健壮Web应用安全的第一步。

HTML内容直接插入前必须转义哪些字符

用户输入或后端返回的字符串，只要会拼进 HTML 文本流（比如 innerHTML、模板字符串插值、document.write），就可能触发 XSS。真正需要转义的只有 5 个基础字符：<、>、&、"、'。其他 Unicode 字符（比如 emoji、中文、数学符号）本身不构成标签或事件语法，无需转义。

常见错误现象： 直接进 innerHTML 就执行；onerror="alert(1)" 插入属性值中也会触发。

• < → <（防止开启新标签）
• > → >（虽多数情况非必需，但保持对称更安全）
• & → &（所有实体都以 & 开头，不转义会导致解析错乱）
• " → "（仅在双引号包围的属性值中必要）
• ' → '（仅在单引号包围的属性值中必要；IE 不支持该实体，稳妥起见可统一用 '）

用 textContent 还是手动转义函数

如果只是往元素里塞纯文本，textContent 是最省心、零风险的选择——它完全绕过 HTML 解析器，浏览器不会把内容当 markup 处理。

但一旦你需要保留部分格式（比如用户发的「加粗文字」想渲染成 ），就必须走转义 + 有限白名单解析这条路，不能全量信任输入。