我试图在我的 NextJS 应用程序中阻止不受信任的脚本标记。
我添加了"内容安全策略"安全标头，特别是"src-script"指令。但是我收到了一个错误，基本上是说有一些未知的脚本主机（除了列出的那些）违反了该指令。Chrome 浏览器并没有提供帮助，因为它不知道是哪个脚本违反了这一指令。
Problem
如何在不翻阅代码库的情况下识别应用程序中的所有 src 脚本源？
vercel.json 代码段：
{
"headers"：[
{
"source": "/(.*)"、
"headers"：[
{
"key": "Content-Security-Policy"、
"value": "default-src 'self'; script-src 'self' *.posthog.com; style-src 'self';"；
}
]
}
]
}
错误
错误
Error
拒绝执行内联脚本，因为它违反了以下内容安全策略指令："script-src" 'self' https://
.posthog.com".*
遇到的问题是的内容安全策略 (CSP) 太过严格，导致合法的内联脚本被阻止。正在看到一个错误信息，表明某些内联脚本正在被阻止，因为它们不符合的 CSP 'script-src' 指令。
虽然建议不要使用内联脚本以获得最佳安全性，但如果必须使用它们，则有几种方法可以在的 CSP 中允许它们：
1. 使用哈希值:
- 对内联脚本的内容进行哈希处理，并在的 CSP 'script-src' 指令中包含该哈希值。这将允许浏览器执行具有匹配哈希值的特定内联脚本。
-
例如，如果的内联脚本的哈希值为 "sha256-someHashValue"，的 CSP 将如下所示：
script-src 'self' *.posthog.com 'sha256-someHashValue'; -
注意: 每次更改内联脚本时，都需要更新哈希值。
2. 使用随机数 (Nonce):
- 生成一个加密安全的随机数，并将其添加到的 CSP 'script-src' 指令和内联脚本标签中。
-
例如：
html <script nonce="yourNonceValue"> // 的内联脚本代码 </script>script-src 'self' *.posthog.com 'nonce-yourNonceValue'; -
注意: 每次页面加载时，都需要生成一个新的随机数。
3. 识别和外部化:
- 最安全的长期解决方案是识别所有内联脚本，并将它们移至外部文件。然后，可以将这些文件的来源包含在的 CSP 'script-src' 指令中。
要识别违反当前 CSP 的脚本，可以使用浏览器的开发者工具：
- 在 Chrome 中打开开发者工具 (F12)。
- 转到“控制台”选项卡。
- 加载的网页并查看任何与 CSP 相关的错误。
- 错误消息应指示被阻止的脚本及其来源。
记住，调整的 CSP 策略是一个迭代过程。从一个严格的策略开始，并在识别和解决违规行为时逐渐放宽它，这一点很重要。