Inline styles in Next 10 don't work with strict Content-Security-Policy #18557

sophiekoonin · 2020-10-30T18:23:22Z

Bug report

Describe the bug

Recent versions of Next are using inline styles, which break our apps because we block style-src: unsafe-inline in our Content-Security-Policy header. In fact, the default behaviour of any CSP is to block unsafe inline styles. While the risk may be less than with unsafe inline scripts, there is still a risk: see this StackOverflow answer.

We have extremely high security requirements at my company so it's not really a matter of easily being able to disable unsafe-inline, and I'm aware that the future intention is to move more of the styling inline. If we can't upgrade Next because of this, we'll either be stuck on an old version and potentially vulnerable that way, or we'll have to consider alternatives (which I really don't want to do!).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Create a Content-Security-Policy header in next.config.js with style-src: 'self'; (i.e. without unsafe-inline explicitly enabled)
Run the app in production mode
See error in console:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash, or a nonce ('nonce-...') is required to enable inline execution.

Expected behavior

If inline styles can't be disabled, there should be the ability to add a nonce. This nonce will need to be regenerated on every request, and be able to be injected into the content-security-policy header.

I can see that the Head component in next/document accepts a nonce prop but this doesn't appear to apply to Next-generated inline styles. Additionally, when trying to set the nonce prop I found it was being set on the link elements as a blank attribute - the actual nonce value was not being passed in, despite it being present in this.props.nonce (I tested with some console.logging in the compiled Next code).

System information

Version of Next.js: [e.g. 6.0.2] 10.0.0

The text was updated successfully, but these errors were encountered:

Fixes #18557

Timer · 2020-11-13T20:38:04Z

@sophiekoonin While we're working on official (fully managed) CSP control within Next.js itself, we fixed the ability for you to pass nonce to <Head> in _document and have Next.js use it!

This should allow you to generate a valid CSP. You probably need to move from a headers approach to a <meta /> tag though if possible (so you can randomize it each request).

paambaati · 2020-11-14T02:42:46Z

we're working on official (fully managed) CSP control within Next.js itself

@Timer This is great news! Is there an RFC or an issue I could subscribe to for updates?

ivan-kleshnin · 2020-11-14T07:26:35Z

@paambaati you can use the following approach right now:

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

let prod = process.env.NODE_ENV == "production"

let csp = ``
csp += `base-uri 'self';`
csp += `form-action 'self';`
csp += `default-src 'self';`
csp += `script-src 'self' ${prod ? "" : "'unsafe-eval'"};`                    // NextJS requires 'unsafe-eval' in dev (faster source maps)
csp += `style-src 'self' https://fonts.googleapis.com 'unsafe-inline' data:;` // NextJS requires 'unsafe-inline'
csp += `img-src 'self' https://*.githubusercontent.com https://paqmind.imfast.io data: blob:;`
csp += `font-src 'self' https://fonts.gstatic.com;`  // TODO
csp += `frame-src *;` // TODO
csp += `media-src *;` // TODO

// require-trusted-types-for 'script';" TODO

let referrer = "strict-origin"

export default class Document extends NextDocument {
  render () {
    return <Html prefix="og: http://ogp.me/ns#" lang="ru">
      <Head>
        <meta httpEquiv="Content-Security-Policy" content={csp}/>
        <meta name="referrer" content={referrer}/>
      </Head>
      <body>
        <Main/>
        <div id="modal"/>
        <NextScript/>
      </body>
    </Html>
  }
}

You'll need to replace my static domains, etc. with yours obviously. I kept mine for extra context.
Those are not the strictest rules possible but we score A+ in Mozilla.observatory with them.

As @Timer mentioned, one the latest NextJS releases also removes the need for unsafe-inline but I personally haven't tried it yet.

Timer · 2020-11-14T07:37:00Z

Something along these lines, copying the above code:

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

let prod = process.env.NODE_ENV == "production";

