javascript / expert
Snippet
Sichere Inline-Skripte mit CSP-Nonces
Um Cross-Site Scripting (XSS) zu verhindern, kann eine Content Security Policy (CSP) alle Inline-Skripte verbieten, es sei denn, sie enthalten eine kryptografische 'Nonce'. In Next.js generieren Sie eine eindeutige Nonce pro Anfrage in der Middleware und übergeben diese an Ihre Komponenten, um spezifische vertrauenswürdige Skripte zu autorisieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// middleware.tsimport { NextRequest, NextResponse } from 'next/server';export function middleware(request: NextRequest) {const nonce = Buffer.from(crypto.randomUUID()).toString('base64');const cspHeader = `script-src 'self' 'nonce-${nonce}'`;const response = NextResponse.next();response.headers.set('Content-Security-Policy', cspHeader);response.headers.set('x-nonce', nonce);return response;}// layout.tsxexport default function Layout({ children }) {const nonce = headers().get('x-nonce');return (<html><body>{children}<script nonce={nonce} dangerouslySetInnerHTML={{ __html: `console.log('Safe!')` }} /></body></html>);}
nextjs
Erklärung
1
nonce = crypto.randomUUID()
Generiert eine kryptografisch starke, eindeutige Kennung für die aktuelle Anfrage.
2
script-src 'nonce-${nonce}'
Weist den Browser an, nur Inline-Skripte auszuführen, die genau diese passende Nonce enthalten.