JS `Trusted Types` API (提案) 在前端防范 `DOM XSS`

各位前端的英雄们，大家好！我是你们的老朋友，今天咱来聊聊一个听起来高大上，但实际上能拯救我们于XSS水火之中的神器：Trusted Types。

引子：XSS，前端的阿喀琉斯之踵

XSS (Cross-Site Scripting)，跨站脚本攻击，一直是前端安全领域的心头大患。想象一下，黑客通过在你家网站上偷偷塞点恶意代码，就能为所欲为，盗取用户cookie、篡改页面内容、甚至控制用户电脑，是不是想想都后背发凉？

传统的XSS防御手段，比如转义特殊字符、使用CSP (Content Security Policy)等等，虽然能起到一定的作用，但总感觉有点像“亡羊补牢”，防不胜防。因为浏览器本身对字符串的处理太过于“信任”了，只要是字符串，它就觉得可以往DOM里塞，往eval()里跑。

Trusted Types：釜底抽薪，从根源上解决问题

Trusted Types，翻译过来就是“可信类型”，它的核心思想是：与其事后补救，不如从源头开始，让浏览器只接受经过严格验证的数据。简单来说，就是给浏览器装上一个“安全阀”，只有符合特定规则的数据才能被用来操作DOM。

这就像我们平时做饭，食材必须是新鲜的、安全的，才能下锅。Trusted Types 就是前端安全的“食材安全认证”，确保进入DOM操作的数据都是经过“安全认证”的。

Trusted Types 的基本原理

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

创建 Policy (策略)： 首先，我们需要定义一个或多个 Policy，规定哪些类型的数据可以被信任，以及如何对这些数据进行处理。Policy 就像一个“过滤器”，只有符合规则的数据才能通过。
对数据进行“安全转换”： 当我们需要将字符串插入DOM时，不能直接使用，而是需要通过 Policy 对其进行“安全转换”。这个转换过程可能包括转义、编码、或者进行更复杂的处理。
浏览器强制执行： 开启 Trusted Types 后，浏览器会严格检查所有DOM操作，如果发现使用了未经 Policy 处理的字符串，就会报错，阻止操作的执行。

Trusted Types 的核心概念

Trusted Types： 代表经过 Policy 处理后的数据，浏览器认为这些数据是安全的，可以直接用于DOM操作。
Policy： 定义了如何创建 Trusted Types，以及如何对数据进行安全转换的规则。
Sink： 指的是那些容易受到XSS攻击的DOM操作，比如 innerHTML、src、eval() 等。

实战演练：Trusted Types 的使用方法

说了这么多理论，不如来点实际的。我们通过一些例子来演示 Trusted Types 的使用方法。

1. 开启 Trusted Types

开启 Trusted Types 的方式主要有两种：

HTTP Header： 在 HTTP 响应头中添加 Content-Security-Policy: require-trusted-types-for 'script';。这样，整个页面都会强制执行 Trusted Types。
Meta 标签： 在 HTML 文档的 <head> 中添加 <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">。

2. 创建 Policy

// 创建一个名为 'default' 的 Policy
const policy = trustedTypes.createPolicy('default', {
  createHTML: (string) => {
    // 对字符串进行安全转义，这里使用 DOMPurify 库
    return DOMPurify.sanitize(string);
  },
  createScriptURL: (string) => {
    // 检查 URL 是否在白名单中
    if (string.startsWith('https://example.com/')) {
      return string;
    }
    throw new Error('Untrusted URL: ' + string);
  },
  createScript: (string) => {
     // 严格禁止执行任何字符串形式的script
     throw new Error('Direct script execution is forbidden');
  }
});

上面的代码创建了一个名为 default 的 Policy，它定义了三个函数：

createHTML()：用于创建 TrustedHTML 类型的数据，它使用 DOMPurify 库对字符串进行安全转义，防止XSS攻击。
createScriptURL()：用于创建 TrustedScriptURL 类型的数据，它检查 URL 是否在白名单中，只有在白名单中的URL才能被信任。
createScript(): 严格禁止执行任何字符串形式的script, 强制开发者使用更加安全的事件绑定等方式。

3. 使用 Policy 创建 Trusted Types

// 使用 Policy 创建 TrustedHTML
const untrustedString = '<img src=x onerror=alert(1)>';
const trustedHTML = policy.createHTML(untrustedString);

// 将 TrustedHTML 插入到 DOM 中
document.getElementById('container').innerHTML = trustedHTML;

// 使用 Policy 创建 TrustedScriptURL
const untrustedURL = 'https://example.com/script.js';
const trustedURL = policy.createScriptURL(untrustedURL);

// 创建一个 script 标签
const script = document.createElement('script');
script.src = trustedURL;
document.body.appendChild(script);

//尝试执行一段字符串形式的script
try {
  const untrustedScript = 'alert("hello")';
  const trustedScript = policy.createScript(untrustedScript);
} catch (error) {
  console.error(error); // 输出错误信息
}

上面的代码演示了如何使用 Policy 创建 TrustedHTML 和 TrustedScriptURL，并将它们插入到DOM中。

4. 处理 Trusted Types 违规

