如何在 NextJS 中调试“内容安全策略（CSP）”和随机数

Question

我正在尝试在我的 NextJS 应用程序（应用程序路由器）中设置 CSP 标头。

我添加了“内容安全策略”安全标头，特别是“src-script”指令。但我收到一个错误，基本上是说有一些未知的脚本主机（除了列出的脚本主机之外）违反了此指令。 Chrome 没有帮助，因为它不知道哪个脚本违反了这一点。

问题

如何识别应用程序中的所有 src 脚本源，而无需仔细研究代码库？

vercel.json 片段：

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' *.posthog.com; style-src 'self';"
        }
      ]
    }
  ]
}

错误

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src”'self'https://.posthog.com”。*

Answer 1

好吧，我明白了。有几个问题。 SUPER 令人烦恼的是 nextjs 文档没有明确说明这些内容。

烦人的 nextjs 地雷 #1。一旦您设置了随机数，它们就会自动添加到您的下一个脚本中。

遵循 this doc 并添加 CSP 中间件后，不清楚该死的随机数是如何添加到 _next 脚本标签中的。答案：它们会自动添加！ （在开发中它只是说

<script nonce>

- 很难判断是否应用了随机数值）。

烦人的 nextjs 地雷#2。你必须把你的根

layout.tsx

变成

dynamic

。

感谢这个答案我能够回答这个问题。同样，NextJS 文档对此感到困惑。是的，我知道，它确实明确地说：

每次查看页面时，都应该生成一个新的随机数。这意味着您必须使用动态渲染来添加随机数。

但是作为一个不太熟悉 Nextjs 的人，如果这个例子能够清楚地说明这一点那就太好了。像“要使用动态渲染，请将其添加到根

layout.tsx

文件：

export const dynamic = "force-dynamic"

”

3.您的 CSP 内容需要根据您的开发/生产环境是动态的。

如果你在开发中，你需要它是

unsafe-eval

，否则它将无法在本地工作。这是我的 CSP 字符串：

const cspHeader =

default-src 'self'; connect-src 'self' some.domain.com another.domain.com *.example.com ${isDev ?

${process.env.NEXT_PUBLIC_API_URL}

: ''}; script-src 'self' 'nonce-${nonce}' 'strict-dynamic' ${isDev ? "'unsafe-eval'" : ''}; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data: maps.googleapis.com api.zoneomics.com; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests;

其中

NEXT_PUBLIC_API_URL

是 localhost:8000 或任何您的后端 URL。

4.每当您将新域集成到应用程序中时，您都需要将它们包含在

connect-src

指令中，而不是

script-src

中。这需要大量的实验，但我做到了。上面#3 为例。

其他有用的链接：这里