dompurify 必须通过 javascript 调用 sanitize() 且前后端双重净化，白名单需显式配置 allowed_tags/attr，禁用 style/class，限制 uri 协议，服务端需 jsdom 模拟环境，并添加 rel="noopener" 钩子防 tab-nabbing。
DOMPurify 不是“在 HTML 中直接用”的东西，它必须通过 JavaScript 调用 DOMPurify.sanitize() 才生效；只靠前端过滤无法防 XSS，后端入库前必须再次净化。
DOMPurify.sanitize() 必须配白名单，不能依赖默认行为
默认配置虽启用基础白名单（如 p、br、strong），但会保留 style 和 class 属性——这可能导致 CSS 注入（例如 style="background:url(javascript:)"）或绕过框架的 class 限制（如 Tailwind 的任意值）。生产环境必须显式声明：
-
ALLOWED_TAGS：只列你真需要的标签，比如['p','br','strong','em','a','ul','ol','li'] -
ALLOWED_ATTR：只放必要属性，href、title、target可以，style和class别加，除非你有完整控制策略 -
FORBID_TAGS和FORBID_ATTR是冗余保险，真正起效的是白名单未包含的内容自动被删 -
ALLOWED_URI_REGEXP必须设为/^(https?|ftp):/i，否则javascript:、data:协议不会被拦截
Vue / React 渲染前不调用 sanitize 就等于裸奔
v-html 和 dangerouslySetInnerHTML 完全不做任何过滤，只是把字符串丢给 innerHTML。哪怕你刚从富文本编辑器拿到内容，也必须立刻过一遍 DOMPurify.sanitize()：
- 别信“编辑器自己处理了”——Trix、Quill 等库只做基础清理，不替代 DOMPurify
- 别在
input或paste事件里实时调用sanitize()，性能差且拦不住拖放、语音输入等场景 - 正确时机是表单提交前：
const cleanHtml = DOMPurify.sanitize(textarea.value, config)，再把cleanHtml发给后端 - 如果后端返回 HTML 给前端渲染（比如评论列表），也要再跑一次
sanitize()，因为数据可能被其他渠道污染
Node.js 后端用 DOMPurify 必须配 jsdom，否则报错
在服务端运行 DOMPurify.sanitize() 会抛 ReferenceError: window is not defined，因为 DOMPurify 依赖真实 DOM 环境。必须用 jsdom 模拟：
- 安装：
npm install dompurify jsdom - 创建 JSDOM 实例时，
runScripts必须设为false（生产环境严禁'dangerously'） - 传入
dom.window初始化 DOMPurify：const DOMPurify = createDOMPurify(dom.window) - 配置里建议加
RETURN_TRUSTED_TYPE: true，配合现代浏览器的 Trusted Types API 提升防御纵深 - 关键提醒：前端净化可被 curl、Postman、禁用 JS 等方式完全绕过，后端净化不是“锦上添花”，是唯一可信环节
最容易被忽略的一点：KEEP_CONTENT 和 target="_blank" 的组合风险
KEEP_CONTENT: true 是让被删标签里的文字不丢失（比如 <span>hello</span> → hello），但它不影响属性安全。而 target="_blank" 若没配 rel="noopener"，可能引发 tab-nabbing 攻击：
-
DOMPurify默认不自动加rel，必须手动 hook：DOMPurify.addHook("afterSanitizeAttributes", node => { if (node.tagName === "A" && node.hasAttribute("target")) node.setAttribute("rel", "noopener"); }) - 这个 hook 必须在前后端都注册，否则后端净化后的链接仍不安全
- 如果你允许
class属性，务必确认 class 名在服务端有严格校验（比如只允许text-red-500这类预定义值），否则攻击者可注入恶意 class 触发第三方 CSS 框架逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
