什么是 Trusted Types API，它如何帮助我们从根源上防止 DOM XSS 攻击？-js教程-PHP中文网

什么是 Trusted Types API，它如何帮助我们从根源上防止 DOM XSS 攻击？

幻影之瞳

发布： 2025-10-05 09:22:02

原创

559人浏览过

Trusted Types通过强制使用可信对象阻止DOM-based XSS，要求开发者创建策略处理HTML、脚本和URL，结合CSP头可有效拦截危险操作，提升应用安全性。

什么是 trusted types api，它如何帮助我们从根源上防止 dom xss 攻击？

Trusted Types API 是一种浏览器安全机制，旨在从根源上阻止 DOM-based XSS（跨站脚本）攻击。它的核心思路是：不允许开发者直接将不可信的数据当作可执行的脚本或 HTML 插入到页面中，而是强制要求通过可信类型对象来处理这类敏感操作。

DOM XSS 的常见成因

DOM XSS 发生在 JavaScript 动态操作 DOM 时，把用户输入（如 URL 参数、API 响应）未经充分验证或转义就写入可能导致脚本执行的位置，比如：

innerHTML：插入 HTML 字符串
outerHTML：替换整个元素的 HTML
document.write()：直接写入内容
location.href、location.assign()：跳转到恶意 URL

例如：

element.innerHTML = userInput; // 危险！userInput 可能包含 <script> 标签

Trusted Types 如何工作

Trusted Types 引入了“信任”的概念。它不允许直接传入字符串到危险的 DOM 操作中，必须使用由策略创建的“受信任对象”（如 TrustedHTML、TrustedScript、TrustedURL）。

开发者需要预先定义策略（policy），用于封装数据处理逻辑。这些策略负责对输入进行清理、转义或验证，并返回一个可信类型实例。

示例：定义一个允许安全 HTML 的策略

if (window.TrustedTypes && !window.TrustedTypes.createPolicy('defaultPolicy')) { window.TrustedTypes.createPolicy('htmlPolicy', { createHTML: (input) => { // 简单示例：仅允许特定标签，实际应用应使用 DOMPurify 等库 return input.replace(/.*?/gi, ''); } }); }

使用该策略设置 innerHTML：

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

const policy = window.TrustedTypes.getPolicyByName('htmlPolicy'); element.innerHTML = policy.createHTML('<b>Hello</b><script>alert(1)</script>'); // 结果：<b>Hello</b>，脚本被过滤

如果尝试传入普通字符串，浏览器会抛出 TypeError，从而阻止潜在攻击。