必须转义的只有五个基础字符:&、<、>、"、',其中&最危险;它们未转义会破坏HTML结构或引发XSS,&因作为实体起始符在URL等场景中极易导致截断或解析错误。

哪些字符必须转义才能避免解析错误
只有 &、、<code>>、"、' 这五个字符在 HTML 文档结构中具有语法意义,不转义就会破坏标签或属性边界。其中 & 最危险——它既是实体起始符,又常出现在 URL、邮箱、数学表达式里,未转义的 & 可能让 &id=1&name=test 被截断成 &id=1 后面丢数据。
和 <code>>在文本内容里有时能“侥幸”显示,但一旦混入用户输入(比如搜索关键词<script></script>),就可能触发标签注入-
"和'主要在属性值中出问题:比如title="用户写了"会提前闭合,导致后续内容变成裸 HTML - 中文、emoji、©、€ 等 Unicode 字符在 UTF-8 页面中可直接写,无需转义;但若输出到非 UTF-8 环境(如旧邮件模板),就得用
XXXX;形式
innerHTML 插入前不转义等于开后门
用 element.innerHTML = userText 前必须转义,这是 XSS 高发点。浏览器会把字符串当作 HTML 重新解析,哪怕只是昵称 admin",放进 <div title="..."></div> 就可能变成 <div title="admin" onclick="alert(1)">...</div>。
- 别依赖
textContent“代替”转义——它确实安全,但只适用于纯文本场景;要保留部分格式(比如评论里的<br>换行),就得走白名单过滤 + 严格转义 - 简单手动转义可用:
str.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''') - 注意:正则替换顺序不能错,必须先处理
&,否则<会被二次编码成
命名实体 vs 数字编码:什么时候该用哪个
命名实体(如 <)可读性好,但仅覆盖有限字符集;数字编码(如 或 <code>)支持全部 Unicode,且更稳定。
- 日常开发优先用
&、<、>、"、'——编辑器识别度高,团队协作成本低 - 处理中文、数学符号(如
∑)、emoji(如?)时,统一用XXXX;,避免命名实体缺失或拼写错误 - 绝对禁用
(空字符),某些老 IE 会直接崩溃 - 服务端模板(如 Java 的
StringEscapeUtils.escapeHtml4())默认输出数字编码,前端不必再转换
服务端渲染和客户端混合时的转义次数陷阱
转义不是越多越安全,重复转义会导致显示异常,比如 显示成 <code>< 而不是 。
立即学习“前端免费学习笔记(深入)”;
- 原则:只在**最终输出到 HTML 上下文前**做一次转义。如果后端已转义,前端 JS 就不该再调用转义函数
- 常见坑:后端返回 JSON 字段
{"title": "<h1>Test</h1>"},前端又用 innerHTML 插入前再次转义 → 变成<h1>Test</h1> - 判断依据看响应头:若 Content-Type 是
text/html,说明后端已按 HTML 上下文输出,前端直接插入即可;若是application/json,则需前端自行转义
< 在 HTML 里安全,在 JS 字符串里却需要 \u003c,在 URL 里得是 %3C。不区分上下文的“一刀切”转义,反而埋下漏洞。



















