Next.js 13: How to pass nonce as prop so that initial scripts receive it? #49648
-
Describe the feature you'd like to requestIn Next.js 12, we simply add a nonce attribute to Please clarify where we pass a nonce as a prop so that Next 13 adds the nonce to the initial scripts. Describe the solution you'd likeClarification on the above matter. Describe alternatives you've consideredI cannot see how it can be done provided the current design pattern. |
Beta Was this translation helpful? Give feedback.
Replies: 12 comments 25 replies
-
|
@tmb-github Have you figured out how to do it? We are struggling with CSP due to this missing nonce. 😕 |
Beta Was this translation helpful? Give feedback.
-
|
@mlbiche Yes, I send all of the security headers in next.config.js, in an async headers() function in the nextConfig object. See this article for the syntax. Next, in every page.js file in the app folder, I include |
Beta Was this translation helpful? Give feedback.
-
|
@tmb-github Thanks for the explanations. But, I don't understand how you provide the per-page generated nonce in the CSP configured in the security headers in |
Beta Was this translation helpful? Give feedback.
-
|
@mlbiche Sorry about the oversight. Yes, the nonce is generated in the next.config.js and set as an environment variable so it can be retrieved with The |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, " Nonces should be generated differently each time the page loads" https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce After looking in next.js source code, the way to implement this it to pass a CSP header to the Request object from the middleware. // middleware.ts
//...
const nonce = generateContentSecurityPolicyScriptNonce()
const cspNonceCondition = `'nonce-${nonce}'`
// ...
const response = NextResponse.next({
request: {
headers: new Headers({
'content-security-policy': securityPolicy,
// Custom header for use in server component
'x-mss-script-nonce': nonce,
}),
},
})
// ...
response.headers.append('Content-Security-Policy-Report-Only', securityPolicy)
// ...
return responseThen the nonce is different for each request and Next injects it automatically to its scripts ! (This seems weird and it is not documented but it works as intended by Next) Then I added 'x-mss-script-nonce' header to get it back in server component (similar to your process.env, but with Hope this helps ! |
Beta Was this translation helpful? Give feedback.
-
|
Note that this is not compatible with static site generation as the nonce must be injected for each page view. |
Beta Was this translation helpful? Give feedback.
-
|
@hugues-m Thanks for that...although I'm having trouble understanding how to revise my existing next.config.js file to incorporate that design pattern. It currently follows the syntax here: https://nextjs.org/docs/api-reference/next.config.js/headers How would I revise that to incorporate the middleware, or would I use it outside next.config.js, and if so, where? (Also, I'm not using TypeScript, so if the code could exclude that, it'd be helpful for me to read.) |
Beta Was this translation helpful? Give feedback.
-
|
@hugues-m is correct that you need to set the Here's my middleware function (full source): export async function middleware(request: NextRequest) {
// generate CSP and nonce
const { csp, nonce } = generateCsp();
// Clone the request headers
const requestHeaders = new Headers(request.headers);
// set nonce request header to read in pages if needed
requestHeaders.set('x-nonce', nonce);
// set CSP header
// switching for report-only or regular for repro on
// https://github.com/vercel/next.js/issues/48966
const headerKey =
request.nextUrl.pathname === '/csp-report-only'
? 'content-security-policy-report-only'
: 'content-security-policy';
// Set the CSP header so that `app-render` can read it and generate tags with the nonce
requestHeaders.set(headerKey, csp);
// create new response
const response = NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
});
// Also set the CSP so that it is outputted to the browser
response.headers.set(headerKey, csp);
return response;
}You can see this working here: https://nextjs-csp-report-only.vercel.app/csp Repo: https://github.com/Sprokets/nextjs-csp-report-only Note - you'll need to be on at least Next.js 13.4.0 for this to work (see comment) |
Beta Was this translation helpful? Give feedback.
-
|
Just curious, downloading your example seems to work fine, but only as long as Note: this is after running |
Beta Was this translation helpful? Give feedback.
-
|
@vrajan1981 nonce-based values only work on dynamic routes by definition. In my example, calling In static rendering, the CSP There's currently not any good solutions in nextjs for CSPs on statically-rendered pages. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @danieltott, I'm relatively new to next and completely new to the world of CSP so this might be a stupid question, if so I apologize. I'm using the app directory and as far as I understand per the docs static rendering is the default. I haven't done anything that would make my pages defect from the default, so I assume all my pages are rendered statically. My app doesn't have user generated content, but there will be a contact-form on it, I'm going to sanitize that input but I would like to have some form of CSP as well. I added some security headers to next.config and tried to add all the hashes that the browser complained about, but there where two hashes that seemed to be generated anew every time I ran "npm run dev", and it also complained about unsafe-eval not being allowed, I assume the problem stems from googles reCaptcha because it is the only thing that seemingly stopped working on my site, even though I explicitly allowed every google and recaptcha url I could find in my CSP. So I started researching the nonce-way of doing things, I found this thread and thought I would try out the middleware solution you provided above. If I'm correct and all my pages are rendered static, I would have to force dynamic rendering, by either calling headers() in my pages or by using |
Beta Was this translation helpful? Give feedback.
-
|
I'm struggling to find any info about how to implement a nonce for scripts with the App router in Next 13. Previously, I used a custom document I can't find any documentation about the use of a nonce in Next (possibly since release of 13.4; I must have had something to go on prior to that, since I had this working with the A strict CSP is a prerequisite of my application. I'm surprised there aren't more people in the same position. Any advice or pointers would be hugely appreciated. 🙇♂️ |
Beta Was this translation helpful? Give feedback.
-
|
Yeah - see my comment above, and also comments on #43743. To summarize: there are two parts to this.
My thinking right now is for statically rendered sites that want to use |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the replies; I had a blind spot where I didn't see the new app router page components were statically rendered unless you do "something" to make them dynamically rendered. I was assuming they were SSR. |
Beta Was this translation helpful? Give feedback.
-
|
Totally - it's actually a really nice feature! And you can opt-in to dynamic rendering per route if you want (without calling functions you don't actually need) - this is probably the only viable solution currently until someone who knows webpack comes along. |
Beta Was this translation helpful? Give feedback.
-
|
@danieltott yeah, that should work with us; as we have a strict CSP, we'll just have to live with SSR until a better solution comes along. |
Beta Was this translation helpful? Give feedback.
-
|
Added guides for the App Router and the Pages Router here: https://github.com/karlhorky/next-js-tricks#security-headers-including-content-security-policy-csp |
Beta Was this translation helpful? Give feedback.
-
|
I have a question, how can I put nonce to _app? Today I use MUI in the dashboard and I need to implement nonce for cache providers. The one option is to change the pages folder to app dir and use get headers in server components |
Beta Was this translation helpful? Give feedback.
-
|
Edit, seems like it's possible with Client Context as noted by Daniel below and
|
Beta Was this translation helpful? Give feedback.
-
|
@adcichowski This is actually possible - since the https://github.com/danieltott/nextjs-pages-nonce Note - this (and other nonce-related things) has problems running in dev mode. To see this actually working, you need to Here's the important bits: // in _app.tsx
// get the nonce value from headers
MyApp.getInitialProps = async (
Context: AppContext
): Promise<Props & AppInitialProps> => {
const props = await App.getInitialProps(Context);
const { ctx } = Context;
const nonce = ctx.req?.headers?.['x-nonce'] as string | undefined;
return {
...props,
nonce,
};
};
// main render:
export default function MyApp({
Component,
pageProps,
nonce,
}: Props & AppProps) {
const nonceRef = useRef(nonce);
useEffect(() => {
if (nonce) {
nonceRef.current = nonce;
}
}, [nonce]);
// use nonceRef.current everywhere
}In my example |
Beta Was this translation helpful? Give feedback.
-
|
@danieltott Nice, thanks! I'll have to take a look at updating my guide to this approach with Client Context. My current approach reads the header from
import { GetServerSidePropsContext } from 'next';
import Script from 'next/script';
type Props = { nonce: string };
export default function Page({ nonce }: Props) {
return (
<>
<div>Home page</div>
<Script
src="https://www.google.com/recaptcha/api.js?render=explicit"
strategy="afterInteractive"
nonce={nonce}
/>
</>
);
}
export async function getServerSideProps(context: GetServerSidePropsContext) {
return {
props: {
// x-nonce header set in middleware.ts
nonce: context.req.headers['x-nonce'],
},
};
} |
Beta Was this translation helpful? Give feedback.
-
|
@karlhorky this would work fine assuming the page you're linking to also has the same setup - |
Beta Was this translation helpful? Give feedback.
-
|
Ok that makes sense, then my example is fine hehe, tricked myself that it was going to have a problem. |
Beta Was this translation helpful? Give feedback.
-
|
I'm incrementally migrating to Next.js and for now we're using the static export. Can I use middleware to put a placeholder nonce for our python webserver to fill in when serving the html? |
Beta Was this translation helpful? Give feedback.
-
|
If you have something that can modify html on the server before it's served, you can do pretty much anything. Unfortunately you won't be able to make the Next server aware of it though, since the static export doesn't employ middleware, and static pages on a typical build will have pre-compiled the Since we can't provide headers for the static export, there's no way to tell Next that the nonce value exists when building the pages. This pretty much rules out the nonce approach. However, you might be able to do something else: hash values. Here's what this would involve:
This should allow you to run a solid CSP. With If you have inline scripts for third-party scripts that won't be included in the build (
Just note that with the nonce approach, a new nonce needs to be generated with every request, so the find/replace needs to happen dynamically at request time. The reason you can't do this with the scripts generated by Next is that they usually don't just live in html so you can't just search for |
Beta Was this translation helpful? Give feedback.
-
|
I ended up using |
Beta Was this translation helpful? Give feedback.
-
|
Ah yes - all of this is a bit easier in the Pages router. I would add it to |
Beta Was this translation helpful? Give feedback.
-
|
Hey folks, wanted to swing back here with an update. 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:
Further, we've patched some bugs and made improvements to Really hope this helps out, thank you all 🙏 I'll be closing this discussion out. To continue the discussion, please go here. |
Beta Was this translation helpful? Give feedback.
Hey folks, wanted to swing back here with an update. 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:
noncewith Middlewarenoncein a route withheaders()unsafenonceMiddleware from running on prefetches / static assetsFurther, we've patched some bugs and made improvements to
noncehandling in Next.js that will be available in the latestcanaryversion (for those of you time traveling from the future, upgrade to Next.js 13.5). We also …