Next.js Discord

Discord Forum

How to apply nonce generated in middleware to inline styles?

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
I used the CSP strict example. And the nonce doesn't get applied to the script tags in head tag (inspecting source in devtools) or inline styles (tailwind) which is preventing me from implementing strict CSP.

I see a bunch of outdated conversations online for older versions of nextjs and these conversations are dated 2021. Notably I've seen that leerob has linked back to the strict CSP example everywhere:

https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware

I really need help here 🙏 deeply appreciate any help in advance.

7 Replies

@Chinese Alligator I used the CSP strict example. And the nonce doesn't get applied to the** script tags** in head tag (inspecting source in devtools) or** inline styles** (tailwind) which is preventing me from implementing strict CSP. I see a bunch of outdated conversations online for older versions of nextjs and these conversations are dated 2021. Notably I've seen that leerob has linked back to the strict CSP example everywhere: https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware I really need help here 🙏 deeply appreciate any help in advance.
B33fb0n3
you can add it inside your middleware [like this](https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware):
import { NextRequest, NextResponse } from 'next/server'
 
export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()
 
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)
 
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  return response
}
Also: don't ping people that are not involved in your thread
Chinese AlligatorOP
That is the same code I aleady have, and its not working me:

My current observation is that when I add nonce-${nonce} in cspHeader's script-src or style-src then nonce="" is added, but its empty..

In my root layout, it is available:
const nonce = headers().get("x-nonce");
console.warn(`x-nonce: ${nonce}`) // <-- works
Chinese AlligatorOP
Saltwater Crocodile
Have you been able to solve this problem? Encountering the same error debugging now for more than 2 days
Chinese AlligatorOP
not yet, im working on other parts of my codebase for now