Trusted Types API：通过安全 DOM 操作来增强安全性

在对抗网络漏洞的持续斗争中，跨站脚本（XSS）攻击仍然是一个长期存在的威胁。这些攻击利用 Web 应用程序中的漏洞，将恶意脚本注入到受信任的网站中，从而允许攻击者窃取敏感数据、篡改网站或将用户重定向到恶意网站。为了应对这一问题，Trusted Types API 应运而生，它作为一种强大的防御机制，促进安全的 DOM 操作，并显著降低 XSS 漏洞的风险。

了解跨站脚本（XSS）

当用户提供的数据在没有经过适当净化或编码的情况下被不当合并到网页输出中时，就会发生 XSS 攻击。XSS 主要有三种类型：

• 存储型 XSS：恶意脚本被永久存储在目标服务器上（例如，在数据库、论坛帖子或评论区）。当其他用户访问这些存储的数据时，该脚本就会在他们的浏览器中执行。
• 反射型 XSS：恶意脚本被嵌入到 URL 或表单提交中，并立即在响应中反射回给用户。这通常涉及诱骗用户点击一个恶意链接。
• 基于 DOM 的 XSS：恶意脚本利用客户端 JavaScript 代码本身的漏洞，而不是依赖服务器端的数据存储或反射。这通常涉及直接操纵文档对象模型（DOM）。

传统上，开发人员依靠输入验证和输出编码来防止 XSS 攻击。虽然这些技术至关重要，但正确实施起来可能很复杂，并且常常容易出错。Trusted Types API 通过在 DOM 层面强制执行安全编码实践，提供了一种更强大、对开发人员更友好的方法。

Trusted Types API 简介

Trusted Types API 是一项 Web 平台安全功能，通过限制使用具有潜在危险的 DOM 操作方法，帮助开发人员编写更安全的 Web 应用程序。它强制执行一条规则，即 DOM XSS 注入点（可能发生脚本注入的位置）只能接受经过明确净化并封装在“可信类型”中的值。这实质上为用于操作 DOM 的字符串创建了一个类型系统，其中不受信任的数据不能直接传递给这些注入点。

关键概念：

• DOM XSS 注入点（Sinks）：这些是通常用于将脚本注入页面的属性和方法。例如 innerHTML、outerHTML、src、href 和 document.write。
• 可信类型（Trusted Types）：这些是特殊的包装对象，表明一个字符串已经过仔细检查，可以安全地用于 DOM XSS 注入点。该 API 提供了几种内置的可信类型，如 TrustedHTML、TrustedScript 和 TrustedScriptURL。
• 类型策略（Type Policies）：这些是定义如何创建和使用可信类型的规则。它们指定了哪些函数可以创建可信类型，以及如何对底层字符串进行净化或验证。

Trusted Types 的工作原理

Trusted Types 的核心原则是防止开发人员将不受信任的字符串直接传递给 DOM XSS 注入点。当启用 Trusted Types 时，如果在需要可信类型的地方使用了常规字符串，浏览器会抛出一个 TypeError。

要使用 Trusted Types，您必须首先定义一个类型策略。类型策略是一个 JavaScript 对象，它指定了如何创建可信类型。例如：

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.myPolicy = trustedTypes.createPolicy('myPolicy', {
    createHTML: function(input) {
      // 在此处对输入进行净化处理。这是一个占位符；请使用真正的净化库。
      let sanitized = DOMPurify.sanitize(input); // 使用 DOMPurify 的示例
      return sanitized;
    },
    createScriptURL: function(input) {
      // 在此处验证输入，确保它是一个安全的 URL。
      if (input.startsWith('https://example.com/')) {
        return input;
      } else {
        throw new Error('Untrusted URL: ' + input);
      }
    },
    createScript: function(input) {
         // 创建脚本时要非常小心，只有在清楚自己在做什么时才这样做
         return input;
    }
  });
}

在此示例中，我们创建了一个名为“myPolicy”的类型策略，它有三个函数：createHTML、createScriptURL 和 createScript。createHTML 函数使用像 DOMPurify 这样的净化库来净化输入字符串。createScriptURL 函数验证输入以确保它是一个安全的 URL。createScript 函数应极其谨慎地使用，如果可能，最好避免使用，因为它允许执行任意脚本。

创建类型策略后，您就可以用它来创建可信类型：

