HTML中未转义会触发标签解析导致DOM错乱,纯文本需用zuojiankuohaophpcn/youjiankuohaophpcn,textContent比innerHTML更安全,XML场景下转义是强制要求且更严格。

HTML 中直接写 > 会触发标签解析,必须转义
> 会触发标签解析,必须转义浏览器遇到未转义的 会尝试解析为开始标签,> 则可能提前结束当前标签,导致 DOM 结构错乱、脚本执行异常或内容截断。这不是“显示问题”,而是 HTML 解析器的底层行为。
- 纯文本场景(如 作为代码示例):必须用
zuojiankuohaophpcn和youjiankuohaophpcn- 属性值中出现
(如title="x ):同样需转义,否则可能被误判为标签结束- 服务端模板(如 Jinja2、Thymeleaf)或前端框架(React/Vue)通常自动转义,但手动拼接字符串或使用
innerHTML时失效textContent比innerHTML更安全,避免意外解析当你要把含特殊字符的字符串插入页面,优先用
textContent——它把内容当纯文本处理,不经过 HTML 解析器。const el = document.getElementById('output'); el.textContent = 'a < b & c > d'; // 显示为:a < b & c > d // 不会变成:标签被解析,也不会触发 XSS-
innerHTML会解析所有标签和实体,哪怕你只想要显示zuojiankuohaophpcn字面量 -
textContent对zuojiankuohaophpcn这类已转义字符串也照单全收,不会二次解码 - 若必须用
innerHTML(如渲染富文本),先确保输入已由可信来源提供,且做过白名单过滤
XML 场景下
zuojiankuohaophpcnyoujiankuohaophpcn不是可选,而是强制要求XML 解析器比 HTML 更严格:
>&在文本节点或属性值中未转义即报错,无法容忍“宽松解析”。- 常见错误:把 HTML 片段直接塞进 XML(如 RSS feed 或 SOAP body),导致
ParseError: not well-formed - 必须转义的字符只有 5 个:
zuojiankuohaophpcn,youjiankuohaophpcn,&,",'(后两者仅在属性值中必要) - Python 示例(用
xml.sax.saxutils.escape):from xml.sax.saxutils import escape escape('a < b & c > d') # → 'a zuojiankuohaophpcn b & c youjiankuohaophpcn d'
别依赖浏览器“自动修复”,尤其在 XHTML 或 XML MIME 类型下
如果响应头是
Content-Type: application/xhtml+xml或application/xml,浏览器将按 XML 规则严格校验——任何未转义的都会导致整个页面空白并抛出解析错误。立即学习“前端免费学习笔记(深入)”;
- 开发时检查 Network 面板中的响应头,确认 MIME 类型是否意外触发 XML 模式
- 用
document.contentType在控制台验证当前文档解析模式 - 服务端输出 XML 前务必做转义,前端 JS 生成 XML 字符串时也要手动处理,不能靠 innerHTML 补救
真正容易被忽略的是:同一段字符串,在 HTML 页面里用
textContent安全,在发给后端的 XML 请求体里却必须再做一次zuojiankuohaophpcn转义——因为两者的解析上下文完全不同。 - 属性值中出现










