code标签不防解析，需先转义内容再插入；因其仅为语义标签，浏览器仍按HTML流程解析，未转义的<、&等会触发执行。安全做法是用textContent或转义后赋innerHTML。
code 标签本身不防解析，必须先转义内容再塞进去，否则 <script>alert(1)</script> 会真执行。
为什么 code 标签里写 HTML 还是会被执行
因为 code 只是语义标签，浏览器照常走 HTML 解析流程。只要里面含未转义的 、<code>>、& 等字符，就会被当作真实标签或属性处理——比如 <img src="https://img.php.cn/" alt="避免HTML code标签被恶意解析的安全教程"> 插进去，鼠标悬停就弹窗。
常见错误现象：
- 直接写
<code><div>hello</div></code>，结果页面真渲染出<div>元素 - 用
innerHTML = '<code>' + userInput + '</code>'，把用户输入原样拼进 DOM - 以为
<pre><code>嵌套就能自动防转义，其实它只保留换行和空格，不碰内容
安全做法：先转义，再塞进 code
核心动作只有一步：把原始字符串里的 、<code>>、&、"、' 替换成对应 HTML 实体，再赋给 code 的 textContent 或 innerHTML。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用
textContent：简单、零风险、不用手动转义document.querySelector('code').textContent = rawHtml; - 如果必须用
innerHTML（比如要配合 Prism.js 高亮），先转义再赋值：function htmlEscape(str) { const el = document.createElement('div'); el.textContent = str; return el.innerHTML; }<br>codeEl.innerHTML = htmlEscape(rawHtml); - 别信正则：手写
replace(/, '<')会漏掉、<code><等编码变体，浏览器照样解析
需要语法高亮时怎么避免 XSS
Prism.js、highlight.js 这类库输入的是「纯文本字符串」，不是原始 HTML。如果传进去的是未转义内容，它们内部可能误解析、漏着色，甚至触发 XSS。
正确流程：
- 原始 HTML 字符串 → 先用
htmlEscape()或textContent转义 → 得到纯文本 - 把纯文本塞进
code.textContent - 再调用
Prism.highlightElement(codeEl)—— 它只对文本做着色，不重新解析 HTML - 绝对不要：先
code.innerHTML = rawHtml，再highlightElement，那等于先执行一遍恶意代码
最容易被忽略的一点：code 标签只是容器，真正决定是否执行的，是内容进 DOM 前有没有被当成纯文本处理。一旦走 innerHTML 赋值路径，就必须确保字符串里每个 都已是 <code><，没有例外。
