探讨 `Trusted Types API` (提案) 如何通过 `Policy` 机制有效防御 `DOM XSS` 攻击。

各位观众老爷们，大家好！今天咱们来聊聊一个能让你的网页“金钟罩铁布衫”的宝贝——Trusted Types API。这玩意儿可是防御DOM XSS攻击的一把好手，而且核心就在于它的Policy机制。接下来，咱们就深入浅出地剖析一下这玩意儿的原理和用法，保证让你听得懂，学得会，用得上！

一、什么是DOM XSS？为啥要Trusted Types？

首先，咱得搞清楚啥是DOM XSS。简单来说，就是攻击者通过篡改页面的DOM结构，注入恶意脚本，然后在你的浏览器里执行。这就像是你家的后门没锁好，小偷溜进来搞破坏一样。

举个栗子：

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const maliciousInput = urlParams.get('userInput');
  document.getElementById('output').innerHTML = maliciousInput; // 危险！
</script>
<div id="output"></div>

在这个例子里，如果攻击者在URL里塞入类似?userInput=<img src=x onerror=alert(1)>这样的恶意代码，那么innerHTML就会执行这个代码，弹出一个烦人的alert框。这仅仅是个小例子，实际攻击可能更加隐蔽和危险。

传统的XSS防御手段，比如输入验证和输出编码，虽然有用，但总有疏漏的时候。而且，随着Web应用的复杂度越来越高，人工审核每一段可能存在XSS风险的代码变得越来越困难。

这时候，Trusted Types就闪亮登场了！它从根本上改变了游戏规则，不再是亡羊补牢，而是未雨绸缪。

二、Trusted Types：信任的类型？啥意思？

Trusted Types API的核心思想是：强制开发者对某些容易引入XSS风险的DOM操作使用经过“信任”的数据类型。这些类型包括：

• TrustedHTML：用于HTML片段。
• TrustedScriptURL：用于URL，特别是用于<script>标签的src属性。
• TrustedScript：用于JavaScript代码。

简单来说，就是浏览器说：“老铁，你不能随便把字符串塞到这些地方，必须先经过我的同意，告诉我你这个字符串是安全的。”

三、Policy：信任的源头

那么，浏览器怎么知道一个字符串是“安全的”呢？这就轮到Policy（策略）登场了。Policy是一个JavaScript对象，它定义了一系列的规则，用于创建Trusted Types实例。你可以理解成一个“白名单”，只有符合Policy规则的字符串才能被转换成TrustedHTML、TrustedScriptURL或TrustedScript。

创建一个Policy的例子：

// 创建一个名为 "my-policy" 的策略
const policy = trustedTypes.createPolicy('my-policy', {
  createHTML: (input) => {
    // 在这里进行安全检查和清理
    // 例如，只允许特定的HTML标签和属性
    const sanitizedHTML = DOMPurify.sanitize(input); // 使用DOMPurify进行消毒
    return sanitizedHTML; // 返回消毒后的 TrustedHTML 对象
  },
  createScriptURL: (input) => {
    // 限制脚本URL的来源
    if (input.startsWith('https://example.com/scripts/')) {
      return input; // 返回 TrustedScriptURL 对象
    } else {
      throw new Error('Invalid script URL');
    }
  },
  createScript: (input) => {
    // 限制脚本内容，例如只允许执行某些函数
    if (input.includes('safeFunction()')) {
      return input; // 返回 TrustedScript 对象
    } else {
      throw new Error('Invalid script content');
    }
  }
});

在这个例子里，我们创建了一个名为my-policy的策略，它定义了三个函数：

• createHTML：用于创建TrustedHTML对象。这个函数接收一个字符串作为输入，然后使用DOMPurify库对其进行消毒，移除潜在的恶意代码。
• createScriptURL：用于创建TrustedScriptURL对象。这个函数只允许以https://example.com/scripts/开头的URL。
• createScript：用于创建TrustedScript对象。这个函数只允许包含safeFunction()的脚本。

四、如何使用Policy？

创建了Policy之后，就可以用它来创建Trusted Types实例了。例如：

// 使用策略创建 TrustedHTML 对象
const untrustedHTML = '<img src=x onerror=alert(1)>';
const trustedHTML = policy.createHTML(untrustedHTML);

