Nonce or hash for inline styles (for Content-Security-Policy) #18451

sophiekoonin · 2020-10-29T09:09:24Z

sophiekoonin
Oct 29, 2020

Feature request

Is your feature request related to a problem? Please describe.

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!).

Describe the solution you'd like

Inline styles should have a hash or nonce which should be exposed as a global variable that we can inject into our CSP. A nonce is probably the easiest way forward. It will have to change on every request, so we'd need to have a way of generating this on the server side.

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.

Describe alternatives you've considered

I'm not sure there are any real alternatives here given the intention to move most of the critical styling inline.

bthorben · 2021-04-27T11:50:10Z

bthorben
Apr 27, 2021

I am facing exactly the described issue. While this seems to be hard to do with next.js, it was no problem to achieve with our, much older, custom webpack setup.

21 replies

sabirmgd Aug 24, 2021

Hey @sophiekoonin thanks for sharing this, this is been causing us issues, may I know which version is working for you, the script are working but not the styles for me, I'm using 10.0.5, its a server side rendering and attaching the nonce in the metadata:

export default class MyDocument extends Document {
  render(): React.ReactElement {
    const [csp, nonce] = generateCsp(); // function will create a nonce, its working for scripts but not for styles
    return (
      <Html lang="en">
        <Head nonce={nonce}>
          <meta property="csp-nonce" content={nonce} />
          <meta httpEquiv="Content-Security-Policy" content={csp} />
          <link rel="icon" href="/favicon.ico" />
          <link
            rel="preload"
            href={`${publicRuntimeConfig.BASE_PATH}/fonts/dmsans-regular-webfont.woff`}
            as="font"
            crossOrigin="anonymous"
          />
        </Head>
        <body>
          <Main />
          <NextScript nonce={nonce} />
        </body>
      </Html>
    );
  }
}

sophiekoonin Aug 24, 2021
Author

@sabirmgd if it's server-side rendering you could try setting the CSP on the response header as I did in my example above. not sure if that will help

sabirmgd Aug 24, 2021

Thanks for your response, my getInitialProps doesn't get called in _document: so nonce is always undefined. I also have getInitialProps in _app

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    console.log('Im being called');
    const initialProps = await Document.getInitialProps(ctx);
    const [csp, nonce] = generateCsp();

    const res = ctx?.res;
    if (res != null) {
      console.log("I'm in");
      res.setHeader('Content-Security-Policy', csp);
    }
    return {
      ...initialProps,
      nonce,
    };
  }

  render(): React.ReactElement {
    // const [csp, nonce] = generateCsp();
    const { nonce } = this.props;
    console.log(nonce);
    return (
      <Html lang="en">
        <Head nonce={nonce}>

sabirmgd Aug 27, 2021

@sophiekoonin I'm getting:
Property 'nonce' does not exist on type 'Readonly<RenderPageResult & { styles?: ReactElement<any, string | JSXElementConstructor>[] | ReactFragment | undefined; } & { ...; }> & Readonly

amedley Jan 15, 2022

This works: #18451 (comment)

Crelloc · 2021-05-11T17:20:49Z

Crelloc
May 11, 2021

Can you confirm that nonce changes on every page refresh?

…

Sent from my iPhone

On May 11, 2021, at 01:20, Sophie Koonin ***@***.***> wrote: getInitialProps in _app.js. If that's not an option for you, the CSP-header solution may not work. — You are receiving this because you commented. Reply to this email directly, view it on GitHu

1 reply

sophiekoonin May 11, 2021
Author

Yes, it does

Tcheetox · 2021-09-22T19:32:33Z

Tcheetox
Sep 22, 2021

@sophiekoonin I tried your above solution to set nonce. There's something I don't quite understand though, it works perfectly fine in dev, but whenever I try the production environment on my machine (nothing fancy, npm run build && npm run start), I always end with: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client.

I know it's not directly related, but I would appreciate any insights.

0 replies

dstroot · 2022-01-07T00:46:14Z

dstroot
Jan 7, 2022

Any updates here with Next 12? What's the best way to have a good CSP without 'unsafe-inline' and 'unsafe-eval'

0 replies

Crelloc · 2022-01-07T03:56:30Z

Crelloc
Jan 7, 2022

Check out this blog solution as it may help: https://reesmorris.co.uk/blog/implementing-proper-csp-nextjs-styled-components

…

On Thu, Jan 6, 2022 at 4:46 PM Dan Stroot ***@***.***> wrote: Any updates here with Next 12? What's the best way to have a good CSP without 'unsafe-inline' and 'unsafe-eval' — Reply to this email directly, view it on GitHub <#18451 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC6AI6FGHDORMW7C755TZX3UUYZWFANCNFSM43U2WTYA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

0 replies

amedley · 2022-01-15T19:24:46Z

amedley
Jan 15, 2022

SOLUTION FOR CLIENT RENDERED APPS

Got this working with middleware and getInitialProps. You only have to SSR the <Head>{...}</Head> for this to work.

pages/_middleware.js

import {NextResponse} from 'next/server';
import {v4 as uuid} from 'uuid';

function csp(req, res) {
  const nonce = `nonce-${Buffer.from(uuid()).toString('base64')}`;
  const isProduction = process.env.NODE_ENV === 'production';
  const devScriptPolicy = ['unsafe-eval']; // NextJS uses react-refresh in dev
  res.headers.append('Content-Security-Policy', [
    ['default-src', 'self', nonce],
    ['script-src',  'self', nonce].concat(isProduction ? [] : devScriptPolicy),
    ['connect-src', 'self', nonce],
    ['img-src', 'self', nonce],
    ['style-src', 'self', nonce],
    ['base-uri',  'self', nonce],
    ['form-action', 'self', nonce],
  ].reduce((prev, [directive, ...policy]) => {
    return `${prev}${directive} ${policy.filter(Boolean).map(src => `'${src}'`).join(' ')};`
  }, ''));
}

export const middleware = (req) => {
  const res = NextResponse.next();
  csp(req, res);
  return res;
}

pages/_app.js

import Head from 'next/head';

const DisableSSR = ({children}) => {
  return (
    <div suppressHydrationWarning>
      {typeof window === 'undefined' ? null : children}
    </div>
  );
}

const Page = ({ Component, pageProps, nonce }) => {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta property="csp-nonce" content={nonce} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <DisableSSR>
        <Component {...pageProps} />
      </DisableSSR>
    </div>
  );
}

Page.getInitialProps = async ({ctx: {req, res}}) => {
  const csp = {};
  res.getHeaders()['content-security-policy']?.split(';').filter(Boolean).forEach(part => {
    const [directive, ...source] = part.split(' ');
    csp[directive] = source.map(s => s.slice(1, s.length - 1));
  });
  return {
    nonce: csp['default-src']?.find(s => s.startsWith('nonce-')).split('-')[1],
  };
};

export default Page;

0 replies

leerob · 2023-09-01T22:36:17Z

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

Nonce or hash for inline styles (for Content-Security-Policy) #18451

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 22 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Nonce or hash for inline styles (for Content-Security-Policy) #18451

Feature request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Replies: 7 comments · 22 replies

sophiekoonin Aug 24, 2021 Author

sophiekoonin May 11, 2021 Author

leerob Sep 1, 2023 Maintainer

Replies: 7 comments 22 replies

sophiekoonin Aug 24, 2021
Author

sophiekoonin May 11, 2021
Author

leerob
Sep 1, 2023
Maintainer