Trusted Types API

客户端或基于 DOM 的 XSS 攻击发生在用户控制的数据（例如输入表单字段的数据）到达可以执行该数据的函数时。这些函数被称为注入接收器。基于 DOM 的 XSS 攻击发生在用户能够编写任意 JavaScript 代码并使其由这些函数之一执行时。

Trusted Types API 锁定了有风险的注入接收器，要求您在将数据传递给这些函数之一之前对其进行处理。如果您使用字符串，则浏览器将抛出一个 TypeError 并阻止使用该函数。

Trusted Types 与 内容安全策略 以及 trusted-types 和 require-trusted-types-for 指令一起使用。

Trusted Types API 锁定了可能充当 DOM-XSS 攻击媒介的注入接收器。注入接收器是任何 Web API 函数，这些函数应该只使用受信任的、已验证的或已清理的输入调用。注入接收器的示例包括

• 将 HTML 插入文档的函数，例如 Element.innerHTML、Element.outerHTML 或 Document.write()。
• 使用调用者控制的标记创建新的同源 Document 的函数，例如 DOMParser.parseFromString()。
• 执行代码的函数，例如 eval()。
• 接受要加载或执行的代码 URL 的 Element 属性的设置器。

Trusted Types 将强制您在将数据传递给任何注入接收器之前处理数据，而不是使用字符串。这确保了数据是可信的。

策略是 Trusted Types 的工厂。Web 开发人员可以指定一组用于创建类型化对象的策略，这些对象构成有效 Trusted Type 对象的受信任代码库。

TrustedHTML

表示要插入注入接收器的字符串，该字符串将将其呈现为 HTML。

TrustedScript

表示要插入注入接收器的字符串，该字符串可能导致脚本被执行。

TrustedScriptURL

表示要插入注入接收器的字符串，该字符串将将其解析为外部脚本资源的 URL。

TrustedTypePolicy

定义用于创建上述 Trusted Type 对象的函数。

TrustedTypePolicyFactory

创建策略并验证 Trusted Type 对象实例是否通过其中一个策略创建。

在下面的示例中，我们创建一个策略，该策略将使用 TrustedTypePolicyFactory.createPolicy() 创建 TrustedHTML 对象。然后，我们可以使用 TrustedTypePolicy.createHTML() 创建一个经过清理的 HTML 字符串，将其插入文档。

然后，可以使用 Element.innerHTML 使用清理后的值，以确保无法注入新的 HTML 元素。

<div id="myDiv"></div>

const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) =>
    string
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&apos;"),
});

let el = document.getElementById("myDiv");
const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped;

阅读有关此示例的更多信息，并在文章 使用 Trusted Types 防止基于 DOM 的跨站点脚本漏洞 中发现其他清理输入的方法。

• 使用 Trusted Types 防止基于 DOM 的跨站点脚本漏洞
• Trusted Types polyfill（也可用作 npm 包）