Eine Content Security Policy (CSP) ist ein Sicherheitsmechanismus, der ueber einen HTTP-Header definiert, welche Inhaltsquellen ein Browser laden und ausfuehren darf. CSP ist die wirksamste Verteidigung gegen Cross-Site Scripting (XSS) und andere Code-Injection-Angriffe.
CSP folgt einem Allowlist-Ansatz: Alles, was nicht explizit erlaubt ist, wird blockiert. Das bedeutet, selbst wenn ein Angreifer schadhaften Code in die Seite einschleusen kann, wird der Browser die Ausfuehrung verweigern, weil die Quelle nicht in der Policy gelistet ist.
Grundlegende Direktiven
Die wichtigsten CSP-Direktiven
| Direktive | Kontrolliert | Beispiel |
|---|---|---|
default-src | Fallback fuer alle Ressourcentypen | 'self' |
script-src | JavaScript-Quellen | 'self' https://cdn.example.com |
style-src | CSS-Quellen | 'self' 'unsafe-inline' |
img-src | Bildquellen | 'self' https: data: |
font-src | Font-Quellen | 'self' https://fonts.gstatic.com |
connect-src | Fetch, XHR, WebSocket-Ziele | 'self' https://api.example.com |
frame-src | iFrame-Quellen | 'none' |
media-src | Audio- und Video-Quellen | 'self' |
object-src | Plugin-Quellen (Flash, Java) | 'none' |
base-uri | Erlaubte Base-URLs | 'self' |
form-action | Erlaubte Formular-Ziele | 'self' |
Quellenwerte
| Wert | Bedeutung |
|---|---|
'self' | Gleicher Origin wie das Dokument |
'none' | Keine Quelle erlaubt |
'unsafe-inline' | Inline-Scripts/-Styles erlaubt (unsicher) |
'unsafe-eval' | eval() und aehnliche Funktionen erlaubt (unsicher) |
'nonce-abc123' | Script mit passendem Nonce-Attribut erlaubt |
'sha256-...' | Script mit passendem Hash erlaubt |
https: | Alle HTTPS-Quellen |
data: | Data-URIs (z. B. inline Bilder) |
https://cdn.example.com | Spezifische Domain |
CSP in der Praxis
Einstieg: Report-Only-Modus
Statt sofort zu blockieren, kann CSP im Report-Only-Modus betrieben werden. Violations werden gemeldet, aber nicht blockiert:
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
Dieser Modus ist essentiell fuer die schrittweise Einfuehrung, da eine zu restriktive Policy die eigene Website lahmlegen kann.
Beispiel-Policy fuer eine Agentur-Website
Eine typische CSP fuer eine Webdesign-Agentur-Website:
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-{random}' https://www.googletagmanager.com;
style-src 'self' 'unsafe-inline';
img-src 'self' https: data:;
font-src 'self' https://fonts.gstatic.com;
connect-src 'self' https://www.google-analytics.com;
frame-src 'none';
object-src 'none';
base-uri 'self';
form-action 'self'
Nonce-basierte CSP
Anstatt 'unsafe-inline' fuer Scripts zu erlauben (was XSS-Schutz aufhebt), verwendet die Nonce-Methode einen einmaligen, zufaelligen Wert:
- Server generiert pro Request einen zufaelligen Nonce
- Nonce wird im CSP-Header und im Script-Tag gesetzt
- Nur Scripts mit dem korrekten Nonce werden ausgefuehrt
Dies ist die empfohlene Methode fuer moderne Webanwendungen.
CSP in Next.js
Next.js unterstuetzt CSP ueber:
- Middleware: CSP-Header dynamisch pro Request setzen (ideal fuer Nonce)
- next.config.js: Statische Security-Header in der Konfiguration
- Meta-Tag: Als Fallback im
<Head>(eingeschraenkte Funktionalitaet)
Herausforderungen in Next.js
- Inline-Styles von CSS-in-JS-Libraries erfordern Nonces oder
'unsafe-inline' - Third-Party-Scripts (Analytics, Chat-Widgets) muessen explizit erlaubt werden
- Server Components erleichtern die CSP-Implementierung, da weniger Client-JavaScript benoetigt wird
CSP und Performance
CSP hat minimalen Performance-Overhead. Die Header-Groesse ist vernachlaessigbar, und die Browser-seitige Policy-Evaluation ist schnell. Allerdings kann eine strikte CSP die Nutzung von CDNs und Third-Party-Resources einschraenken, was indirekten Einfluss auf die Ladegeschwindigkeit haben kann.
CSP und andere Sicherheits-Header
CSP ist ein Baustein im Sicherheits-Header-Stack:
| Header | Funktion |
|---|---|
| Content-Security-Policy | Ressourcen-Allowlist gegen XSS |
X-Content-Type-Options: nosniff | Verhindert MIME-Type-Sniffing |
X-Frame-Options: DENY | Verhindert Clickjacking (wird durch CSP frame-ancestors ersetzt) |
Strict-Transport-Security | Erzwingt HTTPS |
Referrer-Policy | Kontrolliert Referrer-Informationen |
Permissions-Policy | Kontrolliert Browser-APIs (Kamera, Mikrofon, Geolocation) |
Die Kombination aller Sicherheits-Header mit einer robusten CSP bildet die Grundlage fuer eine sichere Website — ein wichtiger Aspekt des technischen SEO und der DSGVO-Compliance.