function getCsp(nonce) {
  let csp = ``;
  csp += `base-uri 'self';`;
  csp += `form-action 'self';`;
  csp += `default-src 'self';`;
  csp += `script-src 'self' ${prod ? "" : "'unsafe-eval'"};`; // NextJS requires 'unsafe-eval' in dev (faster source maps)
  csp += `style-src 'self' https://fonts.googleapis.com 'nonce-${nonce}' data:;`; // NextJS requires 'unsafe-inline'
  csp += `img-src 'self' https://*.githubusercontent.com https://paqmind.imfast.io data: blob:;`;
  csp += `font-src 'self' https://fonts.gstatic.com;`; // TODO
  csp += `frame-src *;`; // TODO
  csp += `media-src *;`; // TODO
  return csp;
}

// require-trusted-types-for 'script';" TODO

let referrer = "strict-origin";

export default class Document extends NextDocument {
  render() {
    // Regenerated every render:
    const nonce = crypto.randomBytes(8).toString("base64");
    return (
      <Html prefix="og: http://ogp.me/ns#" lang="ru">
        <Head nonce={nonce}>
          <meta httpEquiv="Content-Security-Policy" content={getCsp(nonce)} />
          <meta name="referrer" content={referrer} />
        </Head>
        <body>
          <Main />
          <div id="modal" />
          <NextScript />
        </body>
      </Html>
    );
  }
}

ivan-kleshnin · 2020-11-14T07:40:08Z

@Timer does Styled-JSX support nonce- stuff? I still get warnings with this apporach (without unsafe-inline), most probably caused by Styled-JSX.

hades200082 · 2020-11-25T22:07:53Z

I don't think the OP's issue has been fixed here... next/image still outputs inline styles which means that you still have to use unsafe-inline for style-src

ranyehushua · 2021-01-15T16:02:32Z

I don't think the OP's issue has been fixed here... next/image still outputs inline styles which means that you still have to use unsafe-inline for style-src

Looks like the issue was solved and merged a couple weeks before this comment: #19150

nonce attribute is pulled from the head tag and applied to style tags that are later generated and inserted.

Manc · 2021-01-27T10:58:04Z

I'm looking into this problem at the moment and I get the feeling that the solution is not appropriate. I don't consider myself an expert on this, so please correct me if I'm wrong. So here's the problem:

For a solution based on nonce it is essential that the value is randomly generated for every single request.

This means:

The solution proposed above, generating the nonce value in the render() method of _document, does not work for statically rendered HTML pages as the nonce value will be generated once at build time and then remains the same until it is built again.
Even if one were to disable static rendering in Next.js completely (which would be pretty sad), server-side caching would also have to be disabled, i.e. every page really needs to be rendered for every single request.

If I'm not missing anything here, this pretty much defeats one of the main objectives of Next.js, which is to make page loads as fast as possible.

As I said earlier today here, I don't know the background of why the way CSS is now being loaded/pre-loaded has been changed recently. From what I can tell, everything worked fine until at least version 9.4, without the need for fetch-ing CSS and injecting styles.

Tiny speed improvements should not stand above best-practice security measures. Like I said, I don't know the background is, but I think more needs to be done here. At the moment, if I want to stay on version 10, I have no choice but to use a style-src: 'unsafe-inline' CSP.

moises-marquez · 2021-02-23T17:27:47Z

This doesn't work with material-ui because the style tag doesn't have the nonce. Any idea on how to add it?

The Next.js example with material-ui injects the styles in _document.js like follows:

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

lvnam96 · 2021-03-22T16:37:47Z

Additionally, when trying to set the nonce prop I found it was being set on the link elements as a blank attribute - the actual nonce value was not being passed in, despite it being present in this.props.nonce

@sophiekoonin it's not blank, just not visible to you via dev tools (see this answer on SO: https://stackoverflow.com/a/55673767/5805244).

BleddP · 2021-04-09T13:53:38Z

Something along these lines, copying the above code:

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

let prod = process.env.NODE_ENV == "production";

