Zum Hauptinhalt springen

Content Security Policy (CSP)

Integration unter Berücksichtigung einer CSP​

Die CSP (Content Security Policy) soll sicherstellen, dass Cross Site Scripting Attacken und ähnliche Angriffe auf deine Website nicht möglich sind.

Daher haben wir alle unsere Integrationen CSP-kompatibel gestaltet, beim Einbau müssen dennoch ein paar Dinge beachtet werden:

Erlaubte URLs​

Um das Laden der benötigten Dateien zu erlauben, musst du den Zugriff auf folgende URLs erlauben:

WebCare-CDN​

Banner, Loader, Datenschutzerklärung, Impressum und Schriftarten werden über unser CDN ausgeliefert. Je nach Einbauart, Region und Cache-Einstellung kommen sie von einer dieser vier URLs:

Erlaube alle vier URLs als script-src, style-src, font-src und connect-src. So funktioniert deine CSP mit jeder Einbauart, auch mit dem Loader, mit Subresource Integrity (SRI), mit dem WordPress-Plugin und wenn der Loader bei einem Fehler auf das nicht EU-basierte CDN ausweicht.

https://swarmcrawler.datareporter.eu​

Um die Funktionalitäten unseres SwarmCrawlers zu erlauben (sehr empfohlen), musst du diese URL als connect-src erlauben.

https://c.datareporter.eu​

Falls du die Statistikfunktionen und/oder die Einwilligungshistorie verwendest, musst du diese URL als connect-src erlauben.

Nonce konfigurieren​

Da der Banner einiges an dynamischen Code erzeugt und ausführt, musst du außerdem eine nonce für die Bereiche script-src und style-src definieren. Diese musst du auch beim script-Tag der Einbindung angeben.

Es wird empfohlen, bei jedem Request eine zufällige Nonce serverseitig zu erzeugen und dynamisch in der Seite zu setzen. Natürlich funktioniert auch eine fixe Nonce, diese ist aber nicht so sicher wie eine dynamische.

Beispiele​

Folgende CSP erlaubt den Zugriff auf alle Features von WebCare:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-webcare' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; style-src 'self' 'nonce-webcare' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; font-src 'self' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; connect-src https://swarmcrawler.datareporter.eu https://c.datareporter.eu https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu">

Die zugehörige HTML-Einbindung sieht dann so aus:

...
<body>
...
<link href="https://webcache-eu.datareporter.eu/c/--id--/banner.css" rel="stylesheet">
<script src="https://webcache-eu.datareporter.eu/c/--id--/banner.js" type="text/javascript" charset="utf-8"></script>
<script nonce="webcare">
  window.cookieconsent.initialise(dr_cookiebanner_options);
</script>
...
</body>
...

Zu beachten ist dabei, dass die nonce beim script-Tag der nonce in der CSP entsprechen muss, in diesem Fall webcare.

Gesamte HTML-Seite einer Einbindung​

Hier findest du eine Einbindung von Banner und Datenschutzerklärung in eine Demoseite, die eine gültige CSP vorgibt:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-27389fhs76' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; style-src 'self' 'nonce-27389fhs76' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; font-src 'self' https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu; connect-src https://swarmcrawler.datareporter.eu https://c.datareporter.eu https://webcache-eu.datareporter.eu https://webcache.datareporter.eu https://webcachex-eu.datareporter.eu https://webcachex.datareporter.eu">
  <title>Test CSP</title>
</head>
<body>

<link href="https://webcache-eu.datareporter.eu/c/---id---/banner.css" rel="stylesheet">
<script src="https://webcache-eu.datareporter.eu/c/---id---/banner.js" type="text/javascript" charset="utf-8"></script>

<script src="https://webcache-eu.datareporter.eu/c/---id---/privacynotice.js" type="text/javascript" charset="utf-8"></script>

<script nonce="27389fhs76">
  window.cookieconsent.initialise(dr_cookiebanner_options);
</script>

</body>
</html>