各位观众老爷，大家好！我是今天的主讲人，咱们今天聊点刺激的——JS CSP Level 3 的 strict-dynamic 和 trusted-types。这俩家伙听起来高大上，但其实就是为了更好地保护咱们的网页不被坏家伙们搞破坏。准备好了吗？咱们这就开始！
第一部分：CSP 基础回顾：别让你的网页裸奔！
在深入 strict-dynamic 和 trusted-types 之前，咱们先简单回顾一下 CSP（Content Security Policy）。你可以把它想象成你家的大门，有了它，你就可以控制哪些人可以进来，哪些人必须滚蛋。
CSP 本质上是一个 HTTP 响应头，告诉浏览器哪些资源可以加载，哪些不能加载。比如，你可以告诉浏览器只允许加载来自你自己的服务器的脚本，这样就能防止有人往你的网页里注入恶意脚本。
一个简单的 CSP 策略长这样：
Content-Security-Policy: default-src 'self'; script-src 'self'这行代码的意思是：
default-src 'self': 默认情况下，只允许加载来自同源的资源。script-src 'self': 只允许加载来自同源的脚本。
但是，传统的 CSP 策略有一个问题：它太严格了！很多时候，我们需要加载一些动态生成的脚本，比如用 JavaScript 动态创建的 <script> 标签。传统的 CSP 策略会阻止这些动态生成的脚本，因为它们没有明确地被列入白名单。这就很尴尬了。
第二部分：strict-dynamic：给动态脚本开个后门，但要小心！
strict-dynamic 就是为了解决这个问题而生的。它允许我们在某些情况下信任动态生成的脚本，而不需要把它们一个个都列入白名单。
strict-dynamic 的工作原理是这样的：
- 首先，你需要一个带有
nonce或hash的白名单脚本。这个脚本必须是静态的，也就是直接写在 HTML 里的。 - 然后，这个白名单脚本可以动态地创建和执行其他脚本。
strict-dynamic会信任这些由白名单脚本创建的脚本，即使它们没有明确地被列入白名单。
听起来有点绕，咱们来个例子：
<!DOCTYPE html>
<html>
<head>
<title>Strict Dynamic Example</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-r4nd0m'; require-trusted-types-for 'script'; trusted-types default;">
</head>
<body>
<script nonce="r4nd0m">
// 这个脚本是白名单脚本，因为它有 nonce
const script = document.createElement('script');
script.src = 'https://example.com/dynamic.js';
document.body.appendChild(script);
//或者：
// const scriptText = `alert('Hello from dynamic script!');`;
// const scriptElement = document.createElement('script');
// scriptElement.text = scriptText;
// document.body.appendChild(scriptElement);
</script>
</body>
</html>在这个例子中，我们给 <script> 标签添加了一个 nonce 属性。nonce 是一个随机字符串，必须和 CSP 策略中的 nonce 值一致。这样，浏览器就知道这个脚本是可信的。
CSP 策略长这样：
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-r4nd0m' 'strict-dynamic'; require-trusted-types-for 'script'; trusted-types default;解释一下：
default-src 'self': 默认情况下，只允许加载来自同源的资源。script-src 'self' 'nonce-r4nd0m' 'strict-dynamic': 允许加载来自同源的脚本，允许加载带有nonce-r4nd0m的脚本，并且启用strict-dynamic。require-trusted-types-for 'script'; trusted-types default;：需要trusted-types保护脚本注入，并使用默认策略。 我们稍后会详细讲解。
有了 strict-dynamic，浏览器就会信任 nonce 脚本创建的 https://example.com/dynamic.js 脚本，即使 dynamic.js 没有明确地被列入白名单。
strict-dynamic 的注意事项：
strict-dynamic必须和nonce或hash一起使用。 如果你只写了strict-dynamic，没有指定nonce或hash，那它就没有任何作用。strict-dynamic只信任由白名单脚本创建的脚本。 如果你直接在 HTML 里写了一个没有nonce或hash的<script>标签，strict-dynamic是不会信任它的。strict-dynamic可能会引入安全风险。 因为它允许白名单脚本创建任意脚本，所以如果你的白名单脚本被攻击者控制，那整个网站就完蛋了。
strict-dynamic 的优点：
- 简化 CSP 策略。 不需要把所有动态生成的脚本都列入白名单。
- 提高性能。 减少了浏览器检查 CSP 策略的次数。
strict-dynamic 的缺点：
- 增加了安全风险。 如果白名单脚本被攻击者控制，那整个网站就完蛋了。
- 配置复杂。 需要正确配置
nonce或hash，否则strict-dynamic就不会生效。
第三部分：trusted-types：给你的 DOM 操作上把锁！
trusted-types 是 CSP Level 3 中另一个重要的特性。它可以帮助你防止 DOM Based XSS 攻击。
DOM Based XSS 攻击是指攻击者通过修改 DOM 结构来注入恶意脚本。比如，攻击者可以修改 innerHTML 属性，插入一个 <script> 标签。
trusted-types 的工作原理是这样的：
- 首先，你需要定义一个或多个
trusted type policies。 - 然后，你只能使用这些
trusted type policies创建的值来设置某些 DOM 属性，比如innerHTML、src、href等。 - 如果尝试使用普通字符串来设置这些 DOM 属性，浏览器会报错。
这样，即使攻击者能够修改 DOM 结构，他们也无法注入恶意脚本，因为他们无法创建有效的 trusted type 值。
咱们来个例子：
<!DOCTYPE html>
<html>
<head>
<title>Trusted Types Example</title>
<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types default; default-src 'self'; script-src 'self';">
</head>
<body>
<div id="container"></div>
<script>
// 创建一个 trusted type policy
const policy = trustedTypes.createPolicy('my-policy', {
createHTML: (input) => {
// 在这里对输入进行安全检查
if (input.includes('<script>')) {
throw new Error('Invalid input: contains script tag');
}
return input;
},
createScriptURL: (input) => {
if (!input.startsWith('https://example.com/')) {
throw new Error('Invalid script URL');
}
return input;
}
});
const container = document.getElementById('container');
// 使用 trusted type policy 创建 HTML 内容
const safeHTML = policy.createHTML('<p>Hello, world!</p>');
// 设置 innerHTML 属性
container.innerHTML = safeHTML;
// 尝试使用普通字符串设置 innerHTML 属性 (会报错)
// container.innerHTML = '<p>Hello, world!</p><script>alert("XSS");</script>'; // This will throw an error
// 使用 trusted type policy 创建 script URL
const safeScriptURL = policy.createScriptURL('https://example.com/safe.js');
const scriptElement = document.createElement('script');
scriptElement.src = safeScriptURL;
document.body.appendChild(scriptElement);
// 尝试使用不安全的 URL (会报错)
// const unsafeScriptURL = 'http://example.com/unsafe.js'; // This will throw an error
// const scriptElement2 = document.createElement('script');
// scriptElement2.src = unsafeScriptURL;
// document.body.appendChild(scriptElement2);
</script>
</body>
</html>在这个例子中，我们定义了一个名为 my-policy 的 trusted type policy。这个 policy 有一个 createHTML 方法，用于创建安全的 HTML 内容。在 createHTML 方法中，我们对输入进行了安全检查，如果输入包含 <script> 标签，就抛出一个错误。
CSP 策略长这样：
Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default my-policy; default-src 'self'; script-src 'self';解释一下：
require-trusted-types-for 'script': 要求使用trusted types保护脚本注入。trusted-types default my-policy: 允许使用默认策略和my-policy策略。default-src 'self': 默认情况下，只允许加载来自同源的资源。script-src 'self': 只允许加载来自同源的脚本。
有了 trusted-types，我们就只能使用 my-policy.createHTML() 方法创建的值来设置 innerHTML 属性。如果尝试使用普通字符串来设置 innerHTML 属性，浏览器会报错。
trusted-types 的注意事项：
trusted-types需要浏览器支持。 目前，只有 Chrome 和 Edge 支持trusted-types。trusted-types可能会影响性能。 因为每次设置 DOM 属性之前都需要创建一个trusted type值。- 需要仔细设计
trusted type policies。 如果你的trusted type policies没有进行充分的安全检查，那trusted-types就没有任何作用。
trusted-types 的优点：
- 防止 DOM Based XSS 攻击。
- 提高代码安全性。
trusted-types 的缺点：
- 浏览器支持有限。
- 可能会影响性能。
- 配置复杂。
第四部分：strict-dynamic 和 trusted-types 的最佳实践
说了这么多，咱们来总结一下 strict-dynamic 和 trusted-types 的最佳实践：
- 尽可能使用
strict-dynamic和trusted-types。 这两个特性可以大大提高你的网站的安全性。 - 仔细设计
nonce和hash。 确保nonce是随机的，并且每次请求都不同。确保hash是正确的。 - 仔细设计
trusted type policies。 确保你的trusted type policies进行了充分的安全检查。 - 定期审查 CSP 策略。 确保你的 CSP 策略仍然有效，并且没有引入新的安全风险。
- 使用 CSP 报告功能。 启用 CSP 报告功能，可以让你知道哪些资源被阻止了，以及哪些攻击正在发生。
第五部分：代码示例：strict-dynamic 和 trusted-types 的结合使用
为了更好地理解 strict-dynamic 和 trusted-types 的作用，咱们来看一个结合使用这两个特性的例子：
<!DOCTYPE html>
<html>
<head>
<title>Strict Dynamic and Trusted Types Example</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-r4nd0m' 'strict-dynamic'; require-trusted-types-for 'script'; trusted-types default my-policy;">
</head>
<body>
<div id="container"></div>
<script nonce="r4nd0m">
// 创建一个 trusted type policy
const policy = trustedTypes.createPolicy('my-policy', {
createHTML: (input) => {
// 在这里对输入进行安全检查
if (input.includes('<script>')) {
throw new Error('Invalid input: contains script tag');
}
return input;
}
});
const container = document.getElementById('container');
// 使用 trusted type policy 创建 HTML 内容
const safeHTML = policy.createHTML('<p>Hello, world!</p>');
// 设置 innerHTML 属性
container.innerHTML = safeHTML;
// 动态创建脚本
const script = document.createElement('script');
script.src = 'https://example.com/dynamic.js';
document.body.appendChild(script);
</script>
</body>
</html>在这个例子中，我们同时使用了 strict-dynamic 和 trusted-types。strict-dynamic 允许我们动态创建 https://example.com/dynamic.js 脚本，而 trusted-types 保护我们免受 DOM Based XSS 攻击。
总结：
strict-dynamic 和 trusted-types 是 CSP Level 3 中两个非常重要的特性。它们可以帮助你提高网站的安全性，防止 XSS 攻击。但是，使用这两个特性也需要小心谨慎，否则可能会引入新的安全风险。
希望今天的讲座对你有所帮助！记住，安全无小事，保护好你的网站，别让坏家伙们得逞！
表格总结：
| 特性 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
strict-dynamic |
简化 CSP 策略，提高性能 | 增加安全风险，配置复杂 | 需要加载动态生成的脚本，但又不想把它们一个个都列入白名单 |
trusted-types |
防止 DOM Based XSS 攻击，提高代码安全性 | 浏览器支持有限，可能会影响性能，配置复杂 | 需要操作 DOM 结构，但又担心 DOM Based XSS 攻击 |
strict-dynamic + trusted-types |
结合两者的优点，既能简化 CSP 策略，又能防止 DOM Based XSS 攻击 | 结合两者的缺点，配置更加复杂，需要仔细设计 nonce、hash 和 trusted type policies |
需要加载动态生成的脚本，并且需要操作 DOM 结构，担心 DOM Based XSS 攻击 |