CSP error on default fonts #85452

fortinlouis · 2025-10-28T11:59:39Z

fortinlouis
Oct 28, 2025

Summary

I am trying to set up a CSP policy. Since I am using MUI Components, I added a nonce (that I wrote in my .env for now)
Here is my middleware :

import { NextRequest, NextResponse } from 'next/server'

const publicRoutes = ['/form']

const nonce = process.env.NONCE as string

export async function middleware(req: NextRequest) {
  if (!publicRoutes.find((route) => req.nextUrl.pathname.startsWith(route))) {
    const defaultUrl = new URL(`/form`, req.url)
    return NextResponse.redirect(defaultUrl)
  }

  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self';
    font-src 'self' https://fonts.cdnfonts.com;
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    frame-src 'self';
    connect-src 'self';
  `
  const contentSecurityPolicyHeader = cspHeader.replace(/\s{2,}/g, ' ').trim()

  const requestHeaders = new Headers(req.headers)
  requestHeaders.set('x-nonce', nonce)
  requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeader)
  requestHeaders.set('x-mss-script-nonce', nonce)
  requestHeaders.set('x-url', req.url)

  const response = NextResponse.next({ request: { headers: requestHeaders } })
  response.headers.set('Content-Security-Policy', contentSecurityPolicyHeader)
  response.headers.set('x-mss-script-nonce', nonce)
  response.headers.set('X-Content-Type-Options', 'nosniff')
  // TODO : set csp header
  // response.headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload')

  return response
}

export const config = {
  matcher: [
    {
      // Appliquer le middleware uniquement sur les routes spécifiées
      source: '/((?!_next/static|_next/image|favicon.ico|images|logos|api/auth).*)',
      missing: [
        { type: 'header', key: 'next-router-prefetch' },
        { type: 'header', key: 'purpose', value: 'prefetch' },
      ],
    },
  ],
}

I'm getting my nonce in my app/layout.tsx component so I an pass it to mui. I also generate my local fonts in this component :

const gilroy = localFont({
  src: [
    { path: '../../public/fonts/Gilroy-Regular.woff', weight: '400', style: 'normal' },
    { path: '../../public/fonts/Gilroy-Bold.woff', weight: '800', style: 'normal' },
    { path: '../../public/fonts/Gilroy-Medium.woff', weight: '500', style: 'normal' },
    { path: '../../public/fonts/Gilroy-Light.woff', weight: '300', style: 'normal' },
    { path: '../../public/fonts/Gilroy-Heavy.woff', weight: '700', style: 'normal' },
  ],
  variable: '--font-gilroy',
  display: 'swap',
})

interface Props {
  children: React.ReactNode
}

const RootLayout = async ({ children }: Readonly<Props>) => {
  const messages = await getMessages()
  const nonce = process.env.NONCE as string

  return (
    <html lang={Locale.FR} className={gilroy.className}>
      <head>
        <meta name="csp-nonce" content={nonce} />
      </head>
      <body>
        <AppRouterCacheProvider options={{ key: 'mui', nonce, prepend: true }}>
          <NextIntlClientProvider messages={messages}>
            <ThemeRegistry>{children}</ThemeRegistry>
          </NextIntlClientProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  )
}

export default RootLayout

And I use ThemeRegistry to set up my emotionCache :

const fontFamilies = [
  'Gilroy-Regular',
  'Gilroy-Medium',
  'Gilroy-Bold',
  'Gilroy-Heavy',
  'Gilroy-Light',
  'sans-serif',
].join(',')

const theme = createTheme({
  typography: {
    fontFamily: fontFamilies,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 800,
  },
})

export default function ThemeRegistry({ children }: { children: React.ReactNode; nonce: string }) {
  const [emotionCache, setEmotionCache] = useState<EmotionCache | null>(null)

  useEffect(() => {
    const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? ''
    setEmotionCache(createEmotionCache(nonce))
  }, [])

  if (!emotionCache) {
    return null
  }

  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </CacheProvider>
  )
}

Despite all my efforts, I still have many errors in my console :
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-ODk1OWJkMDItODUxZS00OTNlLWIzNWYtMGEzMzA5NDM4NTE1'". Either the 'unsafe-inline' keyword, a hash ('sha256-XbNwOSjMIgSNj3ewh1FPDgy/T33iTuvdeceTh/VSFZg='), or a nonce ('nonce-...') is required to enable inline execution.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-ODk1OWJkMDItODUxZS00OTNlLWIzNWYtMGEzMzA5NDM4NTE1'". Either the 'unsafe-inline' keyword, a hash ('sha256-tzBMNZ7l8nZ/8oEITbEGeJAgNHg7KpJOduvhc+LO138='), or a nonce ('nonce-...') is required to enable inline execution.

I don't know where these a from. The only clue I have is this <style> tag with no nonce in the header that contains the default Geist font from Next. But since I set up a local font, I do not expect to see it in my header ...

What do you think ? Any clue or recommandation ? Help would be appreciated

Additional information

No response

Example

No response

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

CSP error on default fonts #85452

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

CSP error on default fonts #85452

Uh oh!

fortinlouis Oct 28, 2025

Summary

Additional information

Example

Replies: 0 comments

fortinlouis
Oct 28, 2025