Snippet

Strikte Content Security Policy (CSP) Implementierung mit Nonces

Nonces (einmalig verwendete Nummern) ermöglichen die sichere Ausführung von Inline-Skripten unter Beibehaltung einer strikten CSP, die unautorisierte Skripte blockiert. Dies ist ein kritisches Sicherheitsmuster in Next.js-Anwendungen zur Vermeidung von XSS-Angriffen.

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

Erklärung

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

Ruft die in der Middleware generierte eindeutige Nonce ab, um die Ausführung von Inline-Skripten zu autorisieren.

nonce={nonce}

Übergibt das kryptografische Token an die Next.js-Script-Komponente, um strikte CSP-Header zu erfüllen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Strikte Content Security Policy (CSP) Implementierung mit Nonces

Verwandt