如何通过 Trusted Types API 在生产环境强制执行脚本清理策略以彻底根除 DOM 型 XSS-js教程-PHP中文网

Trusted Types 不能彻底根除 DOM 型 XSS，仅在 CSP 强制启用、策略全覆盖所有 sink 且无绕过路径时才具备运行时拦截能力；漏配头、漏管 sink 或策略返回原始字符串均导致防护失效。

如何通过 trusted types api 在生产环境强制执行脚本清理策略以彻底根除 dom 型 xss

Trusted Types

不能“彻底根除” DOM 型 XSS，它只在 CSP 强制启用、策略全覆盖且无绕过路径时，才具备运行时拦截能力。漏配一个 HTTP 头、漏管一个 sink、或策略函数返回原始字符串，防护就完全失效。

浏览器只在收到 Content-Security-Policy 响应头后才启动 Trusted Types 拦截机制。不被支持——这是常见部署错误。

生产环境必需的最小头配置是：

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

trusted-types default 表示只允许创建名为 default 的策略；若策略名不匹配（如代码里调用 trustedTypes.createPolicy('htmlSanitizer', ...)），会直接抛 TypeError: Failed to create a Trusted Type policy
require-trusted-types-for 'script' 是开关：不加这句，所有 innerHTML = 赋值照常执行，零防护
开发阶段可用 Content-Security-Policy-Report-Only 先收集违规，但上线前必须切为正式头

Trusted Types 控制的是「DOM sink」列表，不是仅限 innerHTML。以下 API 全部受控，缺一不可：

el.innerHTML / el.outerHTML / el.insertAdjacentHTML()
document.write() / document.writeln()
DOMParser.parseFromString(html, 'text/html')
eval() / setTimeout(string) / setInterval(string) / new Function(string)
location.href（当赋值含 javascript: 时）

框架（如 Vue 3.4+、React 18.3+）已适配 Trusted Types，但旧版本或自定义渲染逻辑可能绕过——需确认其内部是否使用 TrustedHTML 封装后再调用 sink。

在策略里用正则替换标签、手动白名单过滤、或调用 DOMPurify.sanitize() 再包装，是高危反模式：

正则无法覆盖所有 XSS 变体（比如），且性能差
DOMPurify 在策略内同步执行会阻塞主线程，高频渲染场景下明显卡顿
正确做法是：能用 el.textContent = input 就不用 innerHTML；必须插 HTML 时，在业务层用 DOMPurify 净化，再交由策略封装：policy.createHTML(purifiedHtml)
default 策略名是强制要求的——如果策略构造失败（如传入 null），浏览器不会降级，而是直接抛错中断执行

这两个看似不显眼的操作，实际属于高危 sink，但常被遗漏：

location.assign('javascript:alert(1)') 会被拦截；但传 trustedTypes.createURL('https://a.com') 构造的 TrustedURL 实例则放行
el.setAttribute('onclick', 'alert(1)') 在部分浏览器（Chrome 120+、Safari 17.4+）已受控，但旧版不拦截；更稳妥的是禁用内联事件，改用 el.addEventListener('click', handler)
el.setAttribute('href', 'javascript:...') 同样受控，但需注意：只有属性名是标准事件或 URL 类型时才触发检查，el.setAttribute('data-href', ...) 不拦截

真正难防的不是技术本身，而是团队对 sink 清单的认知盲区——只要有一个未声明、未封装、未拦截的入口存在，攻击者就能绕过整个机制。