Trusted Types API 初探：彻底防御 DOM XSS 攻击

1. 背景与概述

Trusted Types API 是 Chrome 浏览器引入的一种新型安全机制，旨在彻底解决 DOM XSS（跨站脚本）攻击问题。它取代了之前存在诸多问题的 XSS Auditor 机制，通过强制开发者使用类型安全的 API 来处理危险操作。

2. 为什么需要 Trusted Types

2.1 XSS Auditor 的缺陷

• 被绕过的方式过多
• 误报率高，影响正常功能
• 被动防御机制，无法从根本上解决问题

2.2 Trusted Types 的优势

• 主动防御机制，强制开发者使用安全 API
• 从根本上消除不安全的 DOM 操作
• 提供明确的类型检查和安全策略

3. 基本使用方法

3.1 启用 Trusted Types

首先需要在 CSP (Content Security Policy) 中配置：

Content-Security-Policy: trusted-types *

3.2 基本代码示例

<script>
// 创建一个安全策略
const templatePolicy = TrustedTypes.createPolicy('template', {
  createHTML: (templateId) => {
    const tpl = templateId;
    // 自定义验证逻辑
    if (/^[0-9a-z-]$/.test(tpl)) {
      return `<link rel="stylesheet" href="./templates/\${tpl}/style.css">`;
    }
    throw new TypeError();
  }
});

// 使用策略创建安全的 HTML
const html = templatePolicy.createHTML(location.hash.match(/tplid=([^&]*)/)[1]);
document.head.innerHTML = html;
</script>

4. 核心概念

4.1 Trusted Types 接口

• TrustedHTML: 表示安全的 HTML 内容
• TrustedScript: 表示安全的 JavaScript 代码
• TrustedScriptURL: 表示安全的脚本 URL

4.2 主要方法

• TrustedTypes.createPolicy(name, rules): 创建安全策略
  • createHTML: 定义如何创建安全的 HTML
  • createScript: 定义如何创建安全的脚本
  • createScriptURL: 定义如何创建安全的脚本 URL

5. 实际应用场景

5.1 防御 DOM XSS

// 不安全的方式
document.body.innerHTML = userInput; // 会被 Trusted Types 阻止

// 安全的方式
const policy = TrustedTypes.createPolicy('default', {
  createHTML: (input) => {
    // 自定义过滤逻辑
    return DOMPurify.sanitize(input);
  }
});
document.body.innerHTML = policy.createHTML(userInput);

5.2 动态加载资源

const policy = TrustedTypes.createPolicy('resource', {
  createScriptURL: (url) => {
    if (url.startsWith('https://trusted.cdn.com/')) {
      return url;
    }
    throw new TypeError('Untrusted script URL');
  }
});

const script = document.createElement('script');
script.src = policy.createScriptURL(userProvidedUrl);
document.body.appendChild(script);

6. 兼容性与部署

6.1 浏览器支持

• Chrome 73-78 版本需要手动启用实验性功能：
  • 访问 chrome://flags/#enable-experimental-web-platform-features
  • 设置为 Enabled
• Chrome 79+ 版本默认支持（但可能仍在调整中）

6.2 渐进式部署策略

1. 先监控模式部署：

   Content-Security-Policy: trusted-types; report-uri /csp-report
   

2. 分析违规报告
3. 修复所有违规点
4. 强制执行：

   Content-Security-Policy: trusted-types *
   

7. 最佳实践

1. 为每个上下文创建专用策略：不同用途的 HTML 处理应使用不同的策略
2. 严格的默认策略：默认拒绝所有未明确允许的内容
3. 结合现有库：可与 DOMPurify 等库结合使用
4. 全面覆盖：确保所有动态内容创建都通过 Trusted Types
5. 测试验证：全面测试各种边界情况

8. 常见问题解决

8.1 TrustedTypes is not defined

• 确保使用支持的 Chrome 版本（73-78）
• 确保已启用实验性功能
• Chrome 79+ 可能需要等待官方更新

8.2 如何禁用自动更新

1. 下载指定 Chrome 版本（如 78）
2. 运行 msconfig
3. 禁用 Google 更新服务

9. 总结

Trusted Types API 通过以下方式彻底防御 DOM XSS：

1. 强制使用类型安全的 API
2. 要求开发者明确验证逻辑
3. 消除危险的 DOM 操作
4. 提供可审计的安全策略

虽然目前仍在试验阶段，但 Trusted Types 代表了 Web 安全防御的未来方向，建议开发者尽早熟悉并采用这一机制。