TrustedTypesAPI如何防御DOMXSS

Trusted Types API 并非万能银弹，但它通过浏览器内核级强制校验，配合严格配置的 CSP（尤其是 require-trusted-types-for 'script' 和显式声明的策略白名单），能有效拦截绝大多数由 innerHTML、eval、location 跳转等引发的 DOM XSS 漏洞；关键在于正确创建并匹配命名策略、使用 DOMPurify 等可信净化器而非简单字符串替换、妥善适配框架（如 Vue/React 的安全封装）及构建工具链，稍有疏漏——如策略名拼错、srcdoc 未单独处理、或动态 import 未静态化——就会导致脚本中断或防护失效，真正落地需要安全策略、开发实践与工程基建的深度协同。

Trusted Types 不能“彻底杜绝”DOM XSS，但它能从浏览器内核层面强制拦截绝大多数未经策略处理的危险操作——前提是 CSP 配置正确、策略覆盖完整、且不绕过可信类型校验。

require-trusted-types-for 'script' 是生效前提

只调用 window.TrustedTypes.createPolicy() 不起作用。必须配合 HTTP 响应头中的 require-trusted-types-for 'script' 指令，浏览器才会对以下 API 抛出 TypeError：

• innerHTML、outerHTML、insertAdjacentHTML
• document.write / document.writeln
• location.href、location.assign（当值为 javascript: 时）
• eval、setTimeout、setInterval、new Function()

注意：require-trusted-types-for 'style' 和 'all' 目前兼容性较差（Safari 17.4+ 才开始支持 'style'），生产环境建议先锁定 'script'。

trusted-types 指令必须显式声明策略名

trusted-types 指令不是开关，而是白名单。如果写成 trusted-types *，Chrome 允许任意策略名，但 Safari/Firefox 会拒绝加载（2026 年实测）；若漏写策略名，比如只配了 trusted-types;，所有策略创建都会失败。

正确写法示例：

Content-Security-Policy: trusted-types htmlPolicy scriptPolicy; require-trusted-types-for 'script';

对应 JS 中必须使用完全匹配的名称：

if (window.TrustedTypes) {
  window.TrustedTypes.createPolicy('htmlPolicy', { createHTML: ... });
  window.TrustedTypes.createPolicy('scriptPolicy', { createScript: ... });
}

常见错误：策略名拼错、大小写不一致、或在策略未注册前就调用 getPolicyByName —— 此时返回 undefined，后续调用直接报错。

createHTML 不等于 HTML 转义，它需要真正净化

createHTML 回调函数里不能只做简单字符串替换（如 input.replace(/），这会被绕过。它必须返回语义安全的 HTML 片段，否则仍可能触发 XSS。

推荐做法：

• 用 DOMPurify.sanitize(input, { RETURN_TRUSTED_TYPE: true })（需确保 DOMPurify >= 3.0.0）
• 避免手写正则清洗，尤其不要信任 textContent 替代方案——它不解决 src、href 等属性注入
• 对 URL 类型内容，必须用 createScriptURL 或 createURL，且验证协议白名单（仅允许 https:、data: 等）

典型陷阱：把用户输入直接塞进