怎样利用Trusted Types API防止DOM型XSS攻击？

Trusted Types通过CSP策略强制DOM操作仅接受可信对象，阻止XSS攻击。1. 启用require-trusted-types-for 'script'指令；2. 创建策略如htmlPolicy处理输入并返回安全HTML；3. 使用该对象赋值innerHTML；4. 避免直接返回原始输入，结合净化库提升安全性；5. 可先用report-only模式渐进迁移。

Trusted Types API 是现代浏览器提供的一种安全机制，用于防止 DOM 型 XSS（跨站脚本）攻击。它的核心思路是限制那些能直接执行或注入脚本的危险 DOM 操作，比如 innerHTML、document.write() 或 eval()，只允许传入“可信”的值。

启用 Trusted Types 并拦截不安全操作

要使用 Trusted Types，首先需要在页面中启用它。可以通过 CSP（内容安全策略）头来声明：

这条指令会让浏览器强制所有可能执行脚本的 DOM 方法只能接受由 Trusted Types 创建的“可信对象”，否则抛出错误。

例如，以下代码会失败：

document.getElementById("content").innerHTML = userInput;

因为 innerHTML 不再接受普通字符串，必须使用通过 Trusted Types 创建的可信 HTML 对象。

创建 Trusted Types 策略

你需要定义一个或多个策略（policy），用来生成可信类型。这些策略控制哪些数据可以被当作脚本或 HTML 使用。

示例：创建一个处理 HTML 的策略

壁纸样机神器

免费壁纸样机生成

0

查看详情

if (window.TrustedTypes && TrustedTypes.createPolicy) {
  const htmlPolicy = TrustedTypes.createPolicy('defaultHtmlPolicy', {
    createHTML: (input) => {
      // 这里可以对 input 做清理，如转义或白名单过滤
      return new DOMParser().parseFromString(input, 'text/html').body.textContent;
    }
  });
  // 使用可信 HTML
  const safeHTML = htmlPolicy.createHTML('<div>Hello</div>');
  document.getElementById("content").innerHTML = safeHTML;
}

这样，只有通过 createHTML 处理并返回的值才能赋给 innerHTML，有效阻止恶意脚本注入。

避免误用和绕过风险

虽然 Trusted Types 很强大，但配置不当仍可能被绕过。注意以下几点：

• 不要在策略中直接返回原始输入，比如 return input，这会使保护失效
• 尽量使用成熟的净化库（如 DOMPurify）结合 Trusted Types 使用
• 限制策略数量，避免创建过于宽松的全局策略
• 开发阶段开启控制台警告，及时发现违规操作

与现有代码兼容的渐进式迁移

如果项目已有大量动态 DOM 操作，可先启用 Trusted Types 并设置回退策略或监控模式：

使用 report-only 模式收集问题：

逐步修复违规后，再切换到强制模式。

基本上就这些。Trusted Types 不是银弹，但它能从根本上堵住大多数 DOM XSS 的入口，配合良好的输入处理和 CSP 策略，显著提升前端安全性。

以上就是怎样利用Trusted Types API防止DOM型XSS攻击？的详细内容，更多请关注php中文网其它相关文章！