Using nonces with Next.js

[leerob]

After digging through many different issues and discussions, I've made a new page in the documentation (PR) specifically for Content Security Policy and nonces. This docs page:

• Explains how to generate a nonce with Middleware
• Shows how to consume the nonce in a route with headers()
• Shows a complete CSP without needing to use any unsafe
• Shows how to ignore the nonce Middleware from running on prefetches / static assets

Further, we've patched some bugs and made improvements to nonce handling in Next.js that will be available in the latest canary version (for those of you time traveling from the future, upgrade to Next.js 13.5). We also updated the with-strict-csp example in the examples/ folder, which is backlinked from the new documentation page.

This discussion is for following up on the latest nonce updates and CSP documentation to continue the discussion, and combining many separate discussions into here.

Related

• Add security headers by default (with ability to override or disable) #23993
• Next.js 13 Client Static rendering with CSP #44907
• appDir: Inline Scripts (self.__next_f...) #43710
• Strict CSP implementation #41473
• Passing 'nonce' to Head tag generate noscript tag with nonce value accessible by JavaScript, Is that security risk? #49220
• How do I add the nonce attribute to a dynamically inserted script? #50653
• Inability to proper use "nonce" value for generated _document.tsx/js using <NextScript/> component as _document is generated only at build time. #48743
• Allow a safer Content Security Policy when using Server Components #51039
• Content Security Policy in app directory with preventing inline scripts #49348
• Next JS Content Security Policy (CSP) #31402
• Next.js 13: How to pass nonce as prop so that initial scripts receive it? #49648
• strict-dynamic CSP support for hybrid Next.js apps #34582
• No nonce on script element in body added by Next chunk preloading? #28658
• Opportunity to opt-out of static 404 prerendering #24065
• Nonce or hash for inline styles (for Content-Security-Policy) #18451
• adding a nonce to remove unsafe-inline from content-security-policy via HTTP header and not meta tag #32870
• Adding nonce to prefetch links #36460
• Sending props from Document to App component (_app) in Next.js #24134
• Setting CSP with Material-UI (SSR) and Nginx #20716
• Strict CSP does not work with styles #46857
• CSP Nonce attribute not added to all script tags #4591
• how to apply strict csp with the same nonce in next.confg, custom _document and custom _app #32395
• 2 cases where nonce isn't applied for Content-Security-Policy #21925
• Generate random nonce one every HTTP page load #21587

[leerob]

Known open issues: #49830

[NashJames]

Hi @leerob!

I decided to add a CSP to my playground project just this week so I appreciate the timely update to the docs!

The policy blocked multiple components and reported quite a few errors to the browser console which I tried to find a solution for with nonces. Unfortunately, I haven't had much success. I'm wondering if I've misunderstood something in my implementation? It's all contained within the additional 3 commits on this branch if you want to take a look.

A couple extra bits I noticed while working on it that might be helpful feedback:

• headers().get('x-nonce') would be slightly improved if it could return types of string | undefined. Since this is both the expected type for the nonce attribute, and can be passed through our own components as an optional paramater like nonce?: string instead of nonce: string | null (without additional handling).
• Since headers().get('x-nonce') requires a server component, is there a good way to prevent prop drilling for client components that I'm unaware of? I didn't find any library capable of setting state on the server which could be accessed on the client?
• Is there a more detailed example than with-strict-csp since it covers only a very specific use-case? Implementing it on vercel/commerce could be really useful as a guideline

Also, #45184 is another relevant issue I believe which could potentially be closed by this?

Thanks for working on this!

[leerob]

The policy blocked multiple components and reported quite a few errors to the browser console which I tried to find a solution for with nonces.

Could you share more here please? 🙏

[NashJames]

Yeah no problem. I have 18 errors and 1 warning overall, many of which are duplicates. Here is a list of all the unique ones:

Warnings:
Content-Security-Policy: Ignoring “'self'” within script-src: ‘strict-dynamic’ specified

