javascript / expert
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// app/layout.tsximport { 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}<Scriptid="secure-analytics"nonce={nonce}strategy="afterInteractive"dangerouslySetInnerHTML={{ __html: `window.initAnalytics('${nonce}')` }}/></body></html>);}
nextjs
Erklärung
1
headers().get('x-nonce')
Ruft die in der Middleware generierte eindeutige Nonce ab, um die Ausführung von Inline-Skripten zu autorisieren.
2
nonce={nonce}
Übergibt das kryptografische Token an die Next.js-Script-Komponente, um strikte CSP-Header zu erfüllen.