Was ist eine Content Security Policy?
Eine Content Security Policy, kurz CSP, ist ein Antwort-Header, der festlegt, woher eine Seite Skripte, Stile, Schriften, Bilder und Frames laden darf. Alles, was nicht auf der Liste steht, wird blockiert.
Ihre Hauptaufgabe ist es, Cross-Site-Scripting zu stoppen. Schafft es ein Angreifer, ein Skript in Ihre Seite einzuschleusen, führt der Browser es trotzdem nicht aus, denn es steht nicht auf der Liste. Deshalb macht eine gute Richtlinie viele gefährliche Fehler harmlos.
Schritt 1: Streng beginnen
Beginnen Sie mit der strengsten sinnvollen Richtlinie. Fügen Sie auf Apache eine Zeile in die .htaccess ein, die nur Dateien von Ihrer eigenen Website erlaubt:
Header always set Content-Security-Policy "default-src 'self'"Laden Sie die Seite danach neu. Sie öffnet sich noch, aber manche Teile können fehlen. In unserer Demo verschwand ein Banner für kostenlosen Versand, das ein kleines Inline-Skript einfügt, und die Schrift der Überschrift änderte sich. Das ist zu erwarten, denn die Richtlinie blockiert sie jetzt.
Schritt 2: Die Konsole lesen
Öffnen Sie die Entwicklertools des Browsers und sehen Sie sich die Konsole an. Jede blockierte Datei erscheint dort mit der Regel, die sie blockiert hat. In unserer Demo blockierte die Richtlinie das Stylesheet von Google Fonts und das Inline-Skript.
Diese Liste ist Ihre To-do-Liste. Gehen Sie sie Zeile für Zeile durch und fragen Sie jedes Mal: Brauche ich das wirklich? Falls nicht, entfernen Sie es von der Seite, statt es zu erlauben.
Schritt 3: Nur Nötiges erlauben
Fügen Sie jetzt genaue Ausnahmen hinzu. Für Google Fonts erlauben Sie Stile von fonts.googleapis.com und Schriftdateien von fonts.gstatic.com:
Header always set Content-Security-Policy "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"Inline-Skripte: einen Hash nutzen
Fügen Sie für ein kleines Inline-Skript seinen Hash zu script-src hinzu. Der Hash erlaubt genau dieses Skript und sonst nichts. Außerdem zeigt die Chrome-Konsole den Hash in der Fehlermeldung an. Kopieren Sie ihn in die Richtlinie:
script-src 'self' 'sha256-AbC123...='
Ändert sich das Skript oft, ist ein Nonce einfacher: Der Server fügt bei jeder Anfrage einen neuen Zufallswert in die Richtlinie und in jedes Skript-Tag ein. Auf diese Weise bleibt die Richtlinie streng.
Zuerst mit Report-Only testen
Schalten Sie auf einer Live-Website nie eine neue Richtlinie ohne Test ein. Senden Sie sie stattdessen als Content-Security-Policy-Report-Only. Dann meldet der Browser jedes Problem in der Konsole, blockiert aber nichts, sodass Besucher nie eine kaputte Seite sehen.
Header always set Content-Security-Policy-Report-Only "default-src 'self'"Öffnen Sie einige Tage lang jede Art von Seite: Startseite, Artikel, Kasse und Formulare. Bleibt die Konsole sauber, benennen Sie den Header in die echte Content-Security-Policy um.
Fertige Beispiele
Jede Website ist anders, nutzen Sie diese daher als Ausgangspunkt. Prüfen Sie sie danach mit der Konsole.
Eine einfache statische Website
default-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'Eine Website mit Google Analytics
default-src 'self'; script-src 'self' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://www.google-analytics.comDirektiven für jede Richtlinie
object-src 'none' blockiert alte Plugins, base-uri 'self' stoppt einen gefälschten Basis-Link, und frame-ancestors 'self' verhindert, dass fremde Websites Ihre Seiten einrahmen. Sie zerstören fast nie etwas.
So prüfen Sie Ihre Richtlinie
Prüfen Sie zuerst Ihre Live-Header mit unserem kostenlosen HTTP Header Checker. Er zeigt die genaue Richtlinie, die Besucher erhalten, und markiert fehlende oder schwache Teile.
Öffnen Sie danach die wichtigsten Seiten mit offener Konsole. Sehen Sie keine roten CSP-Fehler, passt die Richtlinie zur Website. Prüfen Sie schließlich nach jedem neuen Plugin, Widget oder Tracking-Code erneut, denn jedes braucht vielleicht eine eigene Ausnahme.
Häufige Fehler
'unsafe-inline'hinzufügen, damit die Fehler verschwinden. Es lässt auch eingeschleuste Skripte laufen, also genau das, was die Richtlinie stoppen soll.- Einen Platzhalter wie
https:in script-src nutzen, der Skripte von jeder Website erlaubt. - Eine neue Richtlinie ohne vorherigen Test in Report-Only einschalten.
- Zwei verschiedene Richtlinien von Server und Plugin senden; der Browser wendet beide an, daher gewinnt die strengste Regel.
- Die Richtlinie nach einem neuen Dienst nicht anpassen.
Kurz gesagt: streng beginnen, die Konsole lesen, genaue Hosts und Hashes erlauben und in Report-Only testen. Jede Direktive im Detail erklärt der MDN-Leitfaden zu CSP.
Fragen und Antworten
Was ist eine Content Security Policy?
Ein Antwort-Header, der dem Browser sagt, aus welchen Quellen eine Seite Skripte, Stile, Schriften und andere Dateien laden darf. Alles andere wird blockiert.
Warum geht meine Website nach dem Einrichten einer CSP kaputt?
Die Richtlinie blockiert Dateien, die nicht auf ihrer Liste stehen. Öffnen Sie daher die Konsole, lesen Sie jeden blockierten Eintrag und erlauben Sie nur, was Sie wirklich brauchen.
Was ist Content-Security-Policy-Report-Only?
Eine Testversion des Headers. Der Browser meldet jedes Problem, blockiert aber nichts, sodass Sie die Richtlinie gefahrlos anpassen.
Soll ich unsafe-inline nutzen?
Nein, denn es erlaubt jedes Inline-Skript, auch eingeschleuste. Nutzen Sie stattdessen einen Hash oder Nonce für die wenigen Skripte, die Sie brauchen.
Wie erlaube ich ein Inline-Skript?
Fügen Sie seinen sha256-Hash zu script-src hinzu. Die Chrome-Konsole zeigt den Hash in der Fehlermeldung, also können Sie ihn kopieren.
Was ist der Unterschied zwischen Hash und Nonce?
Ein Hash passt zu genau einem Skript. Ein Nonce ist dagegen ein Zufallswert, der sich bei jeder Anfrage ändert und in Richtlinie und Skript-Tag steht.
Wie erlaube ich Google Fonts in einer CSP?
Erlauben Sie fonts.googleapis.com in style-src und fonts.gstatic.com in font-src.
Hilft eine CSP der SEO?
Nicht direkt. Sie schützt jedoch Besucher und Website, was Ihre Seiten sicher und vertrauenswürdig hält.
Kann ich eine CSP per Meta-Tag setzen?
Ja, mit einem meta-http-equiv-Tag, allerdings funktionieren manche Direktiven wie frame-ancestors nur im echten Header.
Wie setze ich eine CSP auf Nginx?
Nutzen Sie add_header Content-Security-Policy "..." always; im Server-Block und laden Sie Nginx danach neu.
Funktioniert WordPress mit einer strengen CSP?
Im Frontend oft ja, aber viele Plugins fügen Inline-Skripte ein. Testen Sie deshalb in Report-Only und ergänzen Sie Hashes oder Nonces.
Was macht default-src?
Es ist die Rückfallregel für jede Dateiart ohne eigene Direktive, etwa script-src oder img-src.
Was ist frame-ancestors?
Eine Direktive, die festlegt, welche Websites Ihre Seite in einem Frame zeigen dürfen. Mit 'self' verhindern Sie also fremde Frames und damit Clickjacking.
Darf ich zwei CSP-Header haben?
Der Browser wendet beide an, und eine Datei muss beide bestehen. Dadurch wird die Seite meist strenger als geplant, deshalb behalten Sie nur einen.
Warum zeigt die Konsole CSP-Fehler von Erweiterungen?
Manche Browser-Erweiterungen schleusen Skripte ein und lösen Meldungen aus. Testen Sie daher in einem privaten Fenster.
Wie erlaube ich Bilder von einer anderen Domain?
Fügen Sie diese Domain zu img-src hinzu, zum Beispiel img-src 'self' https://images.example.com.
Was macht object-src 'none'?
Es blockiert alte Plugin-Inhalte wie Flash. Moderne Websites brauchen das nie, daher ist das Blockieren sicher.
Reicht eine CSP gegen XSS?
Sie ist eine starke zusätzliche Schicht, trotzdem müssen Sie Ausgaben maskieren und Eingaben auf dem Server prüfen.
Wie prüfe ich meine CSP?
Nutzen Sie zuerst unseren kostenlosen HTTP Header Checker für den Live-Header und öffnen Sie dann Ihre wichtigsten Seiten mit offener Konsole.
Prüft der SEO Checker die CSP?
Ja. Unser SEO Checker zeigt, ob der Header gesendet wird, und verlinkt diese Anleitung, wenn er fehlt.