Zum Hauptinhalt springen

Content Security Policy (CSP)

Wenn Ihre Website eine Content Security Policy (CSP) hat, benötigen Sie mindestens die folgenden CSP-Header. Andernfalls wird der LoyJoy-Chat nicht geladen. Richten Sie keine CSP-Header für bestimmte Subdomains von loyjoy.com oder Dateien unter der Domain loyjoy.com ein, da dies bei zukünftigen LoyJoy-Releases bricht, wenn sich Dateipfade oder Subdomains ändern.

script-src *.loyjoy.com;
style-src 'unsafe-inline' *.loyjoy.com;
connect-src *.loyjoy.com wss://*.loyjoy.com wss://lpru5mjumh.execute-api.eu-central-1.amazonaws.com;
font-src *.loyjoy.com;
frame-src https: *.loyjoy.com;
img-src blob: data: *.loyjoy.com;
media-src blob: data: *.loyjoy.com;

Erklärung der CSP-Header:

  • script-src erlaubt dem LoyJoy-Chat, JavaScript-Dateien von der LoyJoy-Domain zu laden und auszuführen.
  • style-src erlaubt dem LoyJoy-Chat, CSS-Dateien von der LoyJoy-Domain zu laden. Das unsafe-inline wird verwendet, um Schriftarten dynamisch für den LoyJoy-Chat zu injizieren.
  • connect-src erlaubt dem LoyJoy-Chat, Daten wie Chat-Nachrichten an den LoyJoy-Server zu senden. Das wss://*.loyjoy.com wird für die WebSocket-Verbindung des Voice Chats benötigt. Browser, die CSP Level 3 implementieren, erlauben dies bereits mit *.loyjoy.com, aber Firefox behandelt wss://-Verbindungen nicht als von *.loyjoy.com abgedeckt und benötigt daher den expliziten wss://-Eintrag. Das wss://lpru5mjumh.execute-api.eu-central-1.amazonaws.com ist optional und wird für eine WebSocket-Verbindung verwendet, falls das Live-Chat-Modul aktiv ist. Wenn dieser Header nicht gesetzt ist, pollt der LoyJoy-Chat den LoyJoy-Server alle paar Sekunden nach neuen Nachrichten, was weniger effizient ist. Bitte beachten Sie, dass an diesen Endpunkt keine personenbezogenen Daten (z. B. keine Chat-Nachrichten) gesendet werden, sondern nur Benachrichtigungen über neue Nachrichten und Tipp-Indikatoren.
  • font-src erlaubt dem LoyJoy-Chat, Schriftarten von der LoyJoy-Domain zu laden.
  • frame-src wird derzeit für das Lottie-Modul benötigt, um Lottie-Animationen in einem Hintergrund-Iframe zu rendern, und für das External-Link-Modul, um YouTube-Videos in den Chat einzubetten.
  • img-src erlaubt dem LoyJoy-Chat, Bilder von der LoyJoy-Domain zu laden. Die blob:- und data:-Einträge werden für Data-URIs und Bilder benötigt, die dynamisch generiert und als Blob-URL oder Data-URI in Chat-Nachrichten bereitgestellt werden. Wenn der Chat Bilder von anderen Domains anzeigen soll, werden diese auch hier benötigt.
  • media-src erlaubt dem LoyJoy-Chat, Mediendateien von der LoyJoy-Domain zu laden. Die blob:- und data:-Einträge werden für Data-URIs und Mediendateien benötigt, die dynamisch generiert und als Blob-URL oder Data-URI in Chat-Nachrichten bereitgestellt werden. Wenn der Chat Medien von anderen Domains anzeigen soll, werden diese auch hier benötigt.

Voice Chat​

Voice Chat benötigt keine zusätzliche CSP-Direktive über die oben genannten hinaus, solange wss://*.loyjoy.com Teil von connect-src ist. Das Voice-Audio wird über diese WebSocket-Verbindung gestreamt und mit der Web Audio API abgespielt, sodass weder media-src noch worker-src beteiligt sind.

Neben der CSP müssen für das Funktionieren des Mikrofons folgende Voraussetzungen erfüllt sein:

  1. Die Website muss über HTTPS ausgeliefert werden, da Browser Mikrofonzugriff nur in einem sicheren Kontext gewähren.
  2. Wenn Ihre Website einen Permissions-Policy-Header setzt, muss dieser das Mikrofon für Ihre eigene Origin erlauben, z. B. Permissions-Policy: microphone=(self). Ein Wert von microphone=() blockiert Voice Chat.
  3. Wenn die Seite mit dem LoyJoy-Chat selbst in einem iframe eingebettet ist, benötigt der iframe das Attribut allow="microphone".

Captcha-Bot-Check​

Wenn der Captcha-Bot-Check des E-Mail-Moduls aktiviert ist, muss die CSP zusätzlich CaptchaFox erlauben:

script-src https://cdn.captchafox.com;
style-src *.captchafox.com;
connect-src *.captchafox.com;
frame-src *.captchafox.com;
img-src *.captchafox.com;
media-src *.captchafox.com;
worker-src blob:;
  • script-src erlaubt es dem Chat, das CaptchaFox-Widget-Skript zu laden.
  • style-src, img-src und media-src erlauben dem Widget und dem Challenge-Popup (z. B. einem Slider) das Laden ihrer Stylesheets, Bilder und Medien.
  • connect-src und frame-src erlauben dem Widget, die Prüfung bei CaptchaFox anzufordern.
  • worker-src blob: erlaubt den Proof-of-Work-Worker, den CaptchaFox von einer Blob-URL startet.

Wenn diese Direktiven fehlen, schlägt die Prüfung fehl und die E-Mail-Adresse kann nicht gespeichert werden.

CSP in Microsoft SharePoint​

Seit Juni verlangt SharePoint CSP-Header. In der SharePoint-Verwaltung können nur Script-Quell-URLs eingegeben werden. In unseren Tests hat sich die Eingabe von *.loyjoy.com als funktionierend erwiesen, was nicht nur script-src, sondern auch style-src und connect-src erlaubt.

Beispiele​

Die folgenden Testbeispiele zeigen Kombinationen von ES-Modul vs. Nicht-ES-Modul und Nonce vs. kein Nonce.

  • CSP: /test/csp.html
  • CSP mit Nonce: /test/csp_nonce.html
  • CSP mit ES-Modul: /test/csp_esm.html
  • CSP mit ES-Modul und Nonce: /test/csp_esm_nonce.html