Next.js v14生产环境CSP配置问题：Nonce未生效致内联资源被拦截

你的核心问题是：中间件生成的nonce没有传递给Next.js的渲染流程，导致生产环境下框架自动生成的脚本、内联样式无法带上nonce，触发CSP报错。以下是无需添加'unsafe-inline'的解决方案：

1. 在根布局中注入Nonce到HTML标签 #

Next.js的根布局（app/layout.tsx）支持为<html>标签设置nonce属性，框架会自动为所有内置脚本、内联样式添加该nonce。你需要从请求头中获取中间件生成的nonce并传递：

import { headers } from 'next/headers'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '你的项目标题',
  description: '项目描述',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // 从中间件设置的请求头中获取nonce
  const nonce = headers().get('x-nonce')

  return (
    <html lang="zh-CN" nonce={nonce}>
      <body>{children}</body>
    </html>
  )
}

2. 确认中间件的Nonce传递逻辑 #

你的现有中间件代码已经正确生成nonce并设置x-nonce请求头、CSP头，但需要确保：

• 中间件文件（middleware.ts）位于项目根目录或src目录下，确保所有请求都经过中间件处理
• process.env.NODE_ENV在生产环境正确设置为production（Next.js构建后会自动设置）
• 不要缓存nonce值，你的代码中用crypto.randomUUID()生成新nonce的逻辑是正确的

3. 验证生产环境效果 #

构建并启动生产环境后，检查页面源码：

• <html>标签应带有nonce="xxx"属性，值与响应头Content-Security-Policy中的nonce一致
• Next.js生成的脚本标签（如<script src="/_next/static/..." nonce="xxx">）和内联样式应包含该nonce

额外优化：CSP规则调整 #

可以在script-src中保留'strict-dynamic'，它会允许由可信脚本（带nonce的脚本）加载的其他脚本，无需额外列出来源，进一步提升安全性。你的现有配置已经包含该规则，无需修改。

内容的提问来源于stack exchange，提问作者Kwekel