Has anyone figured out how to naviagate nonces with Content Security policies? I have an error where the nonce is generated in middleware.tsx for a next.js 14 app router app, and the nonces to the subcomponents are the same, but I can't seem to figure out how to fix this error where it's saying the nonce didn't match between server and client. Any ideas/help would be greatly appreciated!
#Issue with nonces & Content Security Policy -Warning: Prop `nonce` did not match. Server: "" Client:
candid cypress
verbal leafBOT
Hi @candid cypress. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, you can read the nonce from a Server Component using headers. Here is an example of how you can do this:
import { headers } from 'next/headers'
import Script from 'next/script'
export default function Page() {
const nonce = headers().get('x-nonce')
return (
<Script
src="<https://www.googletagmanager.com/gtag/js">
strategy="afterInteractive"
nonce={nonce}
/>
)
}
(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#reading-the-nonce))
However, there have been issues reported where nonces are not applied correctly in certain cases. For example, one issue reported that nonces are not applied to script tags that import Next.js components when using the pages router (Github Issue (https://github.com/vercel/next.js/issues/61694)).
It's recommended to use v13.4.20+ of Next.js to properly handle and apply nonces (Next.js Docs (https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#version-history)).
If you're still facing issues, it might be helpful to check the Next.js Github Issues (https://github.com/vercel/next.js/issues) for similar problems or the Next.js Discussion (https://github.com/vercel/next.js/discussions/54907) mentioned in one of the comments on a related issue (Github Issue Comment (https://github.com/vercel/next.js/issues/21925)).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
candid cypress
@verbal leaf
i am using app router, next 14, and nonces do work but the specific error is this:
app-index.js:35 Warning: Prop `nonce` did not match. Server: "" Client: "MzU0YTcwNzYtNTE0Ny00NzYyLWFmZmEtMDJiMmFlNTNhNmFk"
at script
at head
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:115:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:162:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:542:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)