Why does Next.js break with a strict CSP?

Next.js generates inline scripts for hydration. These inline scripts are blocked by a strict CSP unless you use nonces or unsafe-inline. Nonces are the secure approach.

What is unsafe-inline and why avoid it?

unsafe-inline allows any inline script to run, which defeats XSS protection entirely. A nonce lets specific trusted scripts run while blocking injected scripts.

How do I generate a nonce in Next.js?

Generate a random base64 string in middleware.ts, add it to the CSP header, and pass it to your layout via a response header that the layout reads.

CSP

Fix CSP Header in Next.js — Nonce-Based Approach

Updated April 2026

 Reading this article? Verify your fix in real-time. Scan your Next.js page CSP — CSPFixer →

Next.js generates inline scripts for hydration that a strict CSP will block. Adding unsafe-inline fixes the error but defeats the purpose of CSP entirely. Nonces are the right solution — a random value per request that lets specific scripts run.

Browser Console Error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash, or a nonce is required to enable inline execution.

Step 1 — Generate nonce in middleware.ts

// middleware.ts
import { NextResponse } from 'next/server';
import crypto from 'crypto';

export function middleware(request) { const nonce = Buffer.from(crypto.randomUUID()).toString('base64'); const csp = [ "default-src 'self'", `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`, "style-src 'self' 'unsafe-inline'", "img-src 'self' data: https:", "font-src 'self'", "object-src 'none'", "base-uri 'self'", "frame-ancestors 'none'", ].join('; '); const response = NextResponse.next(); response.headers.set('Content-Security-Policy', csp); response.headers.set('x-nonce', nonce); // pass to layout return response;
}

export const config = { matcher: '/((?!_next/static|_next/image|favicon.ico).*)' };

Step 2 — Read nonce in root layout

// app/layout.tsx
import { headers } from 'next/headers';

export default function RootLayout({ children }) { const nonce = headers().get('x-nonce') || ''; return ( <html> <head> <script nonce={nonce} dangerouslySetInnerHTML={{ __html: `window.__NONCE__ = "${nonce}";` }} /> </head> <body>{children}</body> </html> );
}

Step 3 — Pass nonce to Script components

// For next/script components
import Script from 'next/script';

<Script nonce={nonce} src="https://example.com/script.js" strategy="afterInteractive"
/>

Third-party scripts with nonces

For Google Analytics, Hotjar, or any third-party script, pass the nonce and add their domains to script-src:

const csp = [ `script-src 'self' 'nonce-${nonce}' https://www.googletagmanager.com`, "connect-src 'self' https://www.google-analytics.com",
].join('; ');

Not sure which resources your page is loading? CSPFixer scans your live URL and generates a CSP based on what it finds.

Scan your page CSP live → CSPFixer