Errors:
Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("style-src"). Source: color:transparent
Content-Security-Policy: The page's settings blocked the loading of a resource at inline ("style-src"). Source: cursor:text
Content-Security-Policy: The page's settings blocked the loading of a resource at eval ("script-src").

Uncaught EvalError: call to eval() blocked by CSP
    NextJS 7

They all originate from various places as far as I can tell. Some from Next/Image, some from NextUI <Button>, and some from React Codemirror. The CodeMirror even completely refuses to render with this CSP, which I believe is responsible for some of the background image styling looking broken.

It's a fairly small project so should be very quick to clone and launch if you want to poke around.

[jdckl]

Having similar issues as well, especially Uncaught EvalError: call to eval() blocked by CSP (ultimately turning on nonce based CSP now breaks the app), and also experiencing this #55129

[leerob]

For the Next.js specific ones, could you open a new issue with a reproduction showing the specific Next.js component causing the issue?

You can start from this template: https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp

[miklosz]

Hi! Two questions in the topic on using CSP with nonce before I submit any new issues

1. What's the status of this Strict CSP does not work with styles #46857 ?
   Just tried latest canary, nonce is not added to style tags in head

<head>
--
<!-- Externally referenced stylesheets without nonce -->
<link rel="stylesheet" href="/_next/static/css/92d39fd43dcaded7.css" data-precedence="next">
<link rel="stylesheet" href="/_next/static/css/7470a64f5349776c.css" data-precedence="next">
<!-- Nonced externally referenced script -->
<script src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js" nomodule="" nonce=""></script>
...

2. Apparently when CSP header is added alongside with nonce but it's not used in component Next doesn't add nonce value to scripts in head.

I've added middleware as in docs, following layout code works as expected (nonce's are added):

const RootLayout: FC<{
    children: ReactNode
}> = ({ children }) => {
    const nonce  = headers().get('csp-nonce');
    return (
        <html lang="en">
            <body>
                <div className="app-route-layout">
                    {children}
                    <p>Nonce value: {nonce}</p>
                </div>
            </body>
        </html>
    )
}

However when I remove the displaying of nonce (hence - nonce is not "consumed" in component) nonce value is no longer added to script tag. Why is that?

const RootLayout: FC<{
    children: ReactNode
}> = ({ children }) => {
    return (
        <html lang="en">
            <body>
                <div className="app-route-layout">
                    {children}
                </div>
            </body>
        </html>
    )
}

[leerob]

Can you reproduce from this example? https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp

[miklosz]

Here you go - based on the mentioned example I've added 2 pages showing those 2 mentioned problems:
https://github.com/miklosz/next-csp-example
Rendering both of the pages results in CSP errors, problem as described above

[MichaelCastelbuono]

I've run into this same issue using 13.5.4 and can confirm that adding the nonce to my layout fixes the problem. In other words, everything works fine on dev, but the nonce does not get added to scripts for a production build unless I use this workaround..

[wwt-jordan-lev]

@leerob Appreciate the new documentation page, however this only addresses server components (not client components). Many of the "Related" issues in the big list above are about problems with getting CSP nonces to work in client components, but you seem to have blanket replied and closed all of them with the link to the docs that only addresses the server component solutions. Hoping those issues can be re-opened... as it stands now it seems there is no way to have an effective CSP (that avoids using unsafe-inline) when any inline script or style tags are used in client components?

[AntonioNarraOfficial]

Ran into this issue on a project I'm currently working on. I'm using App Router, and my page.tsx was initially a client component, but I refactored it to become a server component with child client components. This fixed my issue with NextJS in-lined styles/scripts. Currently using middleware with nonces and added the following constant to my layout.tsx file export const dynamic = "force-dynamic";

[nescafeD]

Hey @AntonioNarraOfficial I am facing a similar issue I have added the export const dynamic = "force-dynamic" ; in the layout.tsx file and moved the {children} to be used in a seperate client component still when I am trying to get the nonce value from headers I have set in middleware. first my layout.tsx is being rendered then the middleware is setting the nonce value . Moreover its not getting added in any style or script . Would love your feedback on this

[sleepdotexe]

