各位观众，晚上好！欢迎来到“前端安全夜话”。今天，咱们要聊的是一个能从根儿上解决 DOM XSS 问题的“秘密武器”—— Trusted Types API。
（清清嗓子，推了推并不存在的眼镜）
XSS (Cross-Site Scripting) 攻击，尤其是 DOM XSS，一直是前端安全的噩梦。想象一下，你的网站就像一个精装修的房子，结果来了个熊孩子，用你家的颜料到处乱涂乱画，还在墙上挖洞，塞进一些乱七八糟的东西，这就很让人头疼。而 DOM XSS 就是这个熊孩子，它利用你网站的 JavaScript 代码漏洞，往 DOM 里面注入恶意代码，搞破坏。
那传统的 XSS 防御手段，比如转义、过滤，就像给房子装防盗门、防盗窗，试图拦住这个熊孩子。但熊孩子总能找到新的漏洞，比如翻墙、挖地道。而且，防盗门装多了，进出也麻烦，影响用户体验。
所以，我们需要更彻底的解决方案，最好能让熊孩子根本没机会乱涂乱画。这就是 Trusted Types API 登场的原因。它就像给房子重新装修，用的都是经过认证的安全材料，熊孩子就算想搞破坏，也没东西可用。
什么是 Trusted Types？
简单来说，Trusted Types 就是一种类型系统，用来标记哪些字符串是“可信”的。只有被标记为“可信”的字符串，才能被安全地传递给特定的 DOM 操作，比如 innerHTML、src、href 等等。
如果试图把一个未经处理的字符串，直接赋值给这些 DOM 属性，浏览器就会报错，阻止这次操作。这就相当于给这些危险的 DOM 操作，加了一道强制的类型检查。
Trusted Types 的工作原理
Trusted Types 的核心概念是：
- Trusted Types Policy (策略)： 定义哪些字符串可以被认为是“可信”的，以及如何创建这些“可信”的字符串。你可以把 Policy 想象成一个工厂，专门生产“可信”的字符串。
- Trusted Types 对象 (TrustedHTML, TrustedScript, TrustedScriptURL)： Policy 工厂生产出来的产品，代表不同类型的“可信”字符串。
TrustedHTML用于 HTML 片段，TrustedScript用于 JavaScript 代码，TrustedScriptURL用于 URL。 - Sink (接收器)： 指的是那些容易引起 XSS 漏洞的 DOM 操作，比如
innerHTML、src、href等。Trusted Types 会对这些 Sink 进行保护，只允许接收 Trusted Types 对象。
Trusted Types 的具体实现
接下来，我们用一些代码示例来具体说明 Trusted Types 的用法。
1. 创建 Trusted Types Policy
首先，我们需要创建一个 Trusted Types Policy，来定义如何创建“可信”的字符串。
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.myPolicy = trustedTypes.createPolicy('myPolicy', {
createHTML: (string) => {
// 在这里对字符串进行安全处理，比如转义、过滤
const sanitizedString = DOMPurify.sanitize(string); // 使用 DOMPurify 进行安全处理
return sanitizedString;
},
createScriptURL: (string) => {
// 验证 URL 是否安全
if (string.startsWith('https://example.com/')) {
return string;
}
throw new Error('Invalid script URL');
},
createScript: (string) => {
// 对脚本进行处理，确保安全
if (string.includes('unsafeCode')) {
throw new Error('Unsafe script code');
}
return string;
}
});
}这段代码做了什么？
if (window.trustedTypes && window.trustedTypes.createPolicy)： 首先检查浏览器是否支持 Trusted Types API。如果不支持，就跳过创建 Policy 的步骤。trustedTypes.createPolicy('myPolicy', ...)： 创建一个名为myPolicy的 Trusted Types Policy。这个名字可以随便起，但最好能反映 Policy 的用途。createHTML: (string) => { ... }： 定义一个createHTML函数，用于创建TrustedHTML对象。在这个函数里，我们需要对传入的字符串进行安全处理，比如使用 DOMPurify 这样的库进行转义、过滤。createScriptURL: (string) => { ... }： 定义一个createScriptURL函数，用于创建TrustedScriptURL对象。在这个函数里，我们需要验证 URL 是否安全，比如只允许加载来自特定域名的脚本。createScript: (string) => { ... }： 定义一个createScript函数，用于创建TrustedScript对象。在这个函数里，我们需要验证脚本内容是否安全。
注意： createHTML、createScriptURL、createScript 函数是可选的，根据你的需求来定义。
2. 使用 Trusted Types 对象
有了 Trusted Types Policy 之后，我们就可以使用它来创建 Trusted Types 对象了。
const untrustedHTML = '<img src=x onerror=alert(1)>'; // 这是一个不安全的 HTML 片段
const trustedHTML = myPolicy.createHTML(untrustedHTML); // 使用 Policy 创建 TrustedHTML 对象
document.getElementById('myDiv').innerHTML = trustedHTML; // 将 TrustedHTML 对象赋值给 innerHTML这段代码做了什么？
const untrustedHTML = '<img src=x onerror=alert(1)>';： 定义一个不安全的 HTML 片段，包含 XSS 漏洞。const trustedHTML = myPolicy.createHTML(untrustedHTML);： 使用myPolicy的createHTML函数，对untrustedHTML进行安全处理，并创建一个TrustedHTML对象。document.getElementById('myDiv').innerHTML = trustedHTML;： 将TrustedHTML对象赋值给innerHTML。由于innerHTML只能接收TrustedHTML对象，所以浏览器会认为这次操作是安全的。
如果直接将 untrustedHTML 赋值给 innerHTML，会发生什么？
如果 Trusted Types 处于启用状态，浏览器会报错，阻止这次操作。这就能有效防止 XSS 攻击。
document.getElementById('myDiv').innerHTML = untrustedHTML; // 浏览器会报错！3. 处理外部数据
实际应用中，我们经常需要处理来自外部的数据，比如用户输入、API 返回的数据。这些数据往往是不安全的，需要进行特殊处理。
// 假设从 API 获取到一个 HTML 片段
const apiData = '<p>Hello, <b>world</b>!</p><img src=x onerror=alert(1)/>';
// 使用 Policy 创建 TrustedHTML 对象
const trustedHTML = myPolicy.createHTML(apiData);
// 将 TrustedHTML 对象赋值给 innerHTML
document.getElementById('myDiv').innerHTML = trustedHTML;在这个例子中，我们从 API 获取到一个 HTML 片段，然后使用 myPolicy 的 createHTML 函数对其进行安全处理，再赋值给 innerHTML。这样就能有效防止来自 API 的 XSS 攻击。
Trusted Types 的优势
- 从源头防御 XSS： Trusted Types 强制要求所有进入 Sink 的数据都是经过安全处理的，从根儿上解决了 XSS 问题。
- 减少漏洞： Trusted Types 减少了手动进行转义、过滤的需求，降低了开发人员犯错的可能性。
- 提高代码可维护性： Trusted Types 将安全处理逻辑集中在 Policy 中，使代码更加清晰、易于维护。
Trusted Types 的不足
- 需要改造现有代码： 要使用 Trusted Types，需要对现有代码进行改造，将不安全的字符串替换为 Trusted Types 对象。
- 学习成本： Trusted Types 引入了新的概念和 API，需要一定的学习成本。
- 兼容性： 并非所有浏览器都支持 Trusted Types API。
Trusted Types 的兼容性
截至目前，Trusted Types API 的兼容性还不是很好。主流浏览器中，Chrome 和 Edge 已经支持 Trusted Types，Firefox 和 Safari 还在开发中。
为了解决兼容性问题，可以使用 Polyfill，比如 Google 提供的 trusted-types-polyfill。
如何启用 Trusted Types
要启用 Trusted Types，需要在 HTTP 响应头中添加 Content-Security-Policy (CSP) 指令。
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy这个 CSP 指令做了什么？
require-trusted-types-for 'script'： 强制要求所有 JavaScript 代码都必须使用 Trusted Types。trusted-types myPolicy： 允许使用名为myPolicy的 Trusted Types Policy。
Trusted Types 的最佳实践
- 尽早采用 Trusted Types： 越早采用 Trusted Types，就能越早发现和修复 XSS 漏洞。
- 仔细设计 Trusted Types Policy： Trusted Types Policy 是安全的核心，要仔细设计，确保所有进入 Sink 的数据都是经过安全处理的。
- 使用成熟的安全库： 在 Trusted Types Policy 中，可以使用成熟的安全库，比如 DOMPurify，来简化安全处理过程。
- 逐步迁移： 如果你的网站代码量很大，可以逐步迁移到 Trusted Types，先保护最容易受到 XSS 攻击的 Sink，再逐步扩大范围。
- 监控和日志： 启用 Trusted Types 后，要监控浏览器的报错信息，及时发现和解决问题。
Trusted Types 的一些常见问题
-
Trusted Types 会影响性能吗？
Trusted Types 本身不会对性能产生太大的影响。但如果在 Trusted Types Policy 中进行复杂的安全处理，可能会影响性能。因此，要尽量优化安全处理逻辑。
-
Trusted Types 可以完全防止 XSS 攻击吗？
Trusted Types 可以大大降低 XSS 攻击的风险，但不能完全防止。如果 Trusted Types Policy 设计不当，或者存在其他漏洞，仍然可能发生 XSS 攻击。因此，要结合其他安全措施，比如输入验证、输出编码，来提高网站的安全性。
-
Trusted Types 和 Content Security Policy (CSP) 有什么区别？
Trusted Types 和 CSP 都是用于提高网站安全性的技术，但它们的侧重点不同。Trusted Types 侧重于从源头防御 XSS 攻击，CSP 侧重于限制浏览器可以加载的资源，防止恶意代码注入。Trusted Types 可以和 CSP 结合使用，进一步提高网站的安全性。
Trusted Types 的未来
Trusted Types API 还在不断发展中，未来可能会有更多的功能和改进。随着浏览器厂商对 Trusted Types 的支持力度越来越大，Trusted Types 将成为前端安全的重要组成部分。
总结
Trusted Types API 是一种很有前景的前端安全技术，可以从源头防御 DOM XSS 攻击。虽然目前 Trusted Types 的兼容性还不是很好，需要对现有代码进行改造，但随着浏览器厂商的支持力度越来越大，Trusted Types 将成为前端安全的标配。
希望今天的讲解能帮助大家更好地理解 Trusted Types API。记住，安全无小事，我们要时刻保持警惕，才能保护我们的网站和用户免受 XSS 攻击。
好，今天的“前端安全夜话”就到这里。感谢大家的观看！