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?

[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

[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

[MonikaWebethics]

I have followed this https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy documentation by next js and i am getting this error

here is my middleware file

import { NextRequest, NextResponse } from "next/server";

export function middleware(request) {
  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';
    block-all-mixed-content;
    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;
}

here is my _app.js file

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}
    />
  );
}

[dan-goswag]

@leerob are there any plans to introduce support for hash based CSPs to nextjs? Or does it exist already and I've missed it?

Having to switch to 'force-dynamic' feels pretty disappointing when we mainly chose Next for its SSG / caching capabilities.

[vanadu]

That is so true - but SSG doesn't seem to be a priority, and an insecure SSG is a dead SSG. I went so far as to make an SO post, but nobody from Nextjs dev has responded there either. https://stackoverflow.com/questions/78320411/using-hashes-for-content-security-policy-in-statically-generated-sites-ssg-in

[carlosagsmendes]

Hi, any guidance on how to use nonces in non-dynamic pages with the app router? Thks in advance

[blakerutledge]

Currently needing support for hashes for SSG!

[vanadu]

Obviously, nothing is going to happen through backdoor channels like Github. Maybe some more exposure would move things along: https://stackoverflow.com/questions/78320411/using-hashes-for-content-security-policy-in-statically-generated-sites-ssg-in

[simonshoban]

@dan-goswag @carlosagsmendes @blakerutledge

For anyone using static exports / SSG and struggling with CSP issues, here's a Node buildscript that generates SHA256 hashes for each script that isn't allowed by script-src 'self':

/**
 * NextJS v14.1.3 doesn't support CSP hashes for Static Site Generation, so we have
 * to do it ourselves by modifying the outputted index.html at build-time and
 * feeding our hashes into the script-src CSP header directive in the infrastructure code.
 */

const { parse } = require("node-html-parser")
const { readFileSync, writeFileSync } = require("fs")
const { createHash } = require("crypto")

const WEB_RESOURCES_PATH = "../web/out"
const INDEX_PAGE_PATH = `${WEB_RESOURCES_PATH}/index.html`
const CSP_HASHES_OUTFILE = "csp-hashes.json"

const generateSha256CspHash = (value) => {
	return `sha256-${createHash("sha256").update(value).digest("base64")}`
}

console.log(`Searching ${INDEX_PAGE_PATH} for inline <script> tags`)
const cspHashes = []
const root = parse(readFileSync(INDEX_PAGE_PATH).toString())

const inlineScripts = root.querySelectorAll("body script")
console.log(`Found ${inlineScripts.length} inline <script> tags`)

// <link> scripts in the <head> preloading JavaScript resources are also impacted by
// the script-src CSP directive
const preloadedScripts = root.querySelectorAll("head link[rel='preload'][as='script']")
console.log(`Found ${preloadedScripts.length} <link> tags preloading JavaScript files in <head>`)

console.log("Creating SHA-256 hashes for each script")

for (const inlineScript of inlineScripts) {
	const innerTextScriptHash = generateSha256CspHash(inlineScript.text)

	// Inline scripts with a src attribute need to use the exact same hashes used by the link tag
	// that preloads the linked resource. If there is no associated <link rel='preload' as='script' ...>
	// tag, then adding this extra hash should not cause problems
	if (inlineScript.getAttribute("src") !== undefined) {
		const linkedScript = readFileSync(`${WEB_RESOURCES_PATH}${inlineScript.getAttribute("src")}`, "utf8")
		const linkedScriptHash = generateSha256CspHash(linkedScript)
	
		inlineScript.setAttribute("integrity", `${innerTextScriptHash} ${linkedScriptHash}`)
		cspHashes.push(`'${linkedScriptHash}'`)
	} else {
		inlineScript.setAttribute("integrity", innerTextScriptHash)
	}

	cspHashes.push(`'${innerTextScriptHash}'`)
}

for (const preloadedScript of preloadedScripts) {
	// Firefox and Chrome expect the hash of the linked script, Safari expects the hash of the inner text
	const innerTextScriptHash = generateSha256CspHash(preloadedScript.text)
	const linkedScript = readFileSync(`${WEB_RESOURCES_PATH}${preloadedScript.getAttribute("href")}`, "utf8")
	const linkedScriptHash = generateSha256CspHash(linkedScript)

	preloadedScript.setAttribute("integrity", `${innerTextScriptHash} ${linkedScriptHash}`)
	cspHashes.push(`'${innerTextScriptHash}'`)
	cspHashes.push(`'${linkedScriptHash}'`)
}

// There may be duplicate hashes if the same resources are loaded two or more times, like
// when a <link> tag preloads a JS file and an inline script later consumes it.
const uniqueCspHashes = [...(new Set(cspHashes))]

console.log(`Persisting the following hash information to ${CSP_HASHES_OUTFILE}: ${uniqueCspHashes}`)
writeFileSync(CSP_HASHES_OUTFILE, JSON.stringify(uniqueCspHashes))

console.log(`Updating ${INDEX_PAGE_PATH} with new hashed scripts`)
writeFileSync(INDEX_PAGE_PATH, root.toString())

This script was inspired by @badmintonkid's post here

The only third-party library used is node-html-parser

Usage instructions:

1. Modify the path constants at the top of the script as needed
2. npm install node-html-parser
3. node generate-csp-hashes.js

You can place this in your build pipeline and feed the output values into wherever you're defining your CSP. Note that if you're using a CDN, you may need to keep track of the existing/previously-used set of hashes and trigger an invalidation if the hashes ever change so that your HTML and CSP stays in sync.

If you're using AWS CDK and CloudFront like me, these hash values can be placed into your cdk.json, cdk.context.json, or directly into the cdk synth command using the following syntax: cdk synth --context key=value. You can then access this value in your CDK stack like so: const cspHashes = JSON.parse(this.node.tryGetContext("key_name")); for more information on CDK context see here.

CloudFront invalidation can apparently be done in CDK by specifying a value for the distributionPaths parameter in the BucketDeployment construct.

[vanadu]

Thanks - I think this is really an excessive workaround for a hot-button issue that Nextjs has been sweeping under the rug for at least a year. If Nextjs is trying to kill off SSG by making it inherently insecure, they're doing a great job. https://stackoverflow.com/questions/78320411/using-hashes-for-content-security-policy-in-statically-generated-sites-ssg-in

[Husain010]

I did exactly how it is shown here:
https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

But I get this issue:

So basically, all the script tags which are being generated on build do not have the nonce values and this is why the error is caused. Went through many issues and discussions but cannot find any resolutions.
|If there is any pointers please help, have seen many facing similar issue but no concrete fix.

[Husain01]

This is how I solved it:
https://husainbhagat.hashnode.dev/securing-nextjs-applications-with-robust-csp-headers

[DannyJoris]

When using nonces on a standard SSR site, how do you make sure scripts work on error pages like 404 and 500 which are statically generated? How do you make that switch? #64023

[Szuszi]

Having the same issue!

[valleywood]

Me too!

[benyaminl]

Hello, I seen and use nonce already with the code generated from nextjs. But the problem that come after that if I use Google Tag Manager and Analytics with Next Third party component, it doesn't have any nonce tag causing it failed to be called....

Is there any config for 3rd party next component config that could fix that?

Thank you

[ismendoza]

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 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

Hello
Nonces work good but when I reload the page CSP doesn't work. only work when I load pages doing click on the Links of router.
What can I do to make it works when I reload the page? thank you.

[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).*)',
    ],
}