How to add nonce to inline styles and scripts in Next.js?

Assuming Content-Security-Policy policy such as:

default-src 'self'; script-src https://ray.run

Next.js fails to function because of errors such as:

> Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-zu3j41gcw4FOWZYIiUz/VyL9HYakAfKLQFMCEcWNkAc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
>
> Refused to execute inline script because it violates the following Content Security Policy directive: "script-src https://ray.run". Either the 'unsafe-inline' keyword, a hash ('sha256-qJ8ozvdSL8lvQo3N0L0SYjL5lY0bLZcaD/xXL4BlEpQ='), or a nonce ('nonce-...') is required to enable inline execution.

As per what the error suggests, I have two options: allow "unsafe-inline" or add nonce. However, reading Next.js documentation I cannot find any mention of how to nonce to the inlined styles and scripts.

For context, I am using [tag:next.js13] with React Server Component (RSC).

To add the nonce attribute to <script> and <styles> tags, you need to define the content-security-policy header in the middleware.ts file (works with next@13.4.0 and higher).

The header is parsed by Next.js (in the renderToHTMLOrFlight function) to extract the nonce value, which is then added to the generated HTML tags.

Here's an example of the middleware function:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const csp = `script-src 'nonce-${nonce}';`;

  // Clone the request headers
  const requestHeaders = new Headers(request.headers);

  // Set the CSP header so that Next.js can read it and generate tags with the nonce
  requestHeaders.set('content-security-policy', csp);

  // Create new response
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders
    }
  });

  // Also set the CSP header in the response so that it is outputted to the browser
  response.headers.set('content-security-policy', csp);

  return response;
}

If necessary, you can also add a custom request header to read the nonce value in your pages:

requestHeaders.set('x-nonce', nonce);

To go further, according to the mdn documentation:
> Nonces should be generated differently each time the page loads (nonce only once!).

This means you can't set it in the next.config.js file, as it will only be generated once at build time. In the middleware function, the nonce value will be regenerated for each request.

Last but not least, this only works with dynamic routes and not with static rendering, since the nonce value must be different for each page load.

Code originaly published by @danieltott on GitHub: https://github.com/vercel/next.js/issues/43743#issuecomment-1542684019

Related discussions:

• https://github.com/vercel/next.js/discussions/43710
• https://github.com/vercel/next.js/discussions/49648

Just an additional info, If you add nonce and generate a lighthouse report it will still complain: "Consider adding 'unsafe-inline' (ignored by browsers supporting nonces/hashes) to be backward compatible with older browsers.", and the severity for this one is labeled as Medium. In my case, I added both the nonce and the unsafe-inline.