Thanks for the updates and new documentation! The support for nonces looks like it will greatly improve my ability to implement a strict CSP.

However, I've upgraded to 13.5 (and tried on canary) and I can't seem to get the nonce value to be added to any script tags. This even happens with a clean install of the with-strict-csp example. nonce as a property is being added, but the value is always empty. I've described the issue in more detail here: #55638

[dstroot]

Are you "building" then running, or just using "run dev"? Try "run dev".

[sleepdotexe]

Sorry, since my previous comment I discovered new information – I discussed it in a bit more detail over at #55638 .

Essentially gotcha number 1 is that Chrome devtools hides the nonce value, unless you look at the "properties" panel for the script. So for inline scripts, the nonce is working correctly (even though it looks like the value is blank). However, next/script components using afterInteractive are still causing errors still as they appear to be added to the DOM and evaluated before the nonce is added, and then hydrated with the nonce value later.

Additionally, there appears to be issues with using the edge runtime and deploying to vercel where the nonce still doesn't get added at all.

And finally, at the least, the with-strict-csp example probably needs to be updated so that the CSP allows unsafe-eval in the dev environment to faciliate Next's dev features like hot refresh. Otherwise, the example currently can't be cloned & run in development mode without additional debugging and configuration.

[w33ts]

I'm having this same issue. We're deploying our site on Cloudflare's edge network and everything is working, except for a few images using next/image with a custom Cloudflare loader. Full disclosure, I haven't read this completely, but I wonder if this might be a workaround.
https://levelup.gitconnected.com/nonce-based-csp-with-aws-cloudfront-ae5a6752b9b0

[josh-atkins]

Does anyone know if there is an up-to-date way to include a nonce with hot reload/hot module replacement? I'm reluctant to add unsafe-inline because it will mask any other issues that might occur, and I can't test for CSP style-src errors in Cypress so that rules out unsafe-inline pretty definitively. The next best case is to develop with HMR and then trigger a full reload every so often to remove the inline style errors - would be great to remove this step.

[tszhong0411]

I tried the latest version 13.5 with the example with-strict-csp. After building the app, I ran pnpm start, and it's still not working.

[Zerebokep]

same here

[Alex-ensuria]

hey,
are u trying to call headers().get("x-nonce"); somewhere?

[blakeplumb]

I had to add export const dynamic = "force-dynamic"; to the root layout to get it to build without errors.

[dstroot]

@leerob Hi Lee - in theory I should be able to use "create-next-app" and scaffold a brand new app, then apply your middleware example for a CSP, and everything should "just work". However if I do exactly that I get the errors that @tszhong0411 shows above.

Your example seems to work for adding third-party scripts but doesn't seem to work for basic Nextjs. I am sure I am missing something important. Would love to see a working example build off "create-next-app".

[leerob]

What version of Next.js are you on?

[dstroot]

@leerob "next": "13.5.3",

I knew I had to wait until 13.5 to try it out. Cheers!

[peterochieng]

also, if I run a local build, and then start it up locally it does not seem to add the nonce. Using npm run dev it seems to add the nonce.

Hi @dstroot Did you ever solved this ? cc: @leerob

[dstroot]

@peterochieng - Unfortunately I do not recall - I moved on to another project.

[peterochieng]

@dstroot Okay, thank you.

[PedroJBrito]

Hi,

Since the nonce doesn't apply to a static page, what is the best approach in this case? Is there an alternative to using 'unsafe-inline'? Hash is a possibility for scripts I know beforehand, but next injects a bunch of scripts that are blocked unless we use 'unsafe-inline'. There is a better approach, because by using 'unsafe-inline' we are losing much of the security that CSP is supposed to provide. Thanks

[Phebonacci]

Hi, this is also my current deal breaker for using Next.js App Router. Have you found a solution for static pages?
@leerob Do we have a solution for static pages?

[Phebonacci]

So i ended up creating a postbuild script that generates hashes out of inline scripts generated by Next.js for static pages saved into a JSON file. Then, I created a route that returns the hash given a page pathname and integrated this route into the middleware. The middleware then inserts the hash into the script-src CSP directive. I don't know if it's ideal but it's working. This won't work with ISR, though.

