无需登录 数据私有 本地保存

Trusted Types 安全浏览 - DOM XSS防护演示

12
0
0
0
Trusted Types 检测
检测中... CSP检测中...
输入 HTML 内容 输入任意HTML代码，对比不安全与安全的执行结果
快速填充：
⚠ XSS 攻击已触发！
不安全输出（直接 innerHTML） 易受XSS攻击
等待执行...
直接使用 element.innerHTML = input，未经过任何过滤
安全输出（Trusted Types 防护） XSS防护
等待执行...
通过 Trusted Types 策略 清理后插入
安全策略日志 — 展示 Trusted Types 策略的过滤过程
等待执行操作...
CSP 头配置（服务端）
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types tt-demo-policy
将以上响应头添加到你的Web服务器配置中，即可强制启用Trusted Types。也可添加 report-uri /csp-report 来收集违规报告。
Trusted Types 策略代码（前端）
// 创建 Trusted Types 安全策略
const policy = trustedTypes.createPolicy('tt-demo-policy', {
  createHTML: (input) => {
    // 使用 DOMPurify 或自定义清理
    return sanitizeHTML(input);
  },
  createScriptURL: (input) => {
    // 验证URL来源
    if (isTrustedOrigin(input)) return input;
    throw new Error('Untrusted script URL');
  }
});
// 安全使用
element.innerHTML = policy.createHTML(userInput);
策略中的 createHTML 方法会对输入进行清理，移除事件处理器和危险标签，返回安全的 TrustedHTML 对象。
常见问题与知识点 (FAQ)

Trusted Types 是浏览器内置的安全API，旨在从根本上防止基于DOM的XSS（跨站脚本攻击）。它要求所有可能危险的DOM操作（如 innerHTML、document.write、script.src 等）只能接受经过安全策略处理的"可信类型"对象，而非原始字符串。这强制开发者对用户输入进行清理和验证，将XSS防护从"选择性"变为"强制性"。Trusted Types 是 W3C 标准，由Google Chrome团队主导，目前已在Chrome 83+、Edge 83+中得到完整支持。

DOM XSS 发生在客户端JavaScript代码中，常见的注入点包括：
  • innerHTML / outerHTML：<img src=x onerror=alert(1)>
  • document.write()：直接写入恶意脚本
  • eval() / setTimeout(string)：执行字符串形式的代码
  • script.src / script.textContent：动态加载恶意脚本
  • javascript: 协议：<a href="javascript:alert(1)">
  • 事件处理器：onclick、onmouseover、onerror、onload等
  • location / URL重定向：操纵window.location
  • postMessage：跨窗口消息中的恶意数据

Trusted Types 通过限制这些注入点只接受可信对象，从而阻断攻击路径。

Trusted Types 定义了三种可信类型：
类型用途对应DOM操作
TrustedHTML安全的HTML片段innerHTML、outerHTML、insertAdjacentHTML
TrustedScript安全的脚本内容eval()、script.textContent、Function()
TrustedScriptURL安全的脚本URLscript.src、import()、Worker()
每种类型都只能通过已注册的Trusted Types策略创建，确保数据经过开发者审核。

在HTTP响应头中添加：

Content-Security-Policy: require-trusted-types-for 'script'

限制允许的策略名称（可选但推荐）：

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy anotherPolicy

添加违规报告端点：

Content-Security-Policy: require-trusted-types-for 'script'; report-uri /csp-violation-report-endpoint

配置后，浏览器会拦截所有不安全的DOM操作并抛出TypeError，同时向报告端点发送违规信息。

默认策略是一个特殊的后备策略，当没有其他策略匹配时使用。使用 trustedTypes.createPolicy('default', ...) 创建。当代码尝试使用字符串进行DOM操作时，浏览器会先尝试默认策略来转换。如果默认策略也失败或不存在，则抛出TypeError。

注意 默认策略应谨慎使用，因为它可能成为安全漏洞的后门。建议仅用于渐进式迁移期间，最终应移除默认策略并显式使用命名策略。

  • Chrome 83+：完整支持 ✅
  • Edge 83+：完整支持 ✅
  • Opera 69+：完整支持 ✅
  • Firefox：实验性支持（需开启标志）⚠️
  • Safari：暂不支持 ❌

在不支持的浏览器中，建议使用 if (window.trustedTypes) 进行特性检测，并提供polyfill或降级方案。

使用以下JavaScript代码检测：

// 检测API是否存在
const apiAvailable = typeof window.trustedTypes !== 'undefined';

// 检测CSP是否强制启用（尝试赋值innerHTML）
let enforced = false;
try {
  const el = document.createElement('div');
  el.innerHTML = 'test';
} catch(e) {
  if (e instanceof TypeError) enforced = true;
}

console.log('API可用:', apiAvailable, 'CSP强制:', enforced);

如果CSP强制启用，对 innerHTML 赋字符串值会抛出TypeError异常。

Trusted Types 提供了强制机制，而DOMPurify提供了清理能力。两者是黄金搭档：

// 在Trusted Types策略中使用DOMPurify
const policy = trustedTypes.createPolicy('sanitize-html', {
  createHTML: (input) => {
    // DOMPurify返回清理后的安全字符串
    return DOMPurify.sanitize(input, {
      ALLOWED_TAGS: ['b','i','em','strong','a','p','br'],
      ALLOWED_ATTR: ['href','title','target']
    });
  }
});

策略的createHTML返回的字符串会自动被包装为TrustedHTML对象，从而满足浏览器的类型要求。

渐进式迁移步骤：
  1. 审计代码：找出所有使用 innerHTML、document.write、eval 的地方
  2. 引入清理库：安装DOMPurify或类似库
  3. 创建策略：定义Trusted Types策略，封装清理逻辑
  4. 替换赋值：将 el.innerHTML = x 改为 el.innerHTML = policy.createHTML(x)
  5. 添加CSP报告头：先使用 Content-Security-Policy-Report-Only 收集违规但不阻断
  6. 修复违规：根据报告修复所有违规点
  7. 正式启用：切换到 Content-Security-Policy 强制模式

几乎不会。Trusted Types 是在浏览器引擎层面的类型检查，性能开销极小。策略中的清理逻辑（如DOMPurify）的性能取决于清理库本身，而这部分工作在未使用Trusted Types时也应该执行。实际上，Trusted Types 通过统一和缓存策略，在某些场景下还能略微提升性能。总体而言，安全性提升远大于微不足道的性能影响。

Trusted Types 主要防止基于DOM的XSS攻击（即通过DOM API注入恶意代码）。它不能直接防止：
  • 反射型XSS：服务端直接返回未过滤的用户输入（需要在服务端处理）
  • 存储型XSS：数据库中存储的恶意内容（需要在数据存储和展示时处理）

但Trusted Types可以与CSP、输入验证、输出编码等措施配合，构建纵深防御体系，显著降低XSS攻击面。它是现代Web安全防护的重要一环。

🔧 相关工具