Refused to apply inline style because it violates the Content Security Policy directive

[kuanjiahong]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 32562
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.1-canary.21 // Latest available version is detected (15.1.1-canary.21).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A

Which example does this report relate to?

with-strict-csp

What browser are you using? (if relevant)

Chrome Version 131.0.6778.205 (Official Build) (64-bit), Microsoft Edge Version 131.0.2903.112 (Official build) (64-bit)

How are you deploying your application? (if relevant)

next start, Vercel

Describe the Bug

It appears that some of Next.js built-in pages (e.g. not-found page) are unable to render its CSS styling because of the Content Security Policy (CSP) value style-src 'self' 'nonce-${nonce}';,

Console Error Message:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-ZmU5NjMwMzgtOWE0Yi00MGMyLTliNTgtZjc4NzNjNDVjODky'". Either the 'unsafe-inline' keyword, a hash ('sha256-B3Jk7Rws8l6DgOhoy0oMP4k8gk16joGygBpDXz05ZXo='), 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.

Console Error Screenshot:

Browser view Screenshot:

Expected Behavior

Since the not-found page is part of the Next.js framework, it should be able to render its CSS without any issue

The page should look like this:

To Reproduce

Development mode

1. npx create-next-app --example with-strict-csp with-strict-csp-app
2. npm run dev
3. Visit http://localhost:3000/adasd or any other route
4. Open the browser DevTools with Ctrl + Shift + I
5. Click the Console tab to see the console error message
6. You will see the 404 page is shown without CSS styling applied. The Console will also show the error message

Production mode

1. npx create-next-app --example with-strict-csp with-strict-csp-app
2. npm run build
3. npm run start
4. Visit http://localhost:3000/adasd or any other route
5. Open the browser DevTools with Ctrl + Shift + I
6. Click the Console tab to see the console error message
7. You will see the 404 page is shown without CSS styling applied. The Console will also show the error message