应使用 setHTML() 配合 Sanitizer 实例替代 innerHTML，因其默认禁用事件处理器、javascript:伪协议等 XSS 载荷；但需注意浏览器兼容性（Safari 不支持）、必须显式传入 Sanitizer 实例、不支持 Shadow DOM，且服务端仍需基础过滤。
直接用 setHTML() 配合 Sanitizer 实例，比手写正则或依赖第三方库更可靠，但必须注意浏览器支持现状和默认策略的局限性。
为什么不能继续用 innerHTML 插入用户HTML
因为 innerHTML 不做任何过滤，遇到 onerror、onclick、javascript: 伪协议、<script></script> 等会直接执行。哪怕只渲染富文本编辑器粘贴的内容或服务端返回的 HTML 片段，只要来源不可信，就可能触发 XSS。
常见错误现象包括：
- 用户提交
<img src="x" onerror='fetch("/steal",' body:document.cookie alt="怎么利用HTML的Sanitizer API安全地将不可信HTML插入DOM防止XSS" >，页面加载即发请求 - 服务端返回带
<a href="javascript:alert(1)"></a>的 HTML，点击即弹窗 - 使用
textContent虽安全，但所有标签都被当纯文本显示，破坏富文本预期效果
setHTML() 和 Sanitizer 怎么配对使用
核心是两步：创建 Sanitizer 实例（可选配置），再调用目标元素的 setHTML() 方法传入原始字符串和该实例。
立即学习“前端免费学习笔记（深入）”；
最简可用写法：
const div = document.querySelector('#content');
const unsafeHtml = '<h2>Hello</h2><img src="x" onerror="alert(1)" alt="怎么利用HTML的Sanitizer API安全地将不可信HTML插入DOM防止XSS" ><p>Normal text</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a>
<p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>';
const sanitizer = new Sanitizer();
div.setHTML(unsafeHtml, sanitizer);
// 结果：<h2>Hello</h2><img src="x" alt="怎么利用HTML的Sanitizer API安全地将不可信HTML插入DOM防止XSS" ><p>Normal text</p>
关键点：
-
setHTML()是元素方法，不是document或Element构造函数上的静态方法 -
Sanitizer构造函数目前不接受参数（Chrome Canary / Firefox 148+ 支持无参构造；部分旧版需传空对象{}，但不推荐） - 必须显式传入
Sanitizer实例，直接div.setHTML(html)会报错或退化为等效于innerHTML - 不支持在 Shadow DOM 外部调用
setHTML()渲染到 Shadow Root —— 目前仅限 light DOM 元素
自定义 Sanitizer 策略时要注意什么
当前标准草案允许通过 new Sanitizer(options) 传入白名单配置，但实际支持度极低：Firefox 148 仅支持无参构造；Chrome 128+ 开始实验性支持 allowElements、dropAttributes 等字段，但行为不稳定。
所以现阶段务实做法是：
- 优先依赖默认策略（已禁用所有事件处理器、
javascript:、data:、<script></script>、<object></object>等） - 如需保留
class或data-*属性，不要硬编码自定义配置，改用后处理：先setHTML()，再遍历子节点手动补属性（风险可控且兼容） - 避免尝试启用
style属性 —— 默认已过滤，强行放开可能引入 CSS 注入（如expression()在旧 IE 已淘汰，但新攻击面仍在演进） - 服务端仍需做基础过滤（如移除
<base>标签），Sanitizer 不是万能兜底，而是客户端最后一道防线
兼容性差怎么办：降级方案怎么写
截至 2026 年 5 月，Sanitizer 在 Safari 中完全不可用，Firefox 148+ 和 Chrome 127+ 支持 setHTML()，Edge 同步 Chromium 版本。这意味着生产环境必须降级。
推荐的渐进增强写法：
function safeSetHTML(el, html) {
if (typeof el.setHTML === 'function' && typeof Sanitizer === 'function') {
try {
el.setHTML(html, new Sanitizer());
return;
} catch (e) {
// 构造失败（如旧版 Chrome 实验 flag 关闭），走降级
}
}
// 降级：用 DOMPurify（需提前加载）或最小化转义
if (window.DOMPurify) {
el.innerHTML = DOMPurify.sanitize(html);
} else {
el.textContent = html; // 最保守 fallback
}
}
容易踩的坑：
- 别在
try/catch里静默吞掉Sanitizer构造失败 —— 应记录 warn 日志，便于监控支持率 - 不要把
DOMPurify当成“兼容补丁”直接全局替换setHTML—— 它是 JS 解析器，性能开销明显高于原生 API -
textContentfallback 虽安全，但会破坏所有格式；若业务强依赖 HTML 渲染，宁可加个提示“当前浏览器暂不支持富文本显示”
真正麻烦的不是 API 写法，而是得同时盯着三件事：浏览器实际实现进度、服务端是否已做初步清洗、以及你插入 HTML 的那个 DOM 节点本身有没有被其他脚本动态篡改过 —— Sanitizer 只管输入字符串，不管后续 JS 是否又给它绑了事件。
