Strict Content Security Policy (CSP) Implementation with Nonces

Snippet

Strict Content Security Policy (CSP) Implementation with Nonces

Nonces (number used once) allow you to safely execute inline scripts while maintaining a strict CSP that blocks unauthorized scripts. This is a critical security pattern in Next.js applications to prevent Cross-Site Scripting (XSS) attacks.

snippet.js
javascript
// app/layout.tsx
import { headers } from 'next/headers';
import Script from 'next/script';
 
export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const nonce = (await headers()).get('x-nonce') || '';
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="secure-analytics"
          nonce={nonce}
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{ __html: `window.initAnalytics('${nonce}')` }}
        />
      </body>
    </html>
  );
}

nextjs

Breakdown

headers().get('x-nonce')

Retrieving the unique nonce generated in middleware to authorize inline script execution.

nonce={nonce}

Passing the cryptographic token to the Next.js Script component to satisfy strict CSP headers.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Strict Content Security Policy (CSP) Implementation with Nonces

Related