TrustedTypesAPI防御DOMXSS全攻略

Trusted Types API 是目前唯一能从根源上阻断 DOM XSS 的浏览器原生机制，但它绝非开箱即用的“银弹”——只有严格配合 CSP 响应头（require-trusted-types-for 'script' + trusted-types default）、确保所有高危 DOM 操作（如 innerHTML、location.href、eval 等）均通过显式创建的 Trusted Types 策略函数执行，且彻底改造或封装第三方库的字符串拼接逻辑，才能实现真正有效的防护；任何遗漏（如未设 HTTP 头、漏掉一个危险赋值、策略未过滤输入或依赖外部闭包）都会导致整个防御体系瞬间失效，甚至引发白屏崩溃——这意味着它既是终极防线，也是一场对代码规范性与工程严谨性的严苛考验。

Trusted Types 能不能彻底阻断 DOM XSS？

能，但只在启用强制策略（enforcement）且所有 DOM 操作都走 Trusted Types 接口的前提下。它不是银弹——不启用 require-trusted-types-for 指令、或漏掉一个 innerHTML = ...，整个防护就形同虚设。

如何启用并强制执行 Trusted Types 策略？

必须通过 HTTP 响应头开启强制模式，仅靠 JS 创建策略毫无防护效果。浏览器只在看到头信息后才拦截非 Trusted 类型的危险赋值。

• 响应头必须包含：Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default;
• default 是必需的策略名，否则 TrustedHTML 构造失败时会直接抛错而非降级
• 不支持 meta 标签设置该指令——CSP 的 require-trusted-types-for 只接受 HTTP 头
• 开发时可用 report-only 模式先收集违规：Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri /csp-report

哪些 DOM 操作会被拦截？哪些不会？

拦截范围明确限定在“可能执行脚本”的写入点，不是所有字符串赋值都管。关键看目标属性是否被规范列为“需要 Trusted 类型”。

• 会被拦截：element.innerHTML、document.write、location.href、eval、setTimeout(string)、setInterval(string)
• 不会拦截：element.textContent、element.setAttribute('data-id', ...)、JSON.parse() —— 这些本身不触发执行
• outerHTML 和 insertAdjacentHTML 同样受控，但 insertAdjacentText 安全，无需 Trusted 类型
• 注意：location.assign() 传字符串会被拦，但传 TrustedURL 实例则放行

怎么安全地构造和使用 TrustedHTML？

不能手动 new TrustedHTML，必须通过 trustedTypes.createPolicy() 创建的策略函数返回。每个策略应职责单一，避免把“通用 HTML 构造器”做成万能策略。

const policy = trustedTypes.createPolicy('dom-sanitizer', {
  createHTML: (input) => {
    // 必须做实际过滤，不能 return input
    const div = document.createElement('div');
    div.textContent = input; // 先清空脚本可能
    return div.innerHTML;
  }
});

// ✅ 正确用法
el.innerHTML = policy.createHTML('<strong>hello</strong>');
// ❌ 报错：Assignment to innerHTML attribute was blocked
el.innerHTML = '<script>alert(1)</script>';

常见坑：createPolicy 的第二个参数是纯对象字面量，不能引用外部变量或闭包；策略名（如 'dom-sanitizer'）需与 CSP 中声明的策略名一致；若策略函数抛错，赋值操作直接失败，页面可能白屏。

最易被忽略的一点：第三方库（比如旧版 Vue、Handlebars、或手写的模板函数）若直接拼接字符串并赋给 innerHTML，会在启用 Trusted Types 后立即崩溃——你得逐个确认它们是否已适配，或用 wrapper 策略兜底，而不是指望“加个头就万事大吉”。

到这里，我们也就讲完了《TrustedTypesAPI防御DOMXSS全攻略》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！