// generate-inline-script-hashes.mjs

// @todo Replace dotenv with node --env-file once it's stable.
import 'dotenv/config';

import crypto from 'crypto';
import fs from 'fs';
import { globSync } from 'glob';
import path from 'path';

const distDir = path.resolve(process.cwd(), '.next');
const htmlFiles = globSync(`${distDir}/**/*.html`);
const scriptsHashesByPage = htmlFiles.reduce((accum, file) => {
  const fileContents = fs.readFileSync(file).toString();
  const inlineScripts = fileContents.matchAll(/<script>(.+?)<\/script>/g);
  const fileScriptsHashes = [...inlineScripts].reduce((hashes, script) => {
    const [, scriptContents] = script;
    const hash = crypto.createHash('sha256');
    const scriptHash = hash.update(scriptContents).digest('base64');
    return `${hashes} 'sha256-${scriptHash}'`.trim();
  }, '');
  const pagePath = file.replaceAll(/(.+?\/(app|pages)\/)|(\.html$)/g, '');

  return { ...accum, [pagePath]: fileScriptsHashes };
}, {});

const scriptHashesByPageFilePath = path.resolve(
  process.cwd(),
  process.env.SCRIPTS_HASHES_FILENAME,
);
fs.writeFileSync(
  scriptHashesByPageFilePath,
  JSON.stringify(scriptsHashesByPage),
  { encoding: 'utf8' },
);

[henrychen40]

Been fighting with CSP for a week now. Also on Nextjs "13.5.3". The issue I encountered is Refused to load the script 'https://vercel.live/_next-live/feedback/feedback.js'. There is always an error no matter the script-src is 'self' or 'unsafe-inline'.

Agree with the others that a solution for static pages is highly appreciated!

[TranquilMarmot]

You need to add it to script-src and connect-src

So the line should be like:

script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://vercel.live;

You will also need to add connect-src:

connect-src 'self' https://vercel.live;

If you have default-src 'self'; then by default, for things that aren't specified in your headers, it will only allow connecting to self

[TranquilMarmot]

Just kidding, that looks like it might not work 🙃

[Phoenix-Alpha]

@leerob, hi lee, is there any plan for next.js to implement hash based strict csp? nonce does not address the problem for static pages and it would be great if nextjs has a plan for this.

[nikitaeverywhere]

QQ: is there a way in Next.js (App Router) to allow CSP's unsafe-eval directive only for my own sources? (JS chunks that Next.js generates)

One of the libraries I use in my Page component's code uses eval("") under the hood for a reason, and want it to be the only code allowed to unsafe-eval. So far, I didn't see any way to label Next's js chunks with nonces nor hashes.

[Zemnmez]

This isn't possible with CSP. It's possible with Trusted Types: https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API

[badmintonkid]

For people looking to have a strict CSP on a static site, we've been using a postbuild script to rewrite the generated inline scripts into a separate chunk - #54152 (comment)

[samithaf]

Would be great if Next.js can support it by default. We have a static site (using generateStaticParams) and now forced to re-render per request by adding export const dynamic = 'force-dynamic'; due to CSP issue. While it works now, there is a performance hit. cc @leerob

[hendrikpeilke]

Hi @leerob,

thank you for your nice documentation and examples.
If I use the example from the documentation together with Next.js 14.0.1: https://github.com/vercel/next.js/tree/canary/examples/with-strict-csp and just start it in development mode npm run dev. I get the following error:

The error is away on production build npm run build npm run start, so I guess in development node unsafe-eval needs to be allowed!?

When calling the at build time by the example generated error page by using a path, which is not specified, e.g. http://localhost:3000/some-not-existent-path, I get a lot of CSP errors:

Could you please give some advice on updating the example, such that it runs with all its functions or is this not possible due to the statically generated sites? If so, is there a possibility to create the error pages as dynamic pages in the minimum example?

[hallucinogenizer]

