JS `Trusted Types` API (提案)：防范 DOM XSS 攻击

各位观众老爷们，大家好！今天咱们来聊聊一个听起来有点高大上，但其实能帮咱们有效防止 DOM XSS 攻击的 JavaScript API——Trusted Types。别怕，这玩意儿没想象中那么难，只要跟着我一步一步走，保证你也能把它玩得转。

啥是 DOM XSS？听起来像外星语？

在深入 Trusted Types 之前，咱们先得搞明白啥是 DOM XSS。简单来说，DOM XSS 是一种利用网页自身代码漏洞进行的跨站脚本攻击。想象一下，你打开一个网站，结果网站里的 JavaScript 偷偷摸摸地执行了一段恶意代码，窃取了你的 Cookie，或者跳转到了一个钓鱼网站。这就是 DOM XSS 的威力。

举个栗子：

<script>
  // 假设 url 中包含 ?name=<script>alert('XSS')</script>
  const name = new URLSearchParams(window.location.search).get('name');
  document.getElementById('greeting').innerHTML = 'Hello, ' + name;
</script>
<div id="greeting"></div>

在这个例子中，我们直接从 URL 参数中获取 name，然后把它插入到 greeting 这个 div 中。如果 name 中包含恶意代码，比如 <script>alert('XSS')</script>，那么这段代码就会被执行，造成 XSS 攻击。

为啥会有 DOM XSS？

DOM XSS 的根源在于我们对数据的信任不足。我们总是假设用户输入的数据是安全的，但实际上，攻击者可以利用各种手段来注入恶意代码。就像你以为你点的外卖是干净卫生的，结果厨师偷偷往里面吐了口痰一样。

Trusted Types：给数据穿上盔甲

Trusted Types 就像给数据穿上了一层盔甲，确保只有经过安全处理的数据才能被插入到 DOM 中。它通过限制某些危险的 DOM 操作，并强制开发者使用特定的类型来处理数据，从而有效地防止 DOM XSS 攻击。

Trusted Types 的核心概念

Trusted Types 引入了几个关键概念：

Trusted Types Policy： 这是一个策略，定义了如何创建 Trusted Types 对象。它可以限制哪些操作是允许的，哪些是不允许的。
Trusted Types 对象： 这些对象包含经过安全处理的数据。它们只能通过 Policy 来创建。常见的 Trusted Types 对象有：
- TrustedHTML: 代表经过安全处理的 HTML 片段。
- TrustedScriptURL: 代表经过安全处理的 URL，用于加载脚本。
- TrustedScript: 代表经过安全处理的 JavaScript 代码。
Sinks： 这些是 DOM 中容易受到 XSS 攻击的地方，比如 innerHTML、src、href 等。 Trusted Types 会对这些 sinks 进行限制，只允许插入 Trusted Types 对象。

启用 Trusted Types

要在你的网页中启用 Trusted Types，需要在 HTTP 响应头中设置 Content-Security-Policy (CSP) 指令：

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

require-trusted-types-for 'script'：这个指令告诉浏览器，对于所有的脚本，都需要使用 Trusted Types。如果你尝试将一个普通的字符串插入到 innerHTML 中，浏览器会报错。
trusted-types default：这个指令定义了一个默认的 Policy，允许你使用 trustedTypes.createPolicy() 创建 Policy。

创建一个 Policy

接下来，我们需要创建一个 Policy 来创建 Trusted Types 对象：

const policy = trustedTypes.createPolicy('myPolicy', {
  createHTML: (string) => {
    // 在这里对 HTML 进行安全处理，例如使用 DOMPurify
    const sanitizedHTML = DOMPurify.sanitize(string);
    return sanitizedHTML;
  },
  createScriptURL: (string) => {
    // 在这里对 URL 进行安全处理，例如验证 URL 的协议和域名
    if (string.startsWith('https://example.com/')) {
      return string;
    } else {
      throw new Error('Invalid script URL');
    }
  },
  createScript: (string) => {
    // 在这里对 JavaScript 代码进行安全处理，例如使用 AST 分析器
    // 注意：直接执行用户提供的 JavaScript 代码是非常危险的，应该尽量避免
    return string; // 这是一个简化示例，实际应用中需要更严格的安全处理
  }
});

在这个例子中，我们创建了一个名为 myPolicy 的 Policy，它定义了三个方法：

createHTML：用于创建 TrustedHTML 对象。我们使用 DOMPurify 对 HTML 进行安全处理，移除所有潜在的恶意代码。
createScriptURL：用于创建 TrustedScriptURL 对象。我们验证 URL 是否以 https://example.com/ 开头，只允许加载来自这个域名的脚本。
createScript：用于创建 TrustedScript 对象。这个例子中只是简单地返回了原始字符串，但在实际应用中，应该使用更严格的安全处理方法，比如使用 AST 分析器来检查 JavaScript 代码的安全性。强烈建议避免直接执行用户提供的 JavaScript 代码。

使用 Trusted Types 对象

现在，我们可以使用 Policy 来创建 Trusted Types 对象，并把它们插入到 DOM 中：

const untrustedHTML = '<img src="x" onerror="alert('XSS')">';
const trustedHTML = policy.createHTML(untrustedHTML);

document.getElementById('content').innerHTML = trustedHTML; // 安全！

