JS `Trusted Types` API (提案)：防范 DOM XSS 的终极武器

各位靓仔靓女，大家好！我是你们今天的 JS Trusted Types 讲师，江湖人称“代码界的段子手”，今天咱们就来聊聊这个听起来高大上，实际上能拯救你头发的“Trusted Types”。

开场白：DOM XSS，程序员的噩梦

话说这年头，Web 安全越来越重要，而 DOM XSS 就像隐藏在暗处的刺客，防不胜防。你辛辛苦苦写的代码，可能因为一个小小的疏忽，就被黑客利用，篡改你的页面，窃取用户数据，甚至控制整个网站。想想都让人头皮发麻！

那么，什么是 DOM XSS 呢？简单来说，就是恶意代码通过修改页面的 DOM 结构来达到攻击的目的。

举个栗子：

<script>
  // 从 URL 获取参数
  const params = new URLSearchParams(window.location.search);
  const message = params.get('message');

  // 将参数内容插入到页面中
  document.getElementById('message').innerHTML = message;
</script>

<div id="message"></div>

如果 URL 是 example.com/?message=<img src=x onerror=alert('XSS!')>，那么这段代码就会执行 alert('XSS!')，这就是一个典型的 DOM XSS 漏洞。

Trusted Types：给数据穿上盔甲

为了解决 DOM XSS 问题，W3C 的大佬们提出了 Trusted Types API。它的核心思想是：对数据进行类型检查，只有经过安全处理的数据才能被用于修改 DOM。 简单来说，就是给数据穿上一层盔甲，防止恶意代码注入。

Trusted Types 的工作原理

Trusted Types API 主要包含以下几个核心概念：

Trusted Type Policies（信任类型策略）： 定义了一组规则，用于创建和处理 Trusted Types。你可以理解为安全策略的“工厂”。
Trusted Types（信任类型）： 经过安全处理的数据，拥有特定的类型，例如 TrustedHTML、TrustedScript、TrustedScriptURL 和 TrustedURL。
Sinks（接收器）： DOM 中容易受到 XSS 攻击的属性或方法，例如 innerHTML、src、href 等。

Trusted Types 的工作流程大致如下：

浏览器强制执行 Trusted Types 策略。
当你尝试使用一个字符串直接修改 DOM 中的 Sinks 时，浏览器会抛出一个错误。
你需要使用 Trusted Type Policies 创建一个 Trusted Type，并将需要插入的数据进行安全处理。
将 Trusted Type 赋值给 Sinks，浏览器允许修改 DOM。

Trusted Types API 的使用

接下来，我们就通过几个例子来演示 Trusted Types API 的使用。

1. 创建 Trusted Type Policies

首先，我们需要创建一个 Trusted Type Policies。

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  window.myPolicy = window.trustedTypes.createPolicy('myPolicy', {
    createHTML: (string) => {
      // 在这里进行安全处理，例如 HTML 编码
      return string.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    },
    createScriptURL: (string) => {
      // 在这里进行安全处理，例如 URL 白名单验证
      if (string.startsWith('https://example.com/')) {
        return string;
      }
      throw new Error('Invalid script URL');
    },
    createScript: (string) => {
      // 在这里进行安全处理，例如代码静态分析
      // 谨慎使用 createScript，尽可能避免执行动态脚本
      return string;
    },
    createURL: (string) => {
      // 在这里进行安全处理，例如 URL 白名单验证
      if (string.startsWith('https://example.com/')) {
        return string;
      }
      throw new Error('Invalid URL');
    }
  });
}

这段代码创建了一个名为 myPolicy 的 Trusted Type Policies，其中定义了四个方法：

createHTML: 用于创建 TrustedHTML 类型的数据。
createScriptURL: 用于创建 TrustedScriptURL 类型的数据。
createScript: 用于创建 TrustedScript 类型的数据。
createURL: 用于创建 TrustedURL 类型的数据。

在这些方法中，你需要进行安全处理，例如 HTML 编码、URL 白名单验证等，以确保数据是安全的。

2. 使用 Trusted Type Policies 创建 Trusted Types

有了 Trusted Type Policies，我们就可以创建 Trusted Types 了。