Still facing this issue

[samithaf]

Try to add export const dynamic = 'force-dynamic'; to the pages and see if you can get it working.

[stychu]

@leerob how about a case with NextJs app router and custom express server? I'm having a problem with CSP and I am not sure how I should tackle this. As soon as I add helmet to the express server it starts to block all scripts

[linkb15]

From the documentation, I could not find how to get the nonce in _document.tsx and pass it to <Head> or <Script>.

I found out I can get the nonce from access req object from document context. I was trying to use res object previously but it was failing for Mac browsers and Mobile Devices (iPhone and Android), but in windows desktop it was working.

const MyDocument = ({ props }: { props: { nonce: string } }) => {
  const { nonce } = props

  return (
    <Html>
      <Head nonce={nonce}>
        <script
          nonce={nonce}
          async
          src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}
          id="gtag-base"
        />
      </Head>
      <body>
        <Main />
        <NextScript nonce={nonce} />
      </body>
    </Html>
  )
}

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const nonce = ctx.req ? ctx.req.headers["x-nonce"] : undefined

  // This way only works for Windows. Apple and Mobile Devices does not work with this.
  // const nonce = ctx.res?.getHeader("x-nonce")

  const initialProps = await Document.getInitialProps(ctx)

  return { ...initialProps, props: { nonce } }
}

[fcano-ut]

This solution works nicely, but doesn't work on error pages (because they're rendered statically, which seems to cause issues).

I'd recommend to make changes in _app.tsx aas suggested by @blackbing here, that has fixed scripts in server-rendered error pages for me.

Hope this is helpful

[ndq11]

Is it possible to use nonce in Pages router (Next 13)?
I've tried example from docs, it utilizes next/headers (which is working only in app router), so I've replaced it with getInitialProps and passed x-nonce value as a prop. Tried to add it in document and/or in app file, but no luck.
In production mode it throws hydration mismatch and most of the css and js files are blocked by CSP.
Also getInitialProps leads to disabling static optimization and disabling output: standalone.
Is there a viable path for projects on Pages router?

[DavidPVaz]

So if I am using SSG with next.js v14.X.X, I need to give up on security with 'unsafe-inline'?

[leo27-corpuz]

Any update for nonce in SSG?

[nicolopadovan]

I am experiencing issues setting up a strict Content Security Policy with the latest version of NextJS (currently 15.0.3).
Specifically, there are two main problems:

1. For dynamic pages, the documentation is not too clear regarding how to consume the nonce. NextJS does use inline scripts and/or styles, both in development and production, and it's not clear how to pass the nonce to them. See this comment
2. For static pages, it's not clear at all how to avoid using unsafe-inline, since the middleware is out of question there - or better, it defeats the purpose of having a static page!

Additionally, I've noticed that in development it's impossible to remove unsafe-eval due to the webpack configuration set in next.config.ts not being fully picked up. In fact, changing the devtool option does not work, and the webpack configuration file still is generated and loaded

ATTENTION: An "eval-source-map" devtool has been used.

It would be great to have some focus on the issue from the team, since CSP is quite an important aspect of security.

[dstroot]

This is spot-on. Primarily my site is static (~200 pages) and I'd love to get rid of unsafe-inline but I DO NOT want to make all my pages dynamic.

[wujekbizon]

This is a huge problem for me as well. I’ve essentially been forced to make my entire app dynamic in order to keep it secure. This means I have to give up all of the following:

