<p>直接用 innerHTML 渲染用户富文本必然触发 XSS,必须用 DOMPurify 等解析器级净化并显式配置 ALLOWED_TAGS、ALLOWED_ATTR 等白名单,禁用 on* 属性和危险标签,服务端不可仅用 htmlspecialchars。</p>

直接用 innerHTML 渲染用户富文本就是开闸放水
只要你在前端用 element.innerHTML = userHtml 或 Vue 的 v-html、React 的 dangerouslySetInnerHTML,且没做任何净化,XSS 就已经站在你门口了。这不是“可能被利用”,而是“必然触发”——浏览器会照单全收并执行所有脚本、事件处理器、伪协议。
常见错误现象包括:用户提交一段带 onerror 的 <img>,保存后其他用户访问页面时自动弹窗;或粘贴进来的 SVG 含内联 <script>,在渲染时静默执行。
- 别信“编辑器前端已过滤”——grande.js、Jodit、Quill 默认都不禁用事件属性,
onmouseover、onclick、onload全部放行 - 别依赖
strip_tags()或正则删标签——它不处理属性,<p onclick="fetch('/steal?c='+document.cookie)">会被原样保留 - 别把 DOMPurify 当黑盒调用——不设
ALLOWED_TAGS和ALLOWED_ATTR白名单,等于默认允许全部
DOMPurify 必须显式配置白名单才真正安全
DOMPurify.sanitize() 是目前最可靠的内容净化方案,但它默认行为并不保守。不加配置就调用,等同于只删掉 <script> 标签,却放行 <img src=x onerror=...>、<a href="javascript:...">、<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>、<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,上线后基本等于裸奔。



















