-
|
I need to apply a strict content security policy which would involve either adding a The way I am currently doing it is below which uses the meta tag but this is not sufficient because the same nonce value is available on each page and it is not a new one every time the page refreshes. A new nonce is only supplied on each URL change: import { randomBytes } from "crypto";
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
const nonce = randomBytes(128).toString("base64");
if (typeof ctx.res !== 'undefined') {
console.dir('this never happens so I cannot use ctx.res.setHeader');
}
return { ...initialProps, nonce };
}
render() {
const { nonce } = this.props;
const csp = `script-src 'self' 'unsafe-inline' 'unsafe-eval' https: http: 'nonce-${nonce}' 'strict-dynamic'`;
return (
<Html>
<Head nonce={nonce}>
<meta httpEquiv="Content-Security-Policy" content={csp} />
</Head>
<body>
<Main />
<NextScript nonce={nonce} />
</body>
</Html>
);
}
}I would prefer to have the same nonce value in module.exports = {
...
headers: () => {
const nonce = generatePsuedoRandom():
return [
{
source: '/(.*)',
headers: [
{
key: 'Content-Security-Policy',
value: `'script-src' self nonce-${nonce}`
}
]
}
]
};but how can I use this value in a custom |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Hi, @dagda1 The nonce-based approach will work for pages with I made a package @next-safe/middleware. It provides strict CSP support for Hybrid Next.js apps (Nonce-based for pages with getServerSideProps, Hash-based for pages with getStaticProps). However, I don't know how you could possibly achieve this without middleware, but if you use Next 12 you can give it a try and see how it goes for you. It essentially makes this decision automatically on a per-route basis: https://web.dev/strict-csp/#step-1:-decide-if-you-need-a-nonce-or-hash-based-csp |
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 …