┌ ◐ /                                    11 kB           202 kB
├ ○ /_not-found                          159 B           101 kB
├ ƒ /api/stripe/create-checkout-session  159 B           101 kB
├ ƒ /api/webhooks/clerk                  159 B           101 kB
├ ƒ /api/webhooks/stripe                 159 B           101 kB
├ ○ /blog                                4.19 kB         123 kB
├ ○ /blog/[id]                           188 B           110 kB
├ ○ /canceled                            188 B           110 kB
├ ○ /polityka-prywatnosci                188 B           110 kB
├ ƒ /sign-in/[[...sign-in]]              723 B           130 kB
├ ƒ /sign-up/[[...sign-up]]              723 B           130 kB
├ ○ /success                             6.26 kB         116 kB
├ ◐ /testy-opiekun                       4.88 kB         154 kB
├ ○ /testy-opiekun/nauka                 4.61 kB         114 kB
├ ○ /testy-opiekun/procedury             3.33 kB         122 kB
├ ○ /testy-opiekun/procedury/wyzwania    22.1 kB         128 kB
├ ○ /testy-opiekun/testy                 4.36 kB         105 kB
├ ƒ /testy-opiekun/wyniki                5.02 kB         120 kB
├ ◐ /testy-opiekun/wyniki/[testId]       188 B           110 kB
├   └ /testy-opiekun/wyniki/[testId]
├ ○ /warunki                             188 B           110 kB
└ ○ /wsparcie-projektu                   736 B           116 kB
+ First Load JS shared by all            101 kB
  ├ chunks/3469eab5-8ce5f1d952c5d1ee.js  52.9 kB
  ├ chunks/4564-d6505d7cd6c5d89b.js      45.9 kB
  └ other shared chunks (total)          1.92 kB

Making everything dynamic could significantly increase my costs—especially since Vercel lambdas can be expensive. Beyond cost, this approach sacrifices the speed and performance benefits of static generation. Static pages are essential for delivering a fast, user-friendly experience, which is a priority for my app.
I mean, the goal of SSR and PPR is to reduce the time it takes for content to travel between the server and client or make it dynamic only where needed. But when we’re forced to use dynamic rendering to keep our app secure, it ends up working against this goal.

Is the Next.js team planning any workarounds here? I’ve invested so much time forcing these new changes into my app, and now I have to rethink everything.

[nicolopadovan]

This.
I fully know that this could be a difficult feature to implement for static pages - due to the dynamic nature intrinsic of the nonce itself - but at least some better documentation would be great, as well as having someone look into this to get even just a little closer to a better solution.

[dberos]

For v15.0.3. As i see it we have to enable csp only in production(npm run build && npm run start) and mark every page as async and have some async operation inside to avoid errors. If i am not mistaken, next/script doesn't require nonce, but what about next/image injecting width and height? Should those errors be ignored? I don't think it causes any problems though. To reproduce:

import { headers } from "next/headers";
import Image from "next/image";

export default async function Home() {
  const headersList = await headers();
  const nonce = headersList.get('x-nonce') || "";
  return (
    <div>
      <p className="red-box bg-green-500 size-20">
        Hello World
      </p>
      <style nonce={nonce}>
        {
          `
          .red-box {
            background-color: red;
          }
          `
        }
      </style>
      <Image 
      src={'./next.svg'}
      alt="next logo"
      width={100}
      height={100}
      />
    </div>
  );
}

import { NextRequest, NextResponse } from 'next/server'
 
export function middleware(request: NextRequest) {
	if (process.env.NODE_ENV === 'development') {
		return NextResponse.next();
	}
	const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
	const cspHeader = `
	default-src 'self';
	script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
	style-src 'self' 'nonce-${nonce}';
	img-src 'self' blob: data:;
	font-src 'self';
	object-src 'none';
	base-uri 'self';
	form-action 'self';
	frame-ancestors 'none';
	upgrade-insecure-requests;
	`
	// Replace newline characters and spaces
	const contentSecurityPolicyHeaderValue = cspHeader
	.replace(/\s{2,}/g, ' ')
	.trim()

	const requestHeaders = new Headers(request.headers)
	requestHeaders.set('x-nonce', nonce)

	requestHeaders.set(
	'Content-Security-Policy',
	contentSecurityPolicyHeaderValue
	)

	const response = NextResponse.next({
	request: {
		headers: requestHeaders,
	},
	})
	response.headers.set(
	'Content-Security-Policy',
	contentSecurityPolicyHeaderValue
	)

	return response
}

export const config = {
    matcher: [
        '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
    ],
}

[felipedeboni]

Maybe there's hope #73891 :)

[axten]

