Trusted Types：阻止 DOM XSS 攻击的浏览器安全机制

好的，各位观众老爷，晚上好！我是你们的老朋友，人称“Bug终结者”的程序猿老王。今天咱们不聊代码优化，也不谈算法效率，咱们来聊点儿高大上的——Trusted Types，也就是“信任类型”。

各位可能要挠头了：“啥玩意儿？信任类型？听都没听过！” 别急，今天老王就用最接地气的方式，把这个听起来玄乎的概念给您掰开了、揉碎了，讲明白！

开场白：XSS，互联网的牛皮癣

在咱们开始之前，先给大家讲个故事。话说老王当年刚入行，也是个愣头青，写代码那叫一个风驰电掣，漏洞？不存在的！直到有一天，线上系统突然冒出来一堆奇奇怪怪的弹窗，用户投诉电话被打爆，老王这才意识到，大事不妙！

经过一番排查，老王发现罪魁祸首竟然是XSS攻击！简单来说，就是有人通过在网页上注入恶意代码，控制了用户的浏览器，盗取了用户的信息，甚至篡改了网页内容。

这XSS攻击，就像互联网的牛皮癣，防不胜防，让人头疼不已。它无处不在，悄无声息地潜伏在各种网页、论坛、博客中，等待着机会给你的系统来一记狠的。

什么是Trusted Types？信任你，才敢用你！

为了解决XSS这个大麻烦，浏览器厂商们也是绞尽脑汁，推出了各种安全措施。今天咱们要讲的Trusted Types，就是其中一种比较新的、也是相当给力的安全机制。

那么，Trusted Types到底是个什么东东呢？

老王给大家打个比方：假设你是一家餐厅的老板，每天都要从不同的供应商那里进货。有的供应商信誉良好，你用他们的食材放心；有的供应商来路不明，你对他们的食材心存疑虑。

Trusted Types就相当于给浏览器引入了一个“食材质量认证体系”。它规定，浏览器只能接受经过“认证”的、安全可靠的数据，才能用来修改DOM（Document Object Model，文档对象模型）。

简单来说，就是浏览器只“信任”经过特定处理的数据，才能用来渲染网页。未经处理的数据，一律视为“可疑分子”，直接拒绝使用。

Trusted Types的工作原理：黑名单 vs. 白名单

传统的XSS防御手段，大多采用“黑名单”策略。就是说，浏览器会维护一个“危险字符”的黑名单，一旦检测到用户输入包含这些字符，就进行过滤或转义。

这种方式就像警察叔叔抓小偷，只能根据已知的犯罪特征来识别罪犯，对于新型犯罪手段，往往防不胜防。

而Trusted Types则采用“白名单”策略。就是说，浏览器只信任经过特定处理的数据，其他一概不信任。这种方式就像给每个“食材”贴上“合格证”，只有拿到“合格证”的食材，才能进入厨房。

这种方式更加安全可靠，因为它可以有效地防止新型XSS攻击。

Trusted Types的核心概念：类型与策略

Trusted Types的核心在于两个概念：类型（Types）和策略（Policies）。

类型（Types）： 指的是经过安全处理后的数据类型。例如，TrustedHTML、TrustedScript、TrustedURL 等。这些类型的数据，都被认为是安全的，可以直接用来修改DOM。
策略（Policies）： 指的是创建 Trusted Types 实例的规则。策略定义了如何将普通字符串转换为 Trusted Types。策略需要开发者自己定义，并且需要严格审查，确保转换过程是安全的。

举个例子，假设我们要创建一个 TrustedHTML 类型的字符串，用来设置元素的 innerHTML 属性。我们首先需要定义一个策略：

// 创建一个名为 'my-policy' 的策略
const myPolicy = trustedTypes.createPolicy('my-policy', {
  createHTML: (input) => {
    // 在这里进行安全处理，例如：
    // 1. 对 HTML 字符串进行消毒
    // 2. 移除所有事件处理程序属性（例如：onclick、onload）
    // 3. ...
    const sanitizedHTML = sanitizeHTML(input); // 假设 sanitizeHTML 是一个安全消毒函数
    return sanitizedHTML;
  }
});

然后，我们可以使用这个策略来创建 TrustedHTML 类型的字符串：

const userInput = '<img src="x" onerror="alert('XSS')">'; // 用户输入
const trustedHTML = myPolicy.createHTML(userInput); // 使用策略创建 TrustedHTML

// 将 TrustedHTML 设置给元素的 innerHTML 属性
document.getElementById('my-element').innerHTML = trustedHTML;

在这个例子中，myPolicy.createHTML() 函数会对用户输入进行安全处理，确保生成的 HTML 字符串是安全的。浏览器会检查 trustedHTML 的类型，确认它是 TrustedHTML 类型，才会允许将其设置给元素的 innerHTML 属性。

