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

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> 标签 </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(/<script.>.*?/gi, ''); } }); } </script.></font> <p>使用该策略设置 innerHTML：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2179" title="Comet AI 浏览器"><img src="https://img.php.cn/upload/manual/000/969/633/69e8a9e061c88522.png" alt="Comet AI 浏览器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/gongju/2179" title="Comet AI 浏览器" class="overflowclass">Comet AI 浏览器</a> <p class="overflowclass">下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。</p> </div> <a rel="nofollow" href="/xiazai/gongju/2179" title="Comet AI 浏览器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <font face="monospace"> const policy = window.TrustedTypes.getPolicyByName('htmlPolicy'); element.innerHTML = policy.createHTML('<b>Hello</b><script>alert(1)</script>'); // 结果：Hello，脚本被过滤

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