adding a nonce to remove unsafe-inline from content-security-policy via HTTP header and not meta tag

[dagda1]

I want to use a nonce in a similar way that this example does only I need to use HTTP headers and not the meta tag because I need to use certain features like frame-anscestors that are not available with the meta tag.

At the moment I am not able to do this because the only way I can see of adding HTTP headers is in next.config:

const securityHeaders = [
  {
    key: 'X-XSS-Protection',
    value: '1; mode=block',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'Content-Security-Policy',
    value: createContentSecurityPolicy(),
  },
  {
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin',
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
];

const nextConfig = {
  async headers() {
    return isProduction
      ? [
          {
            source: '/(.*)',
            headers: securityHeaders,
          },
        ]
      : [];
  },
// etc.

In order to use a nonce with this approach, I would need to be able to create a cryptographic hash on each page request and add it to the headers here but I do not think this is currently possible, is it? I would then need to have the same nonce available in a custom _document component which again is not possible as there is no way of sharing a custom hash like this between next.config and the production code or am I wrong?

Another way is to create a SHA256 of the content of each inline script or link tag which I could do in a custom _document.

I am currently hosting my app on vercel but if I was on AWS, then I would create a custom lambda that created the nonce, updated the script and link tags in a post rendering event like is described here but again, I do not think this is possible with vercel functions or am I wrong?

[leerob]

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.