// 使用策略创建 TrustedScriptURL 对象
const untrustedScriptURL = 'http://evil.com/malicious.js';
try {
  const trustedScriptURL = policy.createScriptURL(untrustedScriptURL);
  // 这里不会执行，因为 untrustedScriptURL 不符合 policy 的规则
} catch (error) {
  console.error(error); // 输出 "Invalid script URL"
}

const safeScriptURL = 'https://example.com/scripts/safe.js';
const trustedScriptURL = policy.createScriptURL(safeScriptURL);

// 使用策略创建 TrustedScript 对象
const untrustedScript = 'alert(1)';
try {
  const trustedScript = policy.createScript(untrustedScript);
  // 这里不会执行，因为 untrustedScript 不符合 policy 的规则
} catch (error) {
  console.error(error); // 输出 "Invalid script content"
}

const safeScript = 'safeFunction()';
const trustedScript = policy.createScript(safeScript);

五、如何应用Trusted Types到DOM操作？

现在，有了Trusted Types实例，就可以安全地将它们应用到DOM操作了。例如：

<div id="output"></div>
<script>
  // ... (创建 policy 和 trustedHTML 的代码)

  // 使用 TrustedHTML 对象设置 innerHTML
  document.getElementById('output').innerHTML = trustedHTML; // 安全！

  // 使用 TrustedScriptURL 对象设置 script 标签的 src 属性
  const script = document.createElement('script');
  script.src = trustedScriptURL; // 安全！
  document.head.appendChild(script);

  // 使用 TrustedScript 对象创建 script 标签
  const script2 = document.createElement('script');
  script2.text = trustedScript;
  document.head.appendChild(script2);

</script>

在这个例子里，innerHTML接收的是一个TrustedHTML对象，script.src接收的是一个TrustedScriptURL对象，script.text接收的是一个TrustedScript对象。浏览器会检查这些对象是否是使用Policy创建的，如果是，就认为它们是安全的，可以执行相应的DOM操作。

六、如果不用Policy会怎样？

如果尝试直接将字符串传递给那些需要Trusted Types实例的DOM操作，会发生什么呢？答案是：浏览器会抛出一个错误！

<div id="output"></div>
<script>
  // ... (没有创建 policy 的代码)

  // 尝试直接使用字符串设置 innerHTML
  try {
    document.getElementById('output').innerHTML = '<img src=x onerror=alert(1)>'; // 报错！
  } catch (error) {
    console.error(error); // 输出 "TypeError: ... requires TrustedHTML"
  }
</script>

浏览器会告诉你，你需要提供一个TrustedHTML对象，而不是一个普通的字符串。这强制你必须使用Policy来创建Trusted Types实例，从而保证数据的安全性。

七、实际应用中的考量

虽然Trusted Types API很强大，但在实际应用中，还需要考虑一些问题：

• 兼容性： Trusted Types API并不是所有浏览器都支持。你需要使用Feature Detection来判断浏览器是否支持Trusted Types API，并在不支持的浏览器中提供Fallback方案。
• 策略设计： Policy的设计至关重要。一个过于宽松的Policy可能无法有效地防御XSS攻击，而一个过于严格的Policy可能会导致应用程序无法正常工作。你需要仔细权衡安全性和可用性。
• 第三方库： 许多第三方库可能会直接操作DOM，而没有使用Trusted Types API。你需要检查这些库的代码，确保它们不会引入XSS风险，或者使用Policy来包装它们的操作。
• 逐步迁移： 将现有的应用程序迁移到Trusted Types API可能需要大量的工作。建议采用逐步迁移的策略，先从最容易受到XSS攻击的地方开始，逐步扩大Trusted Types API的使用范围。

八、高级用法：Default Policy

除了可以创建多个命名的Policy之外，Trusted Types API还允许你设置一个Default Policy。Default Policy会在没有指定Policy的情况下使用。

// 创建一个默认策略
trustedTypes.setDefaultPolicy('default-policy', {
  createHTML: (input) => {
    // ... (安全检查和清理)
  },
  createScriptURL: (input) => {
    // ... (安全检查和清理)
  },
  createScript: (input) => {
    // ... (安全检查和清理)
  }
});

设置了Default Policy之后，如果没有指定Policy，浏览器就会使用Default Policy来创建Trusted Types实例。

九、Trusted Types的配置

Trusted Types 也可以通过HTTP Header配置，用来强制开启 Trusted Types。

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

