技能介绍

问题背景

当你的应用需要接受用户提交的 HTML——比如评论、富文本编辑器内容、导入的文档，甚至模型生成的片段——直接把这些字符串塞进 DOM 就等于把 XSS 攻击面敞开了。攻击者只需要一行 <img src=x onerror=alert(1)> 或者一个构造好的 <script> 标签，就能在受害者的浏览器里执行任意代码。这不是理论风险，CMS 和预览功能恰恰是这类攻击最常见的入口。

技能如何工作

这个技能的核心思路很简单：渲染之前先清洗。它在 HTML 片段进入预览区域、写入 CMS 字段或嵌入下游页面之前，调用 DOMPurify 做一次净化处理。

具体来说，关键步骤包括：

识别不可信输入：凡是来自用户输入、富文本编辑器、外部导入或模型输出的内容，都视为不可信
剥离危险标记：移除 <script>、<iframe>、事件处理器属性等可能执行代码的元素和属性
保留安全结构：合法的标签和属性会被保留，净化后的内容仍然可以正常渲染
策略可配置：可以通过配置项控制哪些标签或属性被允许，适应不同的业务场景

适用边界与注意事项

这个技能定位是"渲染前的一道防线"，而不是完整的安全方案。需要注意几点：

服务端运行需要 DOM 环境：在 Node.js 中使用 DOMPurify 需要 jsdom 作为 DOM 实现，推荐使用最新的版本
isomorphic-dompurify 是个好选择：如果你在服务端遇到了兼容性问题，这个项目能解决很多常见坑
Trusted Types 场景有特殊要求：如果要配合 Trusted Types 策略使用，必须设置 RETURN_TRUSTED_TYPE: false，因为 createHTML 期望的是普通字符串而非 TrustedHTML 对象
不要假设净化是唯一防线：前端渲染、后端存储都应该配合 CSP 等机制形成多层防护