Was ist eine Content Security Policy (CSP)?
Wenn Sie bereits einmal Ihre Webseite mit den Lighthouse Tools von Google geprüft und optimiert haben, sind Sie vielleicht bereits schonmal über den Punkt „Ensure CSP is effective against XSS attacks“ gestolpert.
Was genau ist eine CSP? Was genau sich dahinter verbirgt, ist recht einfach erklärt. Eine der häufigsten Angriffsmethoden auf Webseiten im Internet ist das sogenannte „Cross-Site-Scripting“ oder kurz „XSS“. Mit diesem Angriffsvektor können Angreifer:innen bösartigen Code in eine Webseite einschleusen, welcher bei den Besucher:innen der Webseite ausgeführt wird. Die Konsequenz: Datenlecks, Identitätsdiebstahl und mehr.
Gegen diesen Angriffsvektor ist die Content Security Policy, kurz CSP, eine Maßnahme, um Webseiten besser vor XSS Attacken zu schützen. Hierbei handelt es sich um einen HTTP-Header. Die Grundidee von CSP ist, dass genau festgelegt und kontrolliert wird, welche Ressourcen einer Webseite aus welchen Quellen geladen werden dürfen und welche nicht. Hierbei wird eine Sicherheitsrichtlinie, die CSP, definiert.
Diese gibt an, ob und von wo beispielsweise Skripte, Stylesheets oder Schriftarten geladen werden dürfen.
Da WordPress im Internet eine riesige Verbreitung hat, sind solche Webseiten für Angreifer:innen besonders interessant. Daher sollten Betreiber:innen von WordPress Webseiten auch über die Implementierung einer CSP nachdenken.
Warum sollte ich CSP auf meiner WordPress Seite benutzen?
WordPress Webseiten sind ein beliebtes Angriffsziel im Internet. Dies liegt zum einen an der breitflächigen Nutzung von WordPress, als auch an der Vielzahl von Plugins die es im WordPress Kosmos gibt. Und wer schaut sich die Quellcodes der einzelnen Plugins, die auf einer WordPress Seite benutzt werden, selber an?
Daher sollte, wenn möglich, beim Betreiben einer WordPress Seite auch eine CSP implementiert werden. Diese bietet wie bereits erwähnt zusätzlichen Schutz vor XSS Angriffen und gibt die Möglichkeit zu kontrollieren, welche Ressourcen aus welchen Quellen von unserer Webseite zugelassen sind.
Grundlagen von CSP
Wo kann ich eine CSP implementieren?
Es gibt vier Möglichkeiten, um eine CSP auf Ihrer Webseite zu implementieren.
Wie kann ich CSP per HTML implementieren? Die einfachste Möglichkeit, einen CSP-Header zu implementieren, ist die Variante via HTML. Hierbei wird in einem -Tag der Header implementiert. Von dieser Methode ist jedoch abzuraten. Wenn der Server selber eine Implementierung für CSP hat, dann wird diese immer Vorrang haben und den per HTML eingestellten Header überschreiben.
Wie kann ich CSP serverseitig per Skriptsprache implementieren? Eine weitere Möglichkeit, um einen CSP-Header zu implementieren, ist die Verwendung von serverseitigen Skriptsprachen. Hier kann beispielsweise PHP benutzt werden.
Wie kann ich CSP serverseitig per Konfiguration des Servers implementieren? Die dritte Möglichkeit ist die Variante, eine CSP direkt in der Konfiguration des Servers zu implementieren. Hierbei ist es egal, ob Apache oder Nginx benutzt wird.
Wie kann ich CSP per Plugin implementieren? Die letzte Möglichkeit besteht in der Nutzung eines Plugins, um die CSP auf Ihrer WordPress Seite einzubinden.
Aufbau eines CSP-Headers
Eine CSP ist immer im selben Format aufgebaut. Sie geben zuerst eine Direktive an mit der Sie bestimmen, um welche Art von Ressource es sich handelt, für die Sie eine Richtlinie festlegen.
Dies kann beispielsweise die Direktive script-src sein, wenn es sich um die Ressource JavaScript handelt. Dieser Direktive geben Sie anschließend mindestens einen Wert an, der festlegt, aus welchen Quellen die Direktive benutzt werden darf. Dies kann beispielsweise eine explizite URL sein.
Der Aufbau einer CSP selbst sieht wie folgt aus:
Content-Security-Policy "DIREKTIVE1 'WERT1' 'WERT2'; DIREKTIVE2 'WERT1'"Syntax für eine CSP
Um Beispielsweise eine CSP in PHP zu implementieren, die den Zugriff auf Skripte von der URL „js.website.com“ zulässt und Stylesheets von der eigenen Webseite sowie von der URL „style.website.com“, könnte man folgendes Skript einsetzen:
<?php
header("Content-Security-Policy: script-src 'js.website.com'; style-src 'self' 'style.website.com'");Beispiel für eine CSP in PHP
Welche Direktiven und Werte gibt es für CSP?
Eine gute Übersicht mit entsprechenden Erläuterungen lässt sich im Wiki von SelfHTML finden.
Worauf muss ich beim Einbinden einer CSP in WordPress achten?
Durch das strikte Festlegen von Quellen, die für Ihre Ressourcen auf einer Webseite nutzbar sind, können bei falscher Konfiguration Fehler entstehen oder Ihre Webseite wird sogar unbrauchbar (bis der hinzugefügte Code wieder entfernt wurde).
Achten Sie daher immer darauf, vor der Erstellung einer Content Security Policy ein Backup Ihrer Webseite zu erstellen. Gehen Sie außerdem bei der Implementierung Schritt für Schritt vor. Wenn Sie merken, dass die Webseite fehlerhaft angezeigt oder ausgeführt wird, passen Sie die Direktiven und die Werte entsprechend an.
Ein wichtiges Hilfsmittel hierfür ist die Konsole in den Entwicklertools Ihres Browsers. Hier sehen Sie bereits, ob und welche Ressourcen fehlerhaft oder garnicht mehr eingebunden werden und können entsprechende Anpassungen schneller umsetzen. Einen genaueren Ablauf finden Sie im weiteren Verlauf dieses Artikels.
Wie implementiere ich CSP auf meiner WordPress Seite?
HTML
Wie implementiere ich eine CSP in WordPress mit HTML? Um eine CSP in HTML zu implementieren, wird der -Tag genutzt. Im folgenden dazu ein Syntax- und ein konkretes Beispiel.
Um die CSP im HTML Ihrer WordPress Seite zu implementieren, müssen Sie den Code in Ihrem Header einfügen. Dieser kann je nach gewähltem Theme einen unterschiedlichen Speicherort haben, wodurch eine allgemeingültige Anleitung hierfür nicht genau erklärbar ist.
Ansonsten können Sie auch ein Plugin verwenden, welches Custom Code in Ihrem Theme hinzufügt und auf diese Weise den Code in Ihrem Header einfügen.
<meta http-equiv="Content-Security-Policy" content="DIREKTIVE1 'WERT1'; DIREKTIVE2 'WERT2'">Syntax einer CSP in HTML
Das folgende Beispiel definiert, dass grundsätzlich alle Inhalte nur vom selben Server stammen dürfen, wie die CSP. Außerdem wird definiert, dass Stylesheets von „style.website.com“ geladen werden dürfen.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'">Beispiel einer CSP in HTML
PHP
Wie implementiere ich eine CSP per PHP in WordPress? Die Implementierung einer CSP in WordPress mit PHP ist die Variante die Sie nutzen sollten, wenn Sie an die Konfiguration des Servers nicht herankommen.
Der entsprechende PHP Code sollte unbedingt in einer PHP Datei, beispielsweise der functions.php, eines erstellten Child-Themes abgelegt werden. Wird der Code in einem Parent-Theme abgelegt laufen Sie Gefahr, dass der Code beim nächsten Update des Parent-Themes überschrieben wird.
<?php
header("Content-Security-Policy: DIREKTIVE1 'WERT1'; DIREKTIVE2 'WERT2'");Syntax einer CSP in PHP
Im folgenden Beispiel wird die gleiche Content Security Policy wie im HTML Beispiel implementiert.
<?php
header("Content-Security-Policy: default-src 'self'; style-src 'self'");Beispiel einer CSP in PHP
Apache (.htaccess) / Nginx (security.conf) / IIS (web.config)
Apache (.htaccess)
Wie wird eine CSP in WordPress mit Apache implementiert? Um Ihre CSP in WordPress via .htaccess zu implementieren, müssen Sie die .htaccess die sich im Root Ordner Ihrer WordPress Installation befindet anpassen. Wichtig ist hierbei, dass Sie Ihre Änderungen nicht innerhalb des Bereiches einfügen, welcher mit # BEGIN WordPress beginnt und mit #END WordPress.
Dieser Bereich wird von WordPress selber genutzt. Fügen Sie Ihren CSP hier ein, kann er mit zukünftigen Updates von WordPress überschrieben und damit gelöscht werden.
<ifModule mod_headers.c>
Header set Content-Security-Policy "DIREKTIVE1 'WERT1'; DIREKTIVE2 'WERT1' 'WERT2'"
</IfModule>Syntax einer CSP in .htaccess
Das folgende Codebeispiel ist inhaltlich identisch zu den bisherigen mit den Varianten HTML und PHP.
<ifModule mod_headers.c>
Header set Content-Security-Policy "default-src 'self'; style-src 'self'"
</IfModule>Beispiel einer CSP in Apache, .htaccess
Nginx (security.conf)
Wie wird eine CSP in WordPress mit Nginx implementiert? Um Ihre Content Security Policy auf Ihrem Nginx Server zu implementieren, gehen Sie ähnlich vor wie bei den anderen Methoden. Ihre Policy fügen Sie in die security.conf ein.
add_header Content-Security-Policy "DIREKTIVE1 'WERT1'; DIREKTIVE2 'WERT1' 'WERT2'"Syntax einer CSP in Nginx, security.conf
Erneut ein praktisches Beispiel für die Implementierung der CSP, in diesem Fall für Nginx
add_header Content-Security-Policy "default-src 'self'; style-src 'self'";Beispiel einer CSP in Nginx, security.conf
IIS (web.config)
Wie wird eine CSP in WordPress mit IIS implementiert? Die Implementierung einer CSP für Ihre WordPress Seite in IIS ist vom Gedanken her gleich, jedoch ist die Syntax hier abweichender als bei den Beispielen davor. Die CSP wird in die web.config eingefügt.
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="DIREKTIVE1 'WERT1'; DIREKTIVE2 'WERT1' 'WERT2';" />
</customHeaders>
</httpProtocol>
</system.webServer>Syntax einer CSP in IIS, web.config
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="default-src 'self'; style-src 'self';" />
</customHeaders>
</httpProtocol>
</system.webServer>Beispiel einer CSP in IIS, web.config
Per Plugin Content Security Policy in WordPress implementieren
Die letzte Möglichkeit zur Implementierung Ihrer CSP in WordPress, ist die Implementierung mithilfe von Plugins. Hierfür gibt es eine Vielzahl von Plugins, die diese Aufgabe erfüllen können. Beispiele für solche Plugins sind der CSP Manager oder das Plugin HTTP Headers. Manche Plugins, die primär einen anderen Zwecks erfüllen, besitzen diese Funktionalität zusätzlich. Hierfür lässt sich das Caching Plugin W3 Total Cache als Beispiel nennen, welches wir persönlich ebenfalls auf einigen Webseiten nutzen und wärmstens empfehlen können.
Wie passe ich die CSP für meine WordPress Seite an?
Um die CSP für Ihre WordPress Seite korrekt umzusetzen ist es notwendig in Erfahrung zu bringen, welche Ressourcen Ihre Seite einbindet und von wo diese eingebunden werden. Wenn Sie sich darüber nicht im Klaren sind, dann kann ein Blick in die Entwicklertools Ihres Browsers helfen. Öffnen Sie Ihre Webseite, öffnen Sie die Entwicklertools und navigieren Sie zu dem Tab „Netzwerkanalyse“. Aktualisieren Sie Ihre Seite nun neu. Anschließend sehen sie, welche Skripte, Stylesheets und co. von externen Quellen auf Ihrer Seite abgerufen werden.
Zusätzlich müssen Sie sich darüber im Klaren sein, was für Ressourcen Sie innerhalb Ihrer Seite verwenden. Binden Sie Skripte ein? Binden Sie Schriftarten ein? Sie benötigen alle Ressourcen, die eine CSP implementieren kann und die Ihre Webseite benutzt, um Ihre CSP optimal einzurichten.
Sie können auch damit starten, eine sehr scharfe und restriktive CSP zu implementieren und diese dann Stück für Stück so anpassen, bis alle Ressourcen Ihrer Seite korrekt geladen werden. Hierbei starten Sie beispielsweise mit einer CSP mit den DIrektiven script-src und style-src und stellen beide auf ’self‘.
Wie teste ich meine Content Security Policy?
Wenn Sie Ihre Content Security Policy wie im vorherigen Kapitel beschrieben eingestellt haben, kann es passieren, dass Teile Ihrer Webseite nicht mehr ordnungsgemäß laden. Zusätzlich finden Sie in der Konsole dann einen Hinweis darauf, dass Teile nicht mehr anständig geladen werden können.
Wenn Sie dies sehen wissen Sie, dass Ihre aktuelle CSP Ressourcen die von Ihrer Webseite benötigt werden nicht korrekt lädt (in diesem Beispiel style-src und script-src). Hier können Sie nun an die entsprechenden Direktiven gehen und sie mit anderen Werten anpassen, die nicht so scharf wie ’self‘ sind, bis die Funktionalität Ihrer Webseite wieder gewährleistet ist.
Diesen Vorgang wiederholen Sie für alle Direktiven, bis alle korrekt eingestellt sind und Ihre Webseite wieder fehlerfrei funktioniert.
Externe Tools zum Testen deiner CSP in WordPress
Es gibt hilfreiche Webseiten, die Ihre CSP Konfiguration überprüfen und mit denen Sie sehen können, ob und welche CSP Sie aktuell korrekt konfiguriert haben. Gute Tools hierfür sind beispielsweise:
Welche Probleme können bei der Nutzung von CSP mit WordPress auftreten?
Eine fehlerhafte CSP Konfiguration kann, wie im Abschnitt zuvor bereits erwähnt, zu Beeinträchtigungen und Fehlern auf Ihrer Webseite führen. Sobald die Direktiven korrekt eingestellt sind oder Sie Ihre CSP komplett entfernen, ist der Ursprungszustand wieder gegeben und Ihre Webseite funktioniert wieder wie zuvor.
CSP WordPress: Best Practices
Ein wichtiger Punkt bei der Implementierung von CSP in WordPress, ist die Vermeidung von Werten wie externen Webseiten als Quellen, von dem Wert ‚unsafe-inline‘ sowie von dem Wert ‚unsafe-eval‘. Diese Werte bieten weiterhin eine größere Möglichkeit für Angreifer:innen, als die Verwendung von ’self‘.
Da dies jedoch nicht immer möglich ist (beispielsweise bei der Verwendung von bestimmten Plugins wie Pagebuildern), müssen Sie selber herumprobieren, inwieweit Sie diese verwenden können bzw. müssen.
Abschließende Worte zum Thema
Die korrekte Einrichtung einer Content Security Policy in WordPress kann Zeit erfordern und nervenraubend sein. Die Implementierung der CSP ist jedoch ein wichtiger Schritt, um Ihre Webseite sicherer zu machen. Daher sollte sie immer in Erwägung gezogen werden und entweder selbst, oder von Expert:innen durchgeführt werden.
Am Ende gilt: selbst eine vergleichsweise lockere CSP, die beispielsweise auf Werte wie unsafe-inline zurückgreifen muss, ist sicherer, als garkeine CSP. Je restriktiver und schärfer eine CSP ist, desto besser ist auch der Mehrwert an Schutz, den sie bietet.
Weiterführende Ressourcen
Die Content Security Policy ist nur ein Teil der HTTP Security Headers. Informieren Sie sich rund um dieses Thema im Ganzen, wenn Sie schon die CSP verinnerlicht haben.