let untrustedHTML = '';
let trustedHTML = myPolicy.createHTML(untrustedHTML);

document.getElementById('myElement').innerHTML = trustedHTML;

在这个例子中，我们将一个不受信任的 HTML 字符串传递给我们类型策略的 createHTML 函数。该函数会净化字符串并返回一个 TrustedHTML 对象。然后，我们可以安全地将这个 TrustedHTML 对象分配给元素的 innerHTML 属性，而不会有遭受 XSS 攻击的风险。

使用 Trusted Types 的好处

• 增强安全性：Trusted Types 通过阻止开发人员将不受信任的字符串直接传递给 DOM XSS 注入点，显著降低了 XSS 攻击的风险。
• 提高代码质量：Trusted Types 鼓励开发人员更仔细地考虑数据净化和验证，从而改善代码质量和安全实践。
• 简化安全审查：Trusted Types 使识别和审查代码中潜在的 XSS 漏洞变得更加容易，因为 DOM XSS 注入点的使用受到类型策略的明确控制。
• 与 CSP 兼容：Trusted Types 可以与内容安全策略（CSP）结合使用，以进一步增强 Web 应用程序的安全性。

实施注意事项

实施 Trusted Types 需要周密的规划和执行。以下是一些重要的考虑因素：

• 识别 DOM XSS 注入点：第一步是识别应用程序中所有的 DOM XSS 注入点。这些是用于操作 DOM 并可能被 XSS 攻击利用的属性和方法。
• 选择净化库：选择一个信誉良好且维护良好的净化库，以便在创建可信类型之前净化不受信任的数据。DOMPurify 是一个流行且有效的选择。请确保根据您的具体需求正确配置它。
• 定义类型策略：创建类型策略，指定如何创建和使用可信类型。仔细考虑类型策略中的净化和验证逻辑，以确保它们能有效防止 XSS 攻击。
• 更新代码：当您使用可能不受信任的数据操作 DOM 时，更新您的代码以使用 Trusted Types。用可信类型的赋值替换对 DOM XSS 注入点的直接赋值。
• 全面测试：实施 Trusted Types 后，彻底测试您的应用程序，以确保其正常工作且没有出现回归问题。特别注意您正在操作 DOM 的区域。
• 迁移策略：在大型现有代码库上实施 Trusted Types 可能具有挑战性。考虑采用渐进式迁移策略，从应用程序最关键的区域开始。您可以最初在“仅报告”模式下启用 Trusted Types，以便在不破坏应用程序的情况下识别违规行为。

示例场景

让我们看一些在不同场景下如何使用 Trusted Types 的实际例子：

场景 1：显示用户生成的内容

一个网站允许用户提交评论和帖子。如果没有 Trusted Types，显示这些内容可能会受到 XSS 攻击。通过使用 Trusted Types，您可以在显示用户生成的内容之前对其进行净化，确保删除任何恶意脚本。

// 使用 Trusted Types 之前：
// document.getElementById('comments').innerHTML = userComment; // 易受 XSS 攻击

// 使用 Trusted Types 之后：
let trustedHTML = myPolicy.createHTML(userComment);
document.getElementById('comments').innerHTML = trustedHTML;

场景 2：加载外部 JavaScript 文件

一个网站从外部源动态加载 JavaScript 文件。如果没有 Trusted Types，恶意攻击者可能会用自己的恶意脚本替换其中一个文件。通过使用 Trusted Types，您可以在加载脚本文件之前验证其 URL，确保它来自受信任的来源。

// 使用 Trusted Types 之前：
// let script = document.createElement('script');
// script.src = untrustedURL; // 易受 XSS 攻击
// document.head.appendChild(script);

// 使用 Trusted Types 之后：
let trustedScriptURL = myPolicy.createScriptURL(untrustedURL);
let script = document.createElement('script');
script.src = trustedScriptURL;
document.head.appendChild(script);

场景 3：设置元素属性

一个网站根据用户输入设置 DOM 元素的属性。例如，设置锚标签的 `href` 属性。如果没有 Trusted Types，恶意攻击者可能会注入一个 JavaScript URI，导致 XSS。使用 Trusted Types，您可以在设置属性之前验证 URL。

// 使用 Trusted Types 之前：
// anchorElement.href = userInputURL; // 易受 XSS 攻击

