各位朋友，大家好！我是你们的老朋友，今天咱们来聊聊前端安全里的一个重要话题：Trusted Types API，以及它如何配合CSP来对抗DOM XSS。这玩意儿听起来有点学术，但实际上用起来挺实在的，能有效降低XSS攻击的风险。咱们争取用大白话把这个东西讲明白，让大家都能听懂，都能用得上。
XSS 的那些事儿：为啥要用 Trusted Types？
首先，咱们得知道XSS是啥。简单来说，就是黑客往你的网站里注入恶意代码，然后你的用户一不小心就执行了这些代码，导致信息泄露、账号被盗等等。XSS有很多种，其中DOM XSS是一种比较隐蔽的类型。
DOM XSS的特点是，恶意代码不直接出现在服务器返回的HTML里，而是通过修改页面的DOM结构来执行。比如，攻击者可以通过修改URL的hash值，然后在JavaScript代码里读取这个hash值，并将其插入到DOM中。如果这个hash值包含恶意代码，那就会被执行。
举个例子，假设我们有这么一段代码：
<div id="output"></div>
<script>
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = location.hash.substring(1); // 非常危险！
</script>这段代码直接把URL的hash值（去掉#号）插入到outputDiv里。如果攻击者把URL改成http://example.com/#<img src=x onerror=alert('XSS!')>，那这段代码就会执行alert('XSS!')，弹出警告框。
这种情况下，传统的XSS防御手段，比如过滤服务器返回的HTML，就没用了。因为恶意代码根本就没经过服务器，而是直接在客户端发生的。
这就是Trusted Types要解决的问题。它通过控制JavaScript代码如何操作DOM，来防止恶意代码注入。
Trusted Types：给DOM操作加个“白名单”
Trusted Types API的核心思想是：默认情况下，禁止JavaScript代码直接修改某些DOM属性，必须使用经过“信任”的值才能修改。
你可以把Trusted Types想象成一个给DOM操作加了“白名单”的机制。只有符合白名单规则的值，才能被用来修改DOM。
Trusted Types主要涉及三个概念：
- Policies（策略）： 定义哪些值是“信任”的，以及如何创建这些“信任”的值。
- Trusted Types： 代表一个“信任”的值，比如
TrustedHTML、TrustedScript、TrustedScriptURL。 - Sinks（接收器）： 指那些容易受到XSS攻击的DOM属性，比如
innerHTML、src、href等。
默认情况下，如果你直接使用字符串来修改这些Sinks，浏览器会报错。你必须先使用Policy创建一个Trusted Type对象，然后才能用这个对象来修改Sinks。
创建 Policy：定义信任规则
要使用Trusted Types，首先要创建一个Policy。Policy定义了哪些字符串可以被认为是“信任”的，以及如何将字符串转换成Trusted Type对象。
你可以使用trustedTypes.createPolicy()方法来创建Policy。
const myPolicy = trustedTypes.createPolicy('myPolicy', {
createHTML: (string) => {
// 在这里进行安全检查和转换
// 例如，你可以使用 DOMPurify 来清理 HTML
const cleanHTML = DOMPurify.sanitize(string);
return cleanHTML; // 返回一个 TrustedHTML 对象
},
createScriptURL: (string) => {
// 在这里进行安全检查和转换
// 例如，你可以验证 URL 是否在白名单中
if (string.startsWith('https://example.com/scripts/')) {
return string; // 返回一个 TrustedScriptURL 对象
} else {
throw new Error('Invalid script URL');
}
},
createScript: (string) => {
// 对脚本内容进行安全检查
if (string.includes("evil")) {
throw new Error("Dangerous script content!");
}
return string; // 返回一个 TrustedScript 对象
}
});这个例子创建了一个名为myPolicy的Policy。它定义了三个方法：
createHTML()：用于创建TrustedHTML对象。你需要在这个方法里对HTML字符串进行安全检查和清理，比如使用DOMPurify。createScriptURL()：用于创建TrustedScriptURL对象。你需要在这个方法里验证URL是否合法，比如判断URL是否在白名单中。createScript(): 用于创建TrustedScript对象。你需要在这个方法里对脚本内容进行安全检查，例如禁止使用eval或者其他危险的函数。
使用 Trusted Types：安全地修改DOM
创建Policy之后，你就可以使用它来创建Trusted Type对象，并用这些对象来修改DOM了。
const outputDiv = document.getElementById('output');
// 使用 myPolicy 创建 TrustedHTML 对象
const trustedHTML = myPolicy.createHTML('<p>Hello, world!</p><script>alert("safe!")</script>');
// 安全地修改 innerHTML
outputDiv.innerHTML = trustedHTML;
// 创建一个不可信的字符串
const untrustedString = '<img src=x onerror=alert("XSS!")>';
try {
// 尝试直接使用不可信的字符串修改 innerHTML，这将会报错
outputDiv.innerHTML = untrustedString;
} catch (error) {
console.error('Trusted Types error:', error);
}在这个例子中，我们使用myPolicy.createHTML()方法创建了一个TrustedHTML对象，然后用这个对象来修改outputDiv.innerHTML。因为trustedHTML对象是通过Policy创建的，所以浏览器认为它是“信任”的，允许修改DOM。
如果我们尝试直接使用一个不可信的字符串来修改outputDiv.innerHTML，浏览器会抛出一个错误，阻止这次操作。
CSP：强制使用 Trusted Types
光有Trusted Types API还不够，我们需要使用CSP（Content Security Policy）来强制浏览器启用Trusted Types，并禁止使用不安全的DOM操作。
CSP是一种安全策略，允许你控制浏览器可以加载哪些资源，以及可以执行哪些操作。你可以通过设置HTTP响应头或者在HTML中使用<meta>标签来设置CSP。
要强制使用Trusted Types，你需要在CSP中添加require-trusted-types-for 'script'指令。
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types myPolicy;这条CSP指令的含义是：
require-trusted-types-for 'script'：强制页面上的所有脚本都必须使用Trusted Types API来修改DOM。trusted-types myPolicy：允许使用名为myPolicy的Policy来创建Trusted Type对象。如果你有多个Policy，可以用空格分隔，比如trusted-types myPolicy1 myPolicy2。如果你想要允许所有Policy，可以使用trusted-types *，但这通常不推荐，因为它会降低安全性。
一个强制使用 Trusted Types 的 CSP 示例
下面是一个更完整的CSP示例，它不仅强制使用Trusted Types，还限制了其他一些不安全的操作。
Content-Security-Policy:
default-src 'none';
script-src 'self' https://example.com/scripts/ 'nonce-{RANDOM_NONCE}';
style-src 'self' https://example.com/styles/ 'unsafe-inline';
img-src 'self' data:;
font-src 'self' https://example.com/fonts/;
connect-src 'self' https://api.example.com/;
media-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'none';
upgrade-insecure-requests;
block-all-mixed-content;
require-trusted-types-for 'script';
trusted-types myPolicy;这个CSP指令的含义是：
default-src 'none'：默认情况下，禁止加载任何资源。script-src 'self' https://example.com/scripts/ 'nonce-{RANDOM_NONCE}'：允许加载来自同源的脚本，以及来自https://example.com/scripts/的脚本。nonce-{RANDOM_NONCE}允许加载带有特定nonce值的内联脚本。每次页面加载时，都需要生成一个新的nonce值。style-src 'self' https://example.com/styles/ 'unsafe-inline'：允许加载来自同源的样式表，以及来自https://example.com/styles/的样式表。'unsafe-inline'允许使用内联样式，但通常不推荐，因为它会降低安全性。img-src 'self' data:：允许加载来自同源的图片，以及使用data URI的图片。font-src 'self' https://example.com/fonts/：允许加载来自同源的字体，以及来自https://example.com/fonts/的字体。connect-src 'self' https://api.example.com/：允许连接到同源的API，以及https://api.example.com/。media-src 'self'：允许加载来自同源的媒体文件。object-src 'none'：禁止加载任何插件（比如Flash）。base-uri 'self'：限制base标签只能指向同源的URL。form-action 'self'：限制表单只能提交到同源的URL。frame-ancestors 'none'：禁止页面被嵌入到任何其他网站的<iframe>中。upgrade-insecure-requests：自动将所有HTTP请求升级为HTTPS请求。block-all-mixed-content：禁止加载任何HTTP资源，如果页面是通过HTTPS加载的。require-trusted-types-for 'script'：强制页面上的所有脚本都必须使用Trusted Types API来修改DOM。trusted-types myPolicy：允许使用名为myPolicy的Policy来创建Trusted Type对象。
Trusted Types 的优势和局限性
Trusted Types API可以有效地防御DOM XSS攻击，它有以下几个优点：
- 默认安全： 默认情况下，禁止使用不安全的DOM操作，必须使用经过“信任”的值才能修改DOM。
- 细粒度控制： 可以通过Policy来定义哪些值是“信任”的，以及如何创建这些“信任”的值。
- 兼容性好： 现代浏览器都支持Trusted Types API。
但是，Trusted Types API也有一些局限性：
- 需要修改代码： 需要修改现有的JavaScript代码，使用Policy来创建Trusted Type对象。
- 学习成本： 需要学习Trusted Types API的使用方法。
- 不能完全消除XSS风险： Trusted Types API只能防御DOM XSS攻击，不能防御所有类型的XSS攻击。
Trusted Types，CSP，以及其他安全措施：一个完整的防御体系
Trusted Types和CSP是防御XSS攻击的两个重要工具，但它们并不是万能的。要建立一个完整的防御体系，还需要结合其他安全措施，比如：
- 输入验证： 对用户输入进行验证，防止恶意代码注入。
- 输出编码： 对输出到页面的数据进行编码，防止恶意代码执行。
- 使用安全的框架和库： 使用经过安全审计的框架和库，避免使用存在安全漏洞的组件。
- 定期安全审计： 定期对网站进行安全审计，发现并修复安全漏洞。
一些常见问题和解答
-
问：Trusted Types会影响性能吗？
答：Trusted Types会增加一些额外的开销，但通常来说，这种开销是可以忽略不计的。而且，Trusted Types可以减少XSS攻击的风险，从长远来看，可以提高网站的性能和安全性。
-
问：我需要修改所有的JavaScript代码吗？
答：不需要。你只需要修改那些直接修改DOM的代码。对于那些不修改DOM的代码，你可以不用修改。
-
问：我可以使用第三方库来清理HTML吗？
答：可以。你可以使用DOMPurify等第三方库来清理HTML。这些库可以帮助你过滤掉恶意代码，并生成安全的HTML。
-
问：我应该如何处理 legacy 代码？
答：对于 legacy 代码，你可以逐步迁移到 Trusted Types。你可以先启用 Trusted Types，然后逐步修改代码，直到所有的代码都符合 Trusted Types 的要求。在这个过程中，你可以使用
trustedTypes.defaultPolicy来创建一个宽松的 Policy，允许所有的字符串都被认为是“信任”的。但是，这会降低安全性，所以你应该尽快迁移到更严格的 Policy。
总结
Trusted Types API是一种有效的防御DOM XSS攻击的工具。通过控制JavaScript代码如何操作DOM，它可以防止恶意代码注入。要使用Trusted Types，你需要创建一个Policy，定义哪些值是“信任”的，然后使用这个Policy来创建Trusted Type对象，并用这些对象来修改DOM。最后，你需要使用CSP来强制浏览器启用Trusted Types，并禁止使用不安全的DOM操作。
希望今天的讲解能帮助大家更好地理解Trusted Types API，并将其应用到实际项目中，提高网站的安全性。记住，安全无小事，我们需要时刻保持警惕，才能保护我们的用户免受XSS攻击的侵害。
感谢大家的聆听！