CSP Header für mehr Sicherheit auf Webseiten

Sicherheit und Datenschutz ist beim betreiben einer Webseite sehr wichtig. Gerade bei Open Source CMS Systemen, wie zum Beispiel WordPress werden oft Daten im Hintergrund an externe Dienstleister versendet, ohne das der Betreiber dies weis oder eingestellt hat. Jeder Plugin ist meist nicht mit dem Fokus auf Sicherheit und Datenschutz programiert worden. Daher ist es wichtig, selber und mit einfachen Mitteln die Sicherheit zu steigern.

CSP Header und Meta Tags

Content Security Policies ermöglichen es Webseitenbetreibern den Abfluss von Daten zu minimieren und mögliche Datenleaks zu minimieren.

Eine Content Security Policy ist ein Eintrag im Header des Webserver oder im Head einer Webseite. Jeder Browser liest diese Meta Tags aus und folgt diesen beim Laden der Webseite. Wenn ein Meta Tag sagt, "Lade keine externen Ressourcen, sondern nur lokale von dieser URL (Domain)" werden keine Ressourcen von Google, Facebook, Youtube und Co geladen.

Gerade bei PHP Anwendungen und Angular oder Node Anwendungen ist eine CSP sehr wichtig, da diese oft auf externe und nicht datenschutzfreundliche Ressourcen auf CDNs zugreifen.

Ein CSP kann so aussehen:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' (z.B. matomo.js);
    style-src 'self' 'unsafe-inline';
    frame-src 'self' (z.B. matomo.js);
    img-src 'self' data: (z.B. matomo.js);
    object-src 'none'">

<meta http-equiv="X-Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' (z.B. matomo.js);
    style-src 'self' 'unsafe-inline';
    frame-src 'self' (z.B. matomo.js);
    img-src 'self' data: (z.B. matomo.js);
    object-src 'none'">

<meta http-equiv="X-WebKit-CSP" content="
    default-src 'self';
    script-src 'self' (z.B. matomo.js);
    style-src 'self' 'unsafe-inline';
    frame-src 'self' (z.B. matomo.js);
    img-src 'self' data: (z.B. matomo.js);
    object-src 'none'">

Zum aktuellen Zeitpunkt ist es Sinnvoll, drei Policies anzulegen, da Firefox, Chrome, Safarie und Internet Explorer unterschiedliche Polisies anwenden.

Erklärung

Default-Src stellt die Option dar, die Verwendet wird, wenn keine der anderen Polisies greift. "self" beschreibt den lokalen Server, gleiche Domain.

Script-Src stellt die Policy für JS Scripts dar. Hier ist wichtig, zu schauen, dass keine Inline Scripts im Code vorhanden sind, da diese nicht mehr geladen werden. Das führt meist zu fehlern. Wenn Matomo oder Google Analytics eingesetzt wird, muss hier eine Domain als Src eingesetzt werden.

Style-Src wird bei Styles angewendet. Hier kann auf inline meist nicht verzichtet werden. Daher muss/sollte 'unsave-inline' eingefügt werden.

Frame-Src ist dann sichtig, wenn zum Beispiel Matomo eingesetzt wird und der Opt-Out angezeigt werden soll. Das Opt-Out von Matomo wird als Frame geladen und kann nur so funktionieren.

Img-Src ist wichtig, wenn Bilder von externen Ressourcen geladen werden, z.B. Pixabay oder Google. Beim Einsatz von Matomo ohne Cookies ist es wichtig, hier den Matomoserver einzutragen, da dieser sonst keinen Pixel auf der Webseite plazieren kann, der das Tracking weiterhin ermöglicht.

Object-Src ist eine Policy, die nicht oft zum Einsatz kommt und daher meist nicht gesetzt werden muss. Es ist trotzdem wichtig, diese zu setzten um der vollständigkeiter Willen.

Test der Policie

Auf der Seite https://csp-evaluator.appspot.com/ kann die Korrektheit und Funktionen der CSP überprüft werden.