在这个例子中，我们首先创建了一个包含恶意代码的 HTML 字符串 untrustedHTML。然后，我们使用 policy.createHTML() 方法创建了一个 TrustedHTML 对象 trustedHTML。最后，我们将 trustedHTML 插入到 content 这个 div 中。由于 trustedHTML 经过了安全处理，所以恶意代码不会被执行。

Trusted Types 的兼容性

Trusted Types 并不是所有浏览器都支持。你可以使用 trustedTypes 对象来检查浏览器是否支持 Trusted Types：

if (window.trustedTypes) {
  // 浏览器支持 Trusted Types
  console.log('Trusted Types is supported!');
} else {
  // 浏览器不支持 Trusted Types
  console.log('Trusted Types is not supported.');
}

对于不支持 Trusted Types 的浏览器，你可以使用 polyfill 来提供兼容性。

Trusted Types 的局限性

Trusted Types 并不是万能的。它只能防止 DOM XSS 攻击，而不能防止其他类型的 XSS 攻击，比如存储型 XSS 和反射型 XSS。此外，Trusted Types 的安全性取决于 Policy 的实现。如果 Policy 的实现存在漏洞，那么仍然可能造成 XSS 攻击。

Trusted Types 的最佳实践

使用专业的安全库： 在 Policy 中，使用专业的安全库来对数据进行安全处理，比如 DOMPurify、OWASP Java HTML Sanitizer 等。
最小化 Policy 的权限： 只允许 Policy 执行必要的操作。避免创建过于宽松的 Policy，以免造成安全风险。
定期审查 Policy 的代码： 定期审查 Policy 的代码，确保其安全性。
结合其他安全措施： Trusted Types 只是众多安全措施中的一种。应该结合其他安全措施，比如 CSP、X-XSS-Protection 等，来提高网站的安全性。

Trusted Types 的代码示例

下面是一些使用 Trusted Types 的代码示例：

示例 1：安全地设置 innerHTML

<div id="myDiv"></div>
<script>
  const policy = trustedTypes.createPolicy('myPolicy', {
    createHTML: (string) => DOMPurify.sanitize(string)
  });

  const untrustedHTML = '<img src="x" onerror="alert('XSS')">';
  const trustedHTML = policy.createHTML(untrustedHTML);

  document.getElementById('myDiv').innerHTML = trustedHTML;
</script>

示例 2：安全地设置 src 属性

<img id="myImage">
<script>
  const policy = trustedTypes.createPolicy('myPolicy', {
    createScriptURL: (string) => {
      if (string.startsWith('https://example.com/')) {
        return string;
      } else {
        throw new Error('Invalid script URL');
      }
    }
  });

  const untrustedURL = 'https://example.com/script.js';
  const trustedURL = policy.createScriptURL(untrustedURL);

  document.getElementById('myImage').src = trustedURL;
</script>

示例 3：安全地执行 JavaScript 代码 (不推荐，仅为示例)

<script>
  const policy = trustedTypes.createPolicy('myPolicy', {
    createScript: (string) => {
      // 强烈不推荐直接执行用户提供的 JavaScript 代码
      // 这里只是一个示例，实际应用中应该使用更严格的安全处理方法
      return string;
    }
  });

  const untrustedCode = 'alert("Hello, world!")';
  const trustedCode = policy.createScript(untrustedCode);

  // eval(trustedCode); // 不要这样做！
  // 更好的方法是使用 Function 构造函数
  const myFunction = new Function(trustedCode);
  myFunction();
</script>

Trusted Types 的实际应用场景

富文本编辑器： 富文本编辑器允许用户输入 HTML 代码，这很容易导致 XSS 攻击。使用 Trusted Types 可以确保只有经过安全处理的 HTML 代码才能被插入到 DOM 中。
模板引擎： 模板引擎允许开发者动态生成 HTML 代码。使用 Trusted Types 可以防止模板引擎中的 XSS 攻击。
第三方组件： 第三方组件可能包含漏洞，导致 XSS 攻击。使用 Trusted Types 可以限制第三方组件对 DOM 的访问，降低安全风险。

总结

Trusted Types 是一个强大的工具，可以帮助我们有效地防止 DOM XSS 攻击。但是，它并不是万能的，需要结合其他安全措施才能达到最佳的安全效果。记住，安全是一个持续的过程，需要我们不断学习和实践。

表格： Trusted Types 关键概念

概念	描述
Trusted Types Policy	定义了如何创建 Trusted Types 对象的策略。它可以限制哪些操作是允许的，哪些是不允许的。
TrustedHTML	代表经过安全处理的 HTML 片段。
TrustedScriptURL	代表经过安全处理的 URL，用于加载脚本。
TrustedScript	代表经过安全处理的 JavaScript 代码。 (强烈不推荐直接执行用户提供的 JavaScript 代码)
Sinks	DOM 中容易受到 XSS 攻击的地方，比如 `innerHTML`、`src`、`href` 等。 Trusted Types 会对这些 sinks 进行限制，只允许插入 Trusted Types 对象。

最后，给大家留个思考题：

如果你的项目中使用了大量的第三方库，并且你无法完全信任这些库的安全性，你应该如何使用 Trusted Types 来降低安全风险？

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎提问。拜拜！

发表回复 取消回复

发表回复取消回复