直接用 innerhtml 渲染用户富文本必然触发 xss，必须用 dompurify 等解析器级净化并显式配置 allowed_tags、allowed_attr 等白名单，禁用 on* 属性和危险标签，服务端不可仅用 htmlspecialchars。
直接用 innerHTML 渲染用户富文本就是开闸放水
只要你在前端用 element.innerHTML = userHtml 或 Vue 的 v-html、React 的 dangerouslySetInnerHTML，且没做任何净化，XSS 就已经站在你门口了。这不是“可能被利用”，而是“必然触发”——浏览器会照单全收并执行所有脚本、事件处理器、伪协议。
常见错误现象包括：用户提交一段带 onerror 的 <img>，保存后其他用户访问页面时自动弹窗；或粘贴进来的 SVG 含内联 <script></script>，在渲染时静默执行。
- 别信“编辑器前端已过滤”——grande.js、Jodit、Quill 默认都不禁用事件属性，
onmouseover、onclick、onload全部放行 - 别依赖
strip_tags()或正则删标签——它不处理属性，<p onclick="fetch('/steal?c='+document.cookie)"></p>会被原样保留 - 别把 DOMPurify 当黑盒调用——不设
ALLOWED_TAGS和ALLOWED_ATTR白名单，等于默认允许全部
DOMPurify 必须显式配置白名单才真正安全
DOMPurify.sanitize() 是目前最可靠的内容净化方案，但它默认行为并不保守。不加配置就调用，等同于只删掉 <script></script> 标签，却放行 <img src="x" onerror="...">、<a href="javascript:..."></a>、<iframe></iframe> 等高危结构。
关键配置项必须显式设置：
-
ALLOWED_TAGS：只列你业务真需要的，比如['p', 'br', 'strong', 'em', 'a', 'img']，删掉iframe、video、svg（除非你明确需要且已启用 CSS 过滤） -
ALLOWED_ATTR：限制属性范围，例如a只允许href、title、target；img只允许src、alt、width、height - 开启
FORBID_CONTENTS：拦截<script></script>、<object></object>、<base>等无法安全渲染的节点 - 禁用
ADDITIVE_SCHEMA：避免扩展默认规则引入未知风险
示例调用：
const clean = DOMPurify.sanitize(dirty, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a', 'img'],
ALLOWED_ATTR: ['href', 'title', 'target', 'src', 'alt', 'width', 'height'],
FORBID_CONTENTS: ['script', 'object', 'base'],
ADDITIVE_SCHEMA: false
});
服务端不能只靠 htmlspecialchars() 处理富文本
htmlspecialchars() 只适用于纯文本上下文，比如昵称、评论摘要、搜索关键词回显。把它套在整段富文本 HTML 上，结果是双重编码、破坏结构，且完全不防属性注入——title="" onclick="alert(1)"" 经过 htmlspecialchars() 后仍是可执行的。
富文本必须走 HTML 解析器级净化，而非字符串替换：
- PHP 项目推荐
HTMLPurifier（非strip_tags），需配置HTML.Allowed白名单 - Node.js 推荐
sanitize-html，必须设allowedTags和allowedAttributes - Java 项目用
jsoup，调用Whitelist.basicWithImages()不够，要自定义Whitelist并禁用on*属性
错误做法：htmlspecialchars($userHtml, ENT_QUOTES, 'UTF-8') → 正确做法：HTMLPurifier::getInstance()->purify($userHtml)
富文本 XSS 最容易被忽略的三个环节
防御链断裂往往不在开头或结尾，而在中间那些“看起来没问题”的环节：
- 编辑器粘贴入口：用户从网页复制内容，浏览器带入隐藏的
onerror、javascript:链接，grande.js/Jodit 默认接收，前端未做即时净化 - 移动端渲染路径：PC 端用了 DOMPurify，但 App WebView 或小程序渲染同一段 HTML 时绕过净化逻辑，直接
innerHTML - 内容回显编辑态：后端返回已净化的 HTML 给编辑器重新加载，但编辑器内部解析时又触发二次执行（如 Jodit 的
setEditorContent未清理事件监听器）
这些点不写进 checklist，上线后基本等于裸奔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