// 使用 Trusted Types 之后：
let trustedURL = myPolicy.createScriptURL(userInputURL);
anchorElement.href = trustedURL;

Trusted Types 与内容安全策略 (CSP)

Trusted Types 与内容安全策略（CSP）协同工作，为防御 XSS 攻击提供了深度防御。CSP 是一种安全机制，允许您指定网站上允许加载哪些来源的内容。通过将 Trusted Types 与 CSP 相结合，您可以创建一个高度安全的 Web 应用程序。

要在 CSP 中启用 Trusted Types，您可以使用 require-trusted-types-for 指令。该指令指定所有 DOM XSS 注入点都需要使用 Trusted Types。例如：

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

这个 CSP 头部告诉浏览器，所有脚本执行都需要 Trusted Types，并且只允许由“myPolicy”类型策略创建的可信类型。

浏览器支持与 Polyfill

浏览器对 Trusted Types 的支持正在增长，但尚未普及。截至 2024 年底，像 Chrome、Firefox 和 Edge 这样的主流浏览器都提供了良好的支持。Safari 的支持则相对滞后。请查看 CanIUse.com 以获取最新的浏览器兼容性信息。

对于不支持 Trusted Types 的旧版浏览器，您可以使用 polyfill。Polyfill 是一段 JavaScript 代码，它为旧版浏览器提供了新功能。有几种 Trusted Types polyfill 可用，例如 Google 提供的那种。然而，polyfill 无法提供与原生支持同等级别的安全性。它们主要帮助解决兼容性问题，并允许您即使部分用户使用旧版浏览器也能开始使用该 API。

替代方案与注意事项

虽然 Trusted Types 提供了显著的安全提升，但认识到其他替代方法以及它可能不完全适用的场景也很重要：

• 框架集成：像 React、Angular 和 Vue.js 这样的现代 JavaScript 框架通常以减轻 XSS 风险的方式处理 DOM 操作。这些框架通常默认对数据进行转义，并鼓励使用安全编码模式。然而，即使使用框架，如果您绕过框架的内置保护措施或不正确地使用 dangerouslySetInnerHTML (React) 或类似功能，仍然可能引入 XSS 漏洞。
• 严格的输入验证和输出编码：传统的输入验证和输出编码方法仍然至关重要。Trusted Types 是对这些技术的补充，而不是替代。输入验证确保进入应用程序的数据格式良好并符合预期格式。输出编码确保数据在页面上显示时被正确转义，防止浏览器将其解释为代码。
• 性能开销：虽然通常很小，但 Trusted Types 所需的净化和验证过程可能会带来轻微的性能开销。对您的应用程序进行性能分析以识别任何性能瓶颈并进行相应优化至关重要。
• 维护负担：实施和维护 Trusted Types 需要对应用程序的 DOM 结构和数据流有深入的理解。创建和管理类型策略可能会增加维护负担。

真实世界案例与研究

一些组织已经成功实施了 Trusted Types 来提高其 Web 应用程序的安全性。例如，Google 在其产品和服务中广泛使用了 Trusted Types。其他金融和电子商务领域的公司，由于安全至关重要，也正在采用 Trusted Types 来保护敏感的用户数据和防止金融欺诈。这些真实世界的例子证明了 Trusted Types 在复杂和高风险环境中减轻 XSS 风险的有效性。

结论

Trusted Types API 代表了 Web 应用程序安全领域的一大进步，为防止 XSS 攻击提供了一种强大且对开发人员友好的机制。通过强制执行安全的 DOM 操作实践并促进仔细的数据净化和验证，Trusted Types 使开发人员能够构建更安全、更可靠的 Web 应用程序。虽然实施 Trusted Types 需要周密的规划和执行，但其在增强安全性和提高代码质量方面的好处是值得的。随着浏览器对 Trusted Types 的支持不断增长，它很可能成为对抗网络漏洞斗争中越来越重要的工具。

对于全球用户而言，采纳像使用 Trusted Types 这样的安全最佳实践，不仅仅是为了保护单个应用程序，更是为了为每个人营造一个更安全、更值得信赖的网络环境。在一个全球化的世界里，数据跨境流动，安全漏洞可能会产生深远的影响，这一点尤为重要。无论您是东京的开发人员、伦敦的安全专家，还是圣保罗的企业主，理解并实施像 Trusted Types 这样的技术对于构建一个安全且有弹性的数字生态系统至关重要。