Skip to main content

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 Ihre Webseite 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, müssen Sie den Zugriff auf folgende Urls erlauben:

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

Diese URL müssen sie als script-src, style-src und connect-src erlauben.

Falls Sie nicht unser EU-basiertes CDN verwenden, müssen Sie stattdessen die URL webcache.datareporter.eu erlauben.

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

Falls sie eine unserer Schriftarten einbinden, müssen Sie 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) müssen Sie diese Url als connect-src erlauben.

https://c.datareporter.eu​

Falls Sie die Statistikfunktionen und/oder die Einwilligungshistorie verwenden, müssen Sie diese Url als connect-src erlauben.

Nonce konfigurieren​

Da der Banner einiges an dynamischen Code erzeugt und ausführt, müssen Sie ausserdem eine nonce für die Bereiche script-src und style-src definieren. Diese müssen Sie 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 finden Sie 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>