Trusted Types的优势：

更强的安全性： 采用白名单策略，可以有效地防止新型XSS攻击。
更易于维护： 将安全处理逻辑集中在策略中，方便管理和维护。
更好的可追溯性： 可以追踪 Trusted Types 实例的来源，方便排查问题。
明确的安全边界： 明确定义了哪些数据是安全的，哪些数据是不安全的。

Trusted Types的劣势：

学习成本较高： 需要学习新的 API 和概念，有一定的学习成本。
兼容性问题： 目前只有 Chrome 和 Edge 等少数浏览器支持 Trusted Types。
需要修改现有代码： 需要修改现有的代码，将普通字符串转换为 Trusted Types。
性能影响： 创建和使用 Trusted Types 实例可能会带来一定的性能开销。

Trusted Types的应用场景：

Trusted Types 适用于以下场景：

处理用户输入： 例如，处理用户在表单中输入的数据、处理用户上传的文件。
动态生成 HTML： 例如，使用模板引擎生成 HTML 代码、使用 JavaScript 动态创建 DOM 元素。
加载外部资源： 例如，加载外部的 JavaScript 文件、加载外部的 CSS 文件。

Trusted Types的实战演练：

接下来，老王给大家演示一个简单的 Trusted Types 实战案例。

假设我们有一个简单的网页，允许用户输入 HTML 代码，并将其显示在页面上。

<!DOCTYPE html>
<html>
<head>
  <title>Trusted Types Demo</title>
</head>
<body>
  <h1>Trusted Types Demo</h1>
  <input type="text" id="user-input">
  <button id="submit-button">Submit</button>
  <div id="output"></div>

  <script>
    const userInput = document.getElementById('user-input');
    const submitButton = document.getElementById('submit-button');
    const output = document.getElementById('output');

    submitButton.addEventListener('click', () => {
      const html = userInput.value;
      output.innerHTML = html; // 存在 XSS 风险！
    });
  </script>
</body>
</html>

在这个例子中，我们将用户输入的 HTML 代码直接设置给 output 元素的 innerHTML 属性，存在 XSS 风险。

现在，我们使用 Trusted Types 来解决这个问题：

<!DOCTYPE html>
<html>
<head>
  <title>Trusted Types Demo</title>
</head>
<body>
  <h1>Trusted Types Demo</h1>
  <input type="text" id="user-input">
  <button id="submit-button">Submit</button>
  <div id="output"></div>

  <script>
    // 创建一个名为 'my-policy' 的策略
    const myPolicy = trustedTypes.createPolicy('my-policy', {
      createHTML: (input) => {
        // 对 HTML 字符串进行消毒
        const sanitizedHTML = DOMPurify.sanitize(input); // 使用 DOMPurify 进行消毒
        return sanitizedHTML;
      }
    });

    const userInput = document.getElementById('user-input');
    const submitButton = document.getElementById('submit-button');
    const output = document.getElementById('output');

    submitButton.addEventListener('click', () => {
      const html = userInput.value;
      const trustedHTML = myPolicy.createHTML(html); // 使用策略创建 TrustedHTML
      output.innerHTML = trustedHTML; // 安全！
    });
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
</body>
</html>

在这个例子中，我们首先创建了一个名为 my-policy 的策略，该策略使用 DOMPurify 对用户输入的 HTML 字符串进行消毒。然后，我们使用这个策略来创建 TrustedHTML 类型的字符串，并将其设置给 output 元素的 innerHTML 属性。

这样，就可以有效地防止 XSS 攻击。

Trusted Types的未来：

Trusted Types 是一项非常有前景的安全技术，它可以有效地防止 XSS 攻击。随着浏览器厂商对 Trusted Types 的支持越来越好，相信它会在未来的 Web 开发中发挥越来越重要的作用。

总结：

今天，老王给大家介绍了 Trusted Types，一种用于防止 DOM XSS 攻击的浏览器安全机制。Trusted Types 通过引入类型和策略的概念，将安全处理逻辑集中在策略中，可以有效地防止新型 XSS 攻击。

虽然 Trusted Types 还有一些缺点，例如学习成本较高、兼容性问题等，但它仍然是一项非常有前景的安全技术，值得我们学习和关注。

希望今天的分享对大家有所帮助！如果您觉得老王讲得还不错，记得点赞、评论、转发哦！

最后的彩蛋：

为了方便大家学习和使用 Trusted Types，老王给大家推荐一些有用的资源：

好了，各位观众老爷，咱们下期再见！祝大家代码无 Bug，生活更美好！ 🚀🎉

发表回复 取消回复

发表回复取消回复