这个配置的意思是，所有的script标签都必须使用Trusted Types，并且只允许使用名为my-policy的策略创建的Trusted Types。如果违反了这个规则，浏览器就会抛出一个错误。

十、 Trusted Types和Shadow DOM

Trusted Types和Shadow DOM可以一起使用，以进一步提高Web应用程序的安全性。Shadow DOM允许你将DOM树的一部分封装起来，使其与外部的DOM树隔离。这意味着，即使攻击者能够篡改外部的DOM树，他们也无法直接访问Shadow DOM中的内容。

结合Trusted Types，你可以确保只有经过“信任”的数据才能进入Shadow DOM，从而有效地防御XSS攻击。

十一、 Trusted Types的错误处理

在使用Trusted Types时，可能会遇到各种错误，例如：

• TypeError: 需要TrustedHTML类型
• SecurityError: 创建Trusted Types实例时违反了Policy规则

为了更好地处理这些错误，可以使用try…catch语句来捕获它们，并采取相应的措施。例如，可以记录错误信息，或者显示一个友好的错误提示给用户。

十二、一个更完整的例子

<!DOCTYPE html>
<html>
<head>
  <title>Trusted Types Example</title>
</head>
<body>
  <div id="output"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
  <script>
    if (window.trustedTypes && trustedTypes.createPolicy) {
      // 创建一个名为 "my-policy" 的策略
      const policy = trustedTypes.createPolicy('my-policy', {
        createHTML: (input) => {
          // 使用 DOMPurify 进行消毒
          const sanitizedHTML = DOMPurify.sanitize(input);
          return sanitizedHTML;
        },
        createScriptURL: (input) => {
          // 限制脚本URL的来源
          if (input.startsWith('https://example.com/scripts/')) {
            return input;
          } else {
            throw new Error('Invalid script URL');
          }
        },
        createScript: (input) => {
          // 限制脚本内容，例如只允许执行某些函数
          if (input.includes('safeFunction()')) {
            return input;
          } else {
            throw new Error('Invalid script content');
          }
        }
      });

      // 使用策略创建 TrustedHTML 对象
      const untrustedHTML = '<img src=x onerror=alert(1)>';
      const trustedHTML = policy.createHTML(untrustedHTML);

      // 使用 TrustedHTML 对象设置 innerHTML
      document.getElementById('output').innerHTML = trustedHTML; // 安全！

      // 使用策略创建 TrustedScriptURL 对象
      const safeScriptURL = 'https://example.com/scripts/safe.js';
      const trustedScriptURL = policy.createScriptURL(safeScriptURL);

      // 使用 TrustedScriptURL 对象设置 script 标签的 src 属性
      const script = document.createElement('script');
      script.src = trustedScriptURL; // 安全！
      document.head.appendChild(script);

      // 使用策略创建 TrustedScript 对象
      const safeScript = 'function safeFunction(){ alert("Safe Script"); } safeFunction();';
      const trustedScript = policy.createScript(safeScript);

      // 使用 TrustedScript 对象创建 script 标签
      const script2 = document.createElement('script');
      script2.text = trustedScript;
      document.head.appendChild(script2);

    } else {
      // 不支持 Trusted Types API，提供 Fallback 方案
      document.getElementById('output').innerHTML = "Your browser does not support Trusted Types API.  Please update to a modern browser.";
    }
  </script>

  <script src="https://example.com/scripts/safe.js"></script>
</body>
</html>

这个例子演示了如何使用Trusted Types API来防御DOM XSS攻击。它创建了一个名为my-policy的策略，并使用该策略来创建TrustedHTML、TrustedScriptURL和TrustedScript对象。然后，它使用这些对象来设置innerHTML属性和创建script标签，从而保证了数据的安全性。

总结

Trusted Types API 通过Policy机制，为防御DOM XSS攻击提供了一种全新的、更有效的方法。它强制开发者对容易引入XSS风险的DOM操作使用经过“信任”的数据类型，从而从根本上防止了XSS攻击的发生。虽然Trusted Types API的使用需要一定的学习成本，但为了Web应用程序的安全，这是值得的。记住，安全无小事，防患于未然！

好了，今天的讲座就到这里。希望大家都能掌握Trusted Types API的精髓，让自己的网页更加安全可靠！ 感谢各位的观看！