当浏览器检测到使用了未经 Policy 处理的字符串时，会触发一个 securitypolicyviolation 事件。我们可以监听这个事件，并进行相应的处理。

document.addEventListener('securitypolicyviolation', (event) => {
  console.error('Trusted Types violation:', event);
  // 可以将错误信息发送到服务器，进行日志记录
});

Trusted Types 的优势与局限性

优势：

从源头解决问题： Trusted Types 强制开发者使用经过安全验证的数据，从根本上杜绝了XSS攻击的可能性。
易于维护： Policy 定义了统一的安全规则，方便开发者进行维护和管理。
提高安全性： Trusted Types 可以与其他安全措施 (如 CSP) 结合使用，进一步提高应用程序的安全性。

局限性：

学习成本： 开发者需要学习 Trusted Types 的相关知识，并对现有代码进行修改。
兼容性问题： Trusted Types 并非所有浏览器都支持，需要进行兼容性处理。
性能影响： Policy 的安全转换过程可能会带来一定的性能开销。

Trusted Types 的应用场景

Trusted Types 可以应用于各种需要处理用户输入或外部数据的场景，例如：

富文本编辑器： 对用户输入的HTML进行安全转义，防止XSS攻击。
模板引擎： 对模板中的变量进行安全编码，防止XSS攻击。
URL处理： 对URL进行验证，防止URL跳转攻击。
动态加载脚本： 对加载的脚本进行验证，防止恶意脚本注入。

Trusted Types 与 DOMPurify 的关系

DOMPurify 是一个用于清理 HTML 的库，它可以移除 HTML 中的恶意代码，防止XSS攻击。Trusted Types 可以与 DOMPurify 结合使用，提高安全性。

在上面的例子中，我们使用 DOMPurify 对用户输入的HTML进行安全转义，并将转义后的HTML作为 TrustedHTML 插入到DOM中。

Trusted Types 的最佳实践

制定完善的 Policy： Policy 是 Trusted Types 的核心，需要根据应用程序的实际需求制定完善的 Policy。
对所有用户输入进行验证： 对所有用户输入进行验证，确保输入的数据符合 Policy 的要求。
与其他安全措施结合使用： Trusted Types 可以与其他安全措施 (如 CSP) 结合使用，进一步提高应用程序的安全性。
持续关注 Trusted Types 的发展： Trusted Types 还在不断发展中，需要持续关注其发展，及时更新 Policy。

Trusted Types 的浏览器支持情况

浏览器	支持情况
Chrome	支持
Edge	支持
Firefox	不支持
Safari	不支持

Trusted Types 的未来展望

Trusted Types 作为一种新型的安全机制，正在逐渐被越来越多的开发者所接受。随着浏览器厂商对 Trusted Types 的支持力度不断加大，相信它将在未来成为前端安全领域的重要组成部分。

总结：拥抱 Trusted Types，共筑安全前端

Trusted Types 是一种强大的前端安全工具，它可以帮助我们从源头解决XSS攻击问题。虽然 Trusted Types 的学习成本较高，但它所带来的安全收益是巨大的。让我们一起拥抱 Trusted Types，共筑安全的前端世界！

代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Trusted Types Example</title>
  <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types default;">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
</head>
<body>
  <h1>Trusted Types Example</h1>
  <div id="container"></div>

  <script>
    // 创建一个名为 'default' 的 Policy
    const policy = trustedTypes.createPolicy('default', {
      createHTML: (string) => {
        // 对字符串进行安全转义，这里使用 DOMPurify 库
        return DOMPurify.sanitize(string);
      },
      createScriptURL: (string) => {
        // 检查 URL 是否在白名单中
        if (string.startsWith('https://example.com/')) {
          return string;
        }
        throw new Error('Untrusted URL: ' + string);
      },
      createScript: (string) => {
         // 严格禁止执行任何字符串形式的script
         throw new Error('Direct script execution is forbidden');
      }
    });

    // 使用 Policy 创建 TrustedHTML
    const untrustedString = '<img src=x onerror=alert(1)>';
    const trustedHTML = policy.createHTML(untrustedString);

    // 将 TrustedHTML 插入到 DOM 中
    document.getElementById('container').innerHTML = trustedHTML;

    // 使用 Policy 创建 TrustedScriptURL
    const untrustedURL = 'https://example.com/script.js';
    try {
      const trustedURL = policy.createScriptURL(untrustedURL);

      // 创建一个 script 标签
      const script = document.createElement('script');
      script.src = trustedURL;
      document.body.appendChild(script);
    } catch (error){
        console.error(error);
    }

    //尝试执行一段字符串形式的script
    try {
      const untrustedScript = 'alert("hello")';
      const trustedScript = policy.createScript(untrustedScript);
    } catch (error) {
      console.error(error); // 输出错误信息
    }

    document.addEventListener('securitypolicyviolation', (event) => {
      console.error('Trusted Types violation:', event);
      // 可以将错误信息发送到服务器，进行日志记录
    });
  </script>
</body>
</html>

希望今天的分享对大家有所帮助！记住，安全无小事，让我们一起努力，打造更安全的前端世界！

发表回复 取消回复

发表回复取消回复