Trusted Types通过CSP策略强制DOM操作仅接受可信对象，阻止XSS攻击。1. 启用require-trusted-types-for ‘script’指令；2. 创建策略如htmlPolicy处理输入并返回安全HTML；3. 使用该对象赋值innerHTML；4. 避免直接返回原始输入，结合净化库提升安全性；5. 可先用report-only模式渐进迁移。
Trusted Types API 是现代浏览器提供的一种安全机制，用于防止 DOM 型 XSS（跨站脚本）攻击。它的核心思路是限制那些能直接执行或注入脚本的危险 DOM 操作，比如 innerHTML、document.write() 或 eval()，只允许传入“可信”的值。
启用 Trusted Types 并拦截不安全操作
要使用 Trusted Types，首先需要在页面中启用它。可以通过 CSP（内容安全策略）头来声明：
Content-Security-Policy: require-trusted-types-for ‘script’;
这条指令会让浏览器强制所有可能执行脚本的 DOM 方法只能接受由 Trusted Types 创建的“可信对象”，否则抛出错误。
例如，以下代码会失败：
document.getElementById(“content”).innerHTML = userInput;
因为 innerHTML 不再接受普通字符串，必须使用通过 Trusted Types 创建的可信 HTML 对象。
创建 Trusted Types 策略
你需要定义一个或多个策略（policy），用来生成可信类型。这些策略控制哪些数据可以被当作脚本或 HTML 使用。
示例：创建一个处理 HTML 的策略
if (window.TrustedTypes && TrustedTypes.createPolicy) {
const htmlPolicy = TrustedTypes.createPolicy(‘defaultHtmlPolicy’, {
createHTML: (input) => {
// 这里可以对 input 做清理，如转义或白名单过滤
return new DOMParser().parseFromString(input, ‘text/html’).body.textContent;
}
});
// 使用可信 HTML
const safeHTML = htmlPolicy.createHTML(‘
‘);
document.getElementById(“content”).innerHTML = safeHTML;
}
这样，只有通过 createHTML 处理并返回的值才能赋给 innerHTML，有效阻止恶意脚本注入。
避免误用和绕过风险
虽然 Trusted Types 很强大，但配置不当仍可能被绕过。注意以下几点：
不要在策略中直接返回原始输入，比如 return input，这会使保护失效 尽量使用成熟的净化库（如 DOMPurify）结合 Trusted Types 使用 限制策略数量，避免创建过于宽松的全局策略 开发阶段开启控制台警告，及时发现违规操作
与现有代码兼容的渐进式迁移
如果项目已有大量动态 DOM 操作，可先启用 Trusted Types 并设置回退策略或监控模式：
使用 report-only 模式收集问题：
Content-Security-Policy-Report-Only: require-trusted-types-for ‘script’; report-uri /csp-report-endpoint
逐步修复违规后，再切换到强制模式。
基本上就这些。Trusted Types 不是银弹，但它能从根本上堵住大多数 DOM XSS 的入口，配合良好的输入处理和 CSP 策略，显著提升前端安全性。
以上就是怎样利用Trusted Types API防止DOM型XSS攻击？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528071.html
微信扫一扫 
支付宝扫一扫 
