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:

https://webcache-eu.datareporter.eu​

Diese URL musst du als script-src, style-src und connect-src erlauben.

Falls du nicht unser EU-basiertes CDN verwendest, musst du stattdessen die URL webcache.datareporter.eu erlauben.

https://webcachex-eu.datareporter.eu (optional bei Schriftarten)​

Falls du eine unserer Schriftarten einbindest, musst du diese URL als font-src freigeben, da alle Schriften von dort geladen werden.

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; style-src 'self' 'nonce-webcare' https://webcache-eu.datareporter.eu; font-src 'self' https://webcachex-eu.datareporter.eu; connect-src https://swarmcrawler.datareporter.eu https://c.datareporter.eu https://webcache-eu.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; style-src 'self' 'nonce-27389fhs76' https://webcache-eu.datareporter.eu; font-src 'self' https://webcachex-eu.datareporter.eu; connect-src https://swarmcrawler.datareporter.eu https://c.datareporter.eu https://webcache-eu.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>