如何通过 Trusted Types API 从根本上杜绝 DOM 型 XSS 脚本攻击-js教程-PHP中文网

能彻底阻断 dom xss，但仅当启用 csp 头 require-trusted-types-for 'script' 并确保所有危险 dom 操作均通过 trusted types 策略接口执行；否则防护失效。

如何通过 trusted types api 从根本上杜绝 dom 型 xss 脚本攻击

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 策略兜底，而不是指望“加个头就万事大吉”。