Strict CSP implementation #41473

raff-s · 2022-10-14T09:10:36Z

raff-s
Oct 14, 2022

Describe the feature you'd like to request

I would like for it to be possible to implement a strict content security policy with Next.js
In a strict CSP implementation, a nonce value will be generated with each request server side and injected into the policy in the response headers, style and script tags.
Usually, it flows like this.
The client makes a request to the server
The server responds with some headers including a CSP header that might look like this

Content-Security-Policy: default-src 'none'; script-src 'nonce-OWI0NDlhMTItMTIwNC00ODI0LTlmOWYtZGQ3YjZhNjNlMTQz'; style-src 'nonce-OWI0NDlhMTItMTIwNC00ODI0LTlmOWYtZGQ3YjZhNjNlMTQz'; img-src 'self';*

This nonce value should also be passed to the client so it can inject into the tags that require it, note that this nonce value has to be unique on each request.
In order to have Webpack inject this nonce value into the style tags when it runs insertStyleElement
, we need to include on the top of the entry file __webpack_nonce__ = "OWI0NDlhMTItMTIwNC00ODI0LTlmOWYtZGQ3YjZhNjNlMTQz"

The issue I'm having is that when the page loads or reloads the value on the server side will always be the same so the response header nonce will always be the same but the value assigned to __webpack_nonce__ is dynamic .

I've created this repo which has a basic setup and demonstrates the issue with the nonce not being refreshed server side.
https://github.com/RaffysWeb/csp-demo

Webpack integration
https://webpack.js.org/guides/csp/
Basic repo with desired behaviour
https://github.com/RaffysWeb/csp-demo
Strict CSP policy information
https://csp.withgoogle.com/docs/strict-csp.html

Describe the solution you'd like

Ideally, we would have some sort of middleware that would generate a unique nonce value on each request so we can inject it into different pages.

`nonce_generator.js`

const { v4: uuidv4 } = require("uuid");
nonce = Buffer.from(uuidv4()).toString("base64");

`_app.js`

import "nonce_generator";
__webpack_nonce__ = nonce
...

`_document.js`

...
static async getInitialProps(ctx) {
  ctx.res.setHeader(
    "Content-Security-Policy-Report-Only",
    generateCSP({ nonce })
  );
...

`some-component.jsx`

...
<LibraryWithNonce nonce={nonce} />
...

Describe alternatives you've considered

I considered using an unsafe-hash approach and generating and injecting hashes at run time.
This is not ideal since we will not be able to differentiate between a legitimate script or style element or a malicious stored cross-site scripting payload greatly diminishing the efficacy of the CSP

tmb-github · 2022-11-02T03:34:12Z

tmb-github
Nov 2, 2022

I'm unclear if what follows will solve your problem, as I'm only working in development mode at this point, but take a look, because it does work for me.

My method is to generate the nonce in next.config.js and set it as an environment variable within the app. It can then be retrieved in _document.js, where it needs to be passed to <Head> and <NextScript>, and then elsewhere (perhaps on <style> blocks, etc., if a 'style-src' header with a nonce is used).

This works for Next.js 12. I haven't yet cracked how to make it work for Next.js 13, as <NextScript> is not part of its design pattern (at least at present). (If you can clarify how to add the nonce to the initial scripts in version 13, I'm all ears!)

next.config.js:

const { v4 } = require("uuid");
const crypto = require("crypto");

const nonceGenerator = () => {
  const hash = crypto.createHash("sha256");
  hash.update(v4());
  return hash.digest("base64");
};

const generatedNonce = nonceGenerator();

const nextConfig = {
  env: {
    generatedNonce: `${generatedNonce}`,
  },
  [...other configurations...]
}

_document.js:

import { Html, Head, Main, NextScript } from "next/document";

const generatedNonce = process.env.generatedNonce;

export default function Document() {
  return (
    <Html lang="en-us">
      <Head nonce={generatedNonce} />
      <body>
        <Main />
        <NextScript nonce={generatedNonce} />
      </body>
    </Html>
  );
}

3 replies

raff-s Nov 2, 2022
Author

After reading some of the source code I came up with a similar solution, my initial problem is that I couldn't find any information about passing a nonce attribute to Head in the documentation.
The difference between my solution and yours is that I kept the nonce generation in _document.js, do you get a new nonce value with each request when passing it in next.config.js?
Thanks ;)

tmb-github Nov 2, 2022

No, the nonce remains the same each time.

komw Apr 23, 2023

The nonce should be generated on each request. If the nonce has the same value for each request, it doesn't make sense as the attacker knows this nonce, and can inject script with that value.

The problem is because in development mode, getInitialProps for _document are executed in each request, but for the production version, nextjs renders _document at the build stage, and then use the same template for each request (and then unfortunately use the same nonce value)/

leerob · 2023-09-01T22:32:29Z

leerob
Sep 1, 2023
Maintainer

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:

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.

Really hope this helps out, thank you all 🙏 I'll be closing this discussion out. To continue the discussion, please go here.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Strict CSP implementation #41473

{{title}}

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Strict CSP implementation #41473

raff-s Oct 14, 2022

Describe the feature you'd like to request

Describe the solution you'd like

nonce_generator.js

_app.js

_document.js

some-component.jsx

Describe alternatives you've considered

Replies: 2 comments · 3 replies

tmb-github Nov 2, 2022

raff-s Nov 2, 2022 Author

tmb-github Nov 2, 2022

komw Apr 23, 2023

leerob Sep 1, 2023 Maintainer

raff-s
Oct 14, 2022

`nonce_generator.js`

`_app.js`

`_document.js`

`some-component.jsx`

Replies: 2 comments 3 replies

tmb-github
Nov 2, 2022

raff-s Nov 2, 2022
Author

leerob
Sep 1, 2023
Maintainer