// 获取 URL 参数
const params = new URLSearchParams(window.location.search);
const message = params.get('message');

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  // 使用 myPolicy 创建 TrustedHTML
  const trustedHTML = window.myPolicy.createHTML(message);

  // 将 TrustedHTML 赋值给 innerHTML
  document.getElementById('message').innerHTML = trustedHTML;
} else {
  // 如果浏览器不支持 Trusted Types，则进行 HTML 编码
  document.getElementById('message').innerHTML = message.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

这段代码首先从 URL 获取参数 message，然后使用 myPolicy.createHTML 方法创建一个 TrustedHTML 类型的对象，最后将 TrustedHTML 对象赋值给 innerHTML 属性。

如果浏览器不支持 Trusted Types，则进行 HTML 编码，以防止 XSS 攻击。

3. 使用 Trusted Types 保护 Script URL

假设我们需要动态加载一个 JavaScript 文件。

// 获取 URL 参数
const scriptURL = new URLSearchParams(window.location.search).get('scriptURL');

if (window.trustedTypes && window.trustedTypes.createPolicy) {
  // 使用 myPolicy 创建 TrustedScriptURL
  try {
    const trustedScriptURL = window.myPolicy.createScriptURL(scriptURL);

    // 创建 script 标签
    const script = document.createElement('script');
    script.src = trustedScriptURL;
    document.body.appendChild(script);
  } catch (error) {
    console.error('Invalid script URL:', error);
  }
} else {
  // 如果浏览器不支持 Trusted Types，则进行 URL 白名单验证
  if (scriptURL.startsWith('https://example.com/')) {
    const script = document.createElement('script');
    script.src = scriptURL;
    document.body.appendChild(script);
  } else {
    console.error('Invalid script URL');
  }
}

这段代码首先从 URL 获取参数 scriptURL，然后使用 myPolicy.createScriptURL 方法创建一个 TrustedScriptURL 类型的对象，最后将 TrustedScriptURL 对象赋值给 script.src 属性。

如果浏览器不支持 Trusted Types，则进行 URL 白名单验证，以防止加载恶意脚本。

4. 禁用 Trusted Types

有时候，你可能需要在某些情况下禁用 Trusted Types。你可以通过设置 HTTP Header Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy 来实现。

如果设置为 Content-Security-Policy: require-trusted-types-for 'script';，则表示强制执行 Trusted Types，所有修改 DOM 的操作都必须使用 Trusted Types。

如果设置为 Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy，则表示只允许使用 myPolicy 创建的 Trusted Types。

Trusted Types 的兼容性

目前，Trusted Types 的兼容性还不是很好，只有 Chrome 和 Edge 浏览器完全支持。但是，你可以使用 polyfill 来提供兼容性。

<script src="https://unpkg.com/trusted-types/dist/trusted-types.global.js"></script>

Trusted Types 的优缺点

优点：

有效防止 DOM XSS 攻击： 通过类型检查，可以有效防止恶意代码注入。
提高代码安全性： 强制开发者对数据进行安全处理，提高代码的安全性。
易于维护： 通过 Trusted Type Policies，可以集中管理安全策略，易于维护。

缺点：

兼容性问题： 目前只有 Chrome 和 Edge 浏览器完全支持。
学习成本： 需要学习新的 API 和概念。
可能引入新的错误： 如果安全策略配置不当，可能会引入新的错误。

Trusted Types 的最佳实践

尽可能使用 Trusted Types： 只要有可能，就应该使用 Trusted Types 来保护你的代码。
定义清晰的安全策略： Trusted Type Policies 应该定义清晰的安全策略，确保数据经过充分的安全处理。
谨慎使用 createScript： 尽可能避免执行动态脚本，如果必须使用，则需要进行代码静态分析。
使用 polyfill 提供兼容性： 使用 polyfill 来提供对旧浏览器的兼容性。
定期审查安全策略： 定期审查安全策略，确保其仍然有效。

Trusted Types 与其他安全措施

Trusted Types 并不是万能的，它只能防止 DOM XSS 攻击。为了提高 Web 应用的安全性，还需要结合其他安全措施，例如：

Content Security Policy (CSP)： 限制浏览器可以加载的资源，例如脚本、样式表、图片等。
HTTP Strict Transport Security (HSTS)： 强制浏览器使用 HTTPS 连接。
Cross-Site Request Forgery (CSRF) Protection： 防止跨站请求伪造攻击。
输入验证： 对用户输入进行验证，防止恶意数据注入。
输出编码： 对输出数据进行编码，防止 XSS 攻击。

案例分析：使用 Trusted Types 保护 React 应用

React 默认情况下已经对 HTML 进行了编码，可以防止 XSS 攻击。但是，如果你的应用需要动态生成 HTML，例如使用 dangerouslySetInnerHTML 属性，那么就需要使用 Trusted Types 来保护你的代码。

import React from 'react';

function MyComponent(props) {
  const { message } = props;

  let trustedHTML;
  if (window.trustedTypes && window.trustedTypes.createPolicy) {
    trustedHTML = window.myPolicy.createHTML(message);
  } else {
    trustedHTML = { __html: message.replace(/</g, '&lt;').replace(/>/g, '&gt;') };
  }

  return (
    <div dangerouslySetInnerHTML={trustedHTML} />
  );
}

export default MyComponent;

这段代码使用 dangerouslySetInnerHTML 属性来动态生成 HTML，并使用 Trusted Types 来保护代码。

总结：Trusted Types，安全之路，任重道远

Trusted Types 是一个很有前景的 Web 安全技术，它可以有效防止 DOM XSS 攻击，提高代码的安全性。虽然目前 Trusted Types 的兼容性还不是很好，但是随着浏览器的不断更新，相信它会越来越普及。

作为一名合格的程序员，我们应该积极学习和使用 Trusted Types，为 Web 安全贡献一份力量。

Q & A 环节

现在，是大家提问的环节了。有什么问题，尽管问，我会尽力解答。别客气，大胆提问，毕竟“有问题，找谷哥”。

结束语

感谢大家的聆听，希望今天的讲座对大家有所帮助。记住，代码安全无小事，让我们一起努力，打造更安全的 Web 应用！

最后，祝大家 Bug 越来越少，头发越来越多！

发表回复 取消回复

发表回复取消回复