I stumbled upon this topic right now and I'm surprised that the CSP handling with Next.js is so cumbersome, even with v15.
I'm trying to avoid nonces but it seams there is simply no way to do it without 'unsafe-inline' directive.
Wouldn't it be the easiest solution to generate the hashes for known inline scripts automatically and adding them to the CSP header automatically?
Is there a reason next/script tags and all the internal <script self.__next_f.push(... tags don't handle that automatically?
cc @leerob

[axten]

even with the code from the docs for implementing nonce with middleware, it is not working:

• in development env, 'script-src unsafe-eval' is needed for JS
• for inlined stylessheets inserted by next, the nonce is not added so 'style-src unsafe-inline' is currently needed even in production

so I ended up in doing it like this:

    const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';

    const cspHeader = `
      default-src 'self';
      script-src 'self' 'nonce-${nonce}' 'strict-dynamic' ${IS_DEVELOPMENT ? "'unsafe-eval'" : ''};
      style-src 'self' 'unsafe-inline';
      ...
    `;

[willrp]

@leerob
First of all thanks for the awesome work in the documentation.
It works very well and I could finally understand nonce pretty well.

However, there is one use specific case that I cannot get it to work. It is only in Production.
I did the middleware like in the documentation, including skipping it for prefetch. But I have a problem when transitioning from one page to another. I am using React 14.2.24. I am returning the headers for CSP and everything, exactly like in the documentation.

For example, you have two pages, Page 1 and Page 2. We have a link to Page 2 in Page 1.
In Page 2, I have a script that is added to the page. In my case was using Cloudflare Turnstile, but it can be in any script.

If I access the Page 2 directly, the x-nonce header works well and it is in sync with everything. The script nonce will be set to the returned header and everything works like a charm.

However, if I first access Page 1, and then click on the link to Page 2, a fetch request is made with an rsc parameter. A new header is returned, a new nonce is made by this fetch request, and it is used in the script for Page 2. A new header with CSP is also returned from it, as expected. However, I am facing the following situation:

The first nonce in the image is the one used by the script in the Page 2. The one in the error is the one set in the initial request in the Page 1.

I will keep investigating here, try to put on the head and meta params, and see where I can go. I am not updating the head or meta params yet. I thought that, by returning the header, the browser would understand. But it seems that the header returned by the fetch request that is made with the rsc parameter is being ignored, even though it is a new GET request.

Or, should I make a context with a hook, load the nonce on the layout, and use that nonce set there for the scripts, so this script will use the nonce set up by the initial request (is there any security problem by doing this?). In this case it is a script loaded in a client component (context will probably work), so I would not know how to make it work for server components, since contexts are not usable there.

My current knowledge is that the nonce should be returned inside the Content-Security-Policy header in each request, and that is happening. Here is an image with the fetch request with rsc returning the header. It is also returned in the initial request, but the nonces are different.

Don't worry about the URL, it is only making alias and for cookie related stuff. Even on staging environment it does not work as well.

If I have a solution for this I will post here to help everyone. If someone has any idea how to fix this, I appreciate. I am thinking on stopping the nonce for this and using domain CSP if I cannot make it work.

Sorry for the long post. Thank you in advance.

[willrp]

The changing metadata alternative seems to be not supported:

I also cannot change on the layout since, even when getting the header and putting on the HTML > head, it did not update.

Context just seems really strange, since, even in the documentation for the generateMetadata it tells to return the headers.

[willrp]

Alternatives that worked:

• Adding the domain: Adding the domain to the CSP solved the problem for this case, however, for situations that other people may face this may not work.
• Context: It works, only for client components, but seems not right to do so.
• Loading the script in the layout: I could load the script in the layout instead of injecting it when necessary and it works (since it is using the initial request nonce). However, only a few pages need this script, so this seems weird as well.

Any other ideas? Probably I am missing something to make the browser use the fetch request with rsc use the returned header as the new CSP.

[Kacper-Arendt]

I'm facing the same problem. I did everything like in the docs, and when I open page 2 directly, the nonce works as expected. However, when I navigate from page 1 to page 2, the nonce is not up to date.

[Kacper-Arendt]

Well, in my case, the solution was to comment out the CSP header in the response and keep it only in the request headers.

...
    requestHeaders.set("Content-Security-Policy", cspHeader);
    // response.headers.set("Content-Security-Policy", cspHeader);
...

[willrp]

@Kacper-Arendt
I tested here and I believe that, by not setting the response header, you lose the CSP in the browser, as the header is not given to the browser at all. How is it working there?

As far as I know, the middleware have 2 phases:

• The handling, where the request comes to the server, passes through the middleware, until you call the function to process your response. Passing the request headers here makes them available in the server components;
• The finishing, where the response may be processed in the middleware and returned to the client. Passing the response headers here makes them available to the client.

In the documentation code (Middleware), it is like this:

---handling until here---

const response = NextResponse.next({
  request: {
    headers: requestHeaders,
  },
})

---finishing from here---

return response; // Response actually returned to the client.

By passing the request to the NextResponse.next function, with the headers, the headers() function inside the server component will know the nonce, so we can use it in the script element.
However, if the response does not have the CSP header, it will not be returned to the browser, which will not be able to enforce the CSP. I believe it works the same with the cookies too: if you want to pass cookies from the middleware to the browser, you have to set it in the response. I use this arrangement for localization, authentication, etc.

Maybe I am missing something. Could you please clarify?

[dennisjnnh]

I think this needs to be revisited. If you want to use a secure csp with next.js, you must explicitly rely on dynamic rendering across the entire app. I understand this is due to how scripts are loaded, but i dont know if this is a fundamental limitation or not.

[willrp]

Indeed.

The headers function usage opts the route into dynamic rendering: https://nextjs.org/docs/app/api-reference/functions/headers#good-to-know

[Benman2005]

I'm still looking for a solution for our static website.

Right now we have an NGINX application in front of our site that replaces a secretNonce string in our _document.js with a newly generated string every request and also adds a csp header.

As I see it, it shouldn't be too hard for some nextjs middleware to do the same, eg to replace a string in the statically generated pages with a new string on every request, and have every request with a new csp-header w that new nonce, but keep pages still generated statically.

Can some nextjs wizard please implement this? 😊 Or maybe explain why this isn't possible? :)

[dennisjnnh]

interesting approach, but yes, this has to be improved on the nextjs side

[iagormoraes]

I attempted your method using the app router, but it doesn't work. However, it could be a valuable feature to include.

[fpoirier1]

Hey guys, we are experiencing the same challenge here regarding having a nonce while keeping SSG. Did anyone of you tried nibtime/next-safe-middleware ? It looks a bit outdated but I managed to make it work using the hash.

[aryomuhammad1]

Do you use pages or app router?
From the docs, seems like the next-safe-middleware only created for pages router..

[reutenkoivan]

Hi, can someone help me understand if there is another flow of rendering if you specifically set up the Content-Security-Policy response header?

I'm asking because I have a strange case when the style node renders with that specific header - I have the hydration error for the nonce attribute. Example MR

[axten]

This is normal, u need to set suppressHydrationWarning on all the elements. The nonce is removed for security reasons.Am 18.04.2025 12:58 schrieb Ivan Reutenko ***@***.***>: Hi, can someone help me understand if there is another flow of rendering if you specifically set up the Content-Security-Policy response header? I'm asking because I have a strange case when the style node renders with that specific header - I have the hydration error for the nonce attribute. Example MR image.png (view on web) —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[mderrick]

Can anyone shed light on the purpose of this part in the docs:

requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )

Why would I need to put the entire CSP headers on the request? As far as I can tell you only need to put it on the response:

response.headers.set('Content-Security-Policy', `script-src 'self' 'nonce-${nonce}';`.replace(/\s{2,}/g, ' ').trim())

In order to get Next to satisfy this line and get the nonce on all the internal assets.

[icyJoseph]

IIRC that's so that the rendering process can see the header. Otherwise, you are only setting it in the downstream response.