function getCsp(nonce) {
  let csp = ``;
  csp += `base-uri 'self';`;
  csp += `form-action 'self';`;
  csp += `default-src 'self';`;
  csp += `script-src 'self' ${prod ? "" : "'unsafe-eval'"};`; // NextJS requires 'unsafe-eval' in dev (faster source maps)
  csp += `style-src 'self' https://fonts.googleapis.com 'nonce-${nonce}' data:;`; // NextJS requires 'unsafe-inline'
  csp += `img-src 'self' https://*.githubusercontent.com https://paqmind.imfast.io data: blob:;`;
  csp += `font-src 'self' https://fonts.gstatic.com;`; // TODO
  csp += `frame-src *;`; // TODO
  csp += `media-src *;`; // TODO
  return csp;
}

// require-trusted-types-for 'script';" TODO

let referrer = "strict-origin";

export default class Document extends NextDocument {
  render() {
    // Regenerated every render:
    const nonce = crypto.randomBytes(8).toString("base64");
    return (
      <Html prefix="og: http://ogp.me/ns#" lang="ru">
        <Head nonce={nonce}>
          <meta httpEquiv="Content-Security-Policy" content={getCsp(nonce)} />
          <meta name="referrer" content={referrer} />
        </Head>
        <body>
          <Main />
          <div id="modal" />
          <NextScript />
        </body>
      </Html>
    );
  }
}

I tried the above solution and it works great, as it blocks the scripts which are not whitelisted by a nonce.

However for some reason the Content Security Policy header does not show up on the response headers during HTTP request. Is that normal behaviour or did I miss something?

PS I am using a custom Express server, but was unable to get the CSP working with Helmet as I was unable to get req.locales (req returns undefined in _document.js). Hence I think the above solution should work for now?

mwmcode · 2021-04-09T14:01:22Z

@BleddP I think they don't show in the http header because they're set in <meta> tags

CTRL/CMD + SHIFT + U to view document source code, you should be able to see the policies there

ivan-kleshnin · 2021-04-10T07:03:34Z

Yeah, as @mcha-dev said. Some security analizers don't check for meta tags but that's an issue with those services. I even personally asked 1 or 2 of them to fix their algorithms and it was done. According to standards, meta and headers are interchangeable for this particular piece of data.

jota12x · 2021-04-21T06:45:15Z

However for some reason the Content Security Policy header does not show up on the response headers during HTTP request. Is that normal behaviour or did I miss something?

This is because the meta tag and HTTP headers are two different approaches for the same result. Nevertheless, it is still recommended to go for the headers one as they provide more features.

Reference: https://content-security-policy.com/examples/meta/

Choc13 · 2021-06-30T13:21:14Z

This is mostly working for me, in that I can see that nonces are being added to every script and inline style that is being injected by Next which is great. However, I've found that a few Next components add style attributes. In particular the Next/Image component as can be seen here in the source. This then causes a problem for a nonce based CSP.

The best solution I've found is to write a csp like this

style-src 'self' 'unsafe-inline';
style-src-attr 'unsafe-inline';
style-src-elem 'self' 'nonce-somevalue' 'unsafe-inline';

So that in modern browsers that support style-src-attr and style-src-elem I only have to weaken thestyle-src-attr directive. Then I just supply the style-src directive as a fallback for older browsers.

Does anyone else have a better workaround for this? Or would it be possible for Next to stop using style attributes?

vercel/next.js#18557 (comment)

guydumais · 2021-09-14T12:06:43Z

You're right @Manc, as Lukas Weichselbaum from web.dev said in a recent post, nonce-based CSP only works if the number is not guessable and newly generated at runtime for every response.

That's why I've come to build the next-strict-csp package on NPM to implement a hash-based CSP with Next.js the right way.

Enjoy!

UnderTheMoonspell · 2021-10-13T11:00:58Z

The solutions proposed seem to work with the scripts injected by next, also with Material-UI, but I'm using CSS Modules, and none of my style tags have the nonce (next v11):

no good solution to implement nonce and hash exists current styled-components/styled-components#2363 vercel/next.js#18557 (comment)

balazsorban44 · 2022-01-27T15:05:57Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Timer added kind: story labels Oct 30, 2020

Timer added this to the iteration 11 milestone Oct 30, 2020

Timer added the type: needs investigation label Oct 30, 2020

Timer modified the milestones: iteration 11, iteration 12 Oct 30, 2020

Timer added the point: 5 label Nov 1, 2020

Timer assigned styfle Nov 12, 2020

styfle mentioned this issue Nov 13, 2020

Add "nonce" from <Head> to the injected <style> to satisfy CSP #19150

Merged

styfle removed the type: needs investigation label Nov 13, 2020

kodiakhq bot closed this as completed in #19150 Nov 13, 2020

kodiakhq bot pushed a commit that referenced this issue Nov 13, 2020

Add "nonce" from <Head> to the injected <style> to satisfy CSP (#19150)

318a1bf

Fixes #18557

JoeHart mentioned this issue Nov 27, 2020

Client-side nonce support styled-components/styled-components#2363

Closed

ericbiewener mentioned this issue Apr 2, 2021

Document Head nonce support doesn't work in development #23643

Closed

miya-start added a commit to miya-start/next-chat that referenced this issue Aug 28, 2021

Fix CSP for using next/image

c1667dd

vercel/next.js#18557 (comment)

abhinavkgrd added a commit to ente-io/photos-web that referenced this issue Dec 2, 2021

add unsafe inline to style-src

59b3745

no good solution to implement nonce and hash exists current styled-components/styled-components#2363 vercel/next.js#18557 (comment)

This was referenced Jan 4, 2022

harden web security ente-io/photos-web#259

Merged

harden web security ente-io/photos-web#273

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inline styles in Next 10 don't work with strict Content-Security-Policy #18557

Inline styles in Next 10 don't work with strict Content-Security-Policy #18557

sophiekoonin commented Oct 30, 2020

Timer commented Nov 13, 2020

paambaati commented Nov 14, 2020

ivan-kleshnin commented Nov 14, 2020 •

edited

Timer commented Nov 14, 2020 •

edited

ivan-kleshnin commented Nov 14, 2020 •

edited

hades200082 commented Nov 25, 2020

ranyehushua commented Jan 15, 2021

Manc commented Jan 27, 2021 •

edited

moises-marquez commented Feb 23, 2021

lvnam96 commented Mar 22, 2021

BleddP commented Apr 9, 2021

mwmcode commented Apr 9, 2021 •

edited

ivan-kleshnin commented Apr 10, 2021 •

edited

jota12x commented Apr 21, 2021 •

edited

Choc13 commented Jun 30, 2021

guydumais commented Sep 14, 2021

UnderTheMoonspell commented Oct 13, 2021 •

edited

balazsorban44 commented Jan 27, 2022

Inline styles in Next 10 don't work with strict Content-Security-Policy #18557

Inline styles in Next 10 don't work with strict Content-Security-Policy #18557

Comments

sophiekoonin commented Oct 30, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Timer commented Nov 13, 2020

paambaati commented Nov 14, 2020

ivan-kleshnin commented Nov 14, 2020 • edited

Timer commented Nov 14, 2020 • edited

ivan-kleshnin commented Nov 14, 2020 • edited

hades200082 commented Nov 25, 2020

ranyehushua commented Jan 15, 2021

Manc commented Jan 27, 2021 • edited

moises-marquez commented Feb 23, 2021

lvnam96 commented Mar 22, 2021

BleddP commented Apr 9, 2021

mwmcode commented Apr 9, 2021 • edited

ivan-kleshnin commented Apr 10, 2021 • edited

jota12x commented Apr 21, 2021 • edited

Choc13 commented Jun 30, 2021

guydumais commented Sep 14, 2021

UnderTheMoonspell commented Oct 13, 2021 • edited

balazsorban44 commented Jan 27, 2022

ivan-kleshnin commented Nov 14, 2020 •

edited

Timer commented Nov 14, 2020 •

edited

ivan-kleshnin commented Nov 14, 2020 •

edited

Manc commented Jan 27, 2021 •

edited

mwmcode commented Apr 9, 2021 •

edited

ivan-kleshnin commented Apr 10, 2021 •

edited

jota12x commented Apr 21, 2021 •

edited

UnderTheMoonspell commented Oct 13, 2021 •

edited