Content Security Policy für React-Apps

Content Security Policy (CSP) ist ein HTTP-Antwort-Header, der dem Browser mitteilt, welche Inhaltsquellen vertrauenswürdig sind. Indem Sie exakt festlegen, welche Skripte, Styles, Bilder und Schriftarten geladen werden dürfen, verhindert CSP die Ausführung eingeschleuster schädlicher Inhalte – selbst wenn eine XSS-Schwachstelle einem Angreifer ermöglicht, HTML in die Seite einzuschleusen.

default-src 'self' legt die Grundlage fest: Alle Ressourcentypen (Skripte, Styles, Bilder, Schriftarten und Frames) dürfen nur von derselben Origin geladen werden. script-src 'self' beschränkt das Laden von Skripten auf dieselbe Origin und blockiert Skripte von externen CDNs, sofern diese nicht ausdrücklich aufgeführt sind. Zusammen bilden diese beiden Direktiven das Fundament einer restriktiven CSP.

eval() wandelt eine Zeichenkette zur Laufzeit in ausführbaren Code um – genau das, was XSS-Payloads benötigen. Eine CSP mit script-src 'self' (ohne 'unsafe-eval') blockiert eval() und verwandte Funktionen wie new Function() und setTimeout(string). Dadurch wird eine große Klasse von XSS-Payload-Ausführungen verhindert.

'strict-dynamic' in script-src gewährt Skripten Vertrauen, die von bereits vertrauenswürdigen Skripten geladen werden. Dies ermöglicht dynamische Skriptladeverfahren, wie sie von Bundlern verwendet werden, ohne dass Sie jede CDN-URL auf eine Whitelist setzen müssen. Ein vertrauenswürdiges Skript kann zusätzliche Skripte laden, die dieses Vertrauen erben.

Wenn Ihre Anwendung ein bestimmtes Inline-Skript benötigt (etwa ein Initialisierungs-Snippet für Analytics), können Sie dessen SHA-256-Hash berechnen und 'sha256-base64hash' zu script-src hinzufügen. Nur Skripte, die genau diesem Hash entsprechen, dürfen inline ausgeführt werden. Jedes von einem Angreifer eingeschleuste Skript hat einen anderen Hash und wird blockiert.

Eine Nonce ist ein kryptografisch zufällig erzeugter Wert, den der Server für jede Anfrage generiert. Der Server fügt die Nonce sowohl in das Script-Tag (<script nonce="abc123">) als auch in den CSP-Header (script-src 'nonce-abc123') ein. Nur Skripte mit der richtigen Nonce werden ausgeführt. Angreifer können die Nonce nicht vorhersagen und können sie daher für eingeschleuste Skripte nicht verwenden.

CSP unterstützt die Meldung von Verstößen über report-uri /csp-violation-endpoint oder die neuere Direktive report-to. Wenn der Browser eine Ressource aufgrund von CSP blockiert, sendet er einen JSON-Bericht an den Endpunkt. Die Überwachung dieser Berichte hilft Ihnen, sowohl legitime Konfigurationsprobleme als auch aktive Angriffsversuche zu erkennen.

Fügen Sie in Next.js CSP-Header in der Middleware hinzu: Erstellen Sie middleware.ts, generieren Sie eine Nonce, setzen Sie den Content-Security-Policy-Header und übergeben Sie die Nonce über einen Antwort-Header an die Seite. Das Seitenlayout liest die Nonce aus dem Header und wendet sie auf alle Inline-Skripte und style-Tags an.

Content-Security-Policy-Report-Only ist der Testmodus: Der Browser setzt keine Richtlinie durch, sendet aber für alles, was blockiert worden wäre, Berichte über Verstöße. Stellen Sie zunächst im Report-Only-Modus bereit, beheben Sie alle Verstöße und wechseln Sie dann zum durchsetzenden Content-Security-Policy-Header, damit die Anwendung nicht beschädigt wird.

Wenn CSP eine Ressource blockiert, zeigt die Chrome-DevTools-Konsole eine rote Fehlermeldung mit der blockierten URL und der verletzten Direktive an. Diese Meldungen sind während der Entwicklung und des Testens äußerst hilfreich. Jeder Verstoß muss behoben werden, entweder durch Anpassung der Richtlinie, Verschieben der Ressource zu einer erlaubten Quelle oder Verwendung einer Nonce bzw. eines Hashes.

Eine praxistaugliche CSP für eine React-SPA: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. Die Direktive frame-ancestors 'none' verhindert außerdem Clickjacking, indem sie das Einbetten Ihrer App in Iframes blockiert.

Was verhindert script-src 'self' in einer Content Security Policy?

CSP ist ein HTTP-Header, der vertrauenswürdige Inhaltsquellen festlegt. default-src 'self' und script-src 'self' blockieren externe Skripte und eval. Inline-Skripte können über Hashes oder Nonces erlaubt werden. 'strict-dynamic' unterstützt das dynamische Laden von Skripten. Verwenden Sie Content-Security-Policy-Report-Only, um zunächst zu testen, bevor Sie die Richtlinie durchsetzen. Next.js implementiert CSP über Middleware. Die DevTools-Konsole zeigt Verstöße in Echtzeit an.