怎么利用HTML的Sanitizer API安全地将不可信HTML插入DOM防止XSS-html教程-PHP中文网

应使用 setHTML() 配合 Sanitizer 实例替代 innerHTML，因其默认禁用事件处理器、javascript:伪协议等 XSS 载荷；但需注意浏览器兼容性（Safari 不支持）、必须显式传入 Sanitizer 实例、不支持 Shadow DOM，且服务端仍需基础过滤。

怎么利用html的sanitizer api安全地将不可信html插入dom防止xss

直接用 setHTML() 配合 Sanitizer 实例，比手写正则或依赖第三方库更可靠，但必须注意浏览器支持现状和默认策略的局限性。

为什么不能继续用 `innerHTML` 插入用户HTML

因为 innerHTML 不做任何过滤，遇到 onerror、onclick、javascript: 伪协议、<script></script> 等会直接执行。哪怕只渲染富文本编辑器粘贴的内容或服务端返回的 HTML 片段，只要来源不可信，就可能触发 XSS。

常见错误现象包括：

用户提交，页面加载即发请求
服务端返回带的 HTML，点击即弹窗
使用 textContent 虽安全，但所有标签都被当纯文本显示，破坏富文本预期效果

`setHTML()` 和 `Sanitizer` 怎么配对使用

核心是两步：创建 Sanitizer 实例（可选配置），再调用目标元素的 setHTML() 方法传入原始字符串和该实例。

最简可用写法：

const div = document.querySelector('#content');
const unsafeHtml = '<h2>Hello</h2>@@##@@<p>Normal text</p>';
const sanitizer = new Sanitizer();
div.setHTML(unsafeHtml, sanitizer);
// 结果：<h2>Hello</h2>@@##@@<p>Normal text</p>

关键点：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

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>、等）
如需保留 class 或 data-* 属性，不要硬编码自定义配置，改用后处理：先 setHTML()，再遍历子节点手动补属性（风险可控且兼容）
避免尝试启用 style 属性 —— 默认已过滤，强行放开可能引入 CSS 注入（如 expression() 在旧 IE 已淘汰，但新攻击面仍在演进）
服务端仍需做基础过滤（如移除标签），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
  }
}

容易踩的坑：