Chat-Widget und Content-Security-Policy: was Sie freigeben müssen

Ist auf Ihrer Website eine CSP aktiv, lädt der Chat womöglich stillschweigend nicht. Welche Direktiven das Widget braucht und warum es ohne unsafe-inline auskommt.

Content-Security-Policy ist ein Header, mit dem eine Website dem Browser mitteilt, woher Skripte, Styles und Daten geladen werden dürfen. Ein sinnvoller, aber strenger Schutz: Alles, was nicht ausdrücklich erlaubt ist, blockiert der Browser — und zwar ohne sichtbare Fehlermeldung auf der Seite. Die häufigste Beschwerde auf Websites mit CSP lautet deshalb: „Code eingefügt, aber der Chat-Button fehlt.“

Drei Direktiven für das Widget

Das Widget lädt ein Skript, bindet sein eigenes Stylesheet ein und tauscht Nachrichten mit dem Server aus. Die Webchatix-Domain muss also in drei Direktiven stehen:

• script-src — damit das Skript selbst geladen wird;
• style-src — für die Datei mit dem Chat-Design;
• connect-src — zum Senden und Empfangen von Nachrichten.

Werden im Chat Bilder ausgetauscht, nehmen Sie dieselbe Domain auch in img-src auf: Die Bildvorschauen kommen von unserem Server. Das genaue Snippet und die Liste der Direktiven finden Sie in der Dokumentation im Abschnitt „Widget auf der Website“.

Warum unsafe-inline nicht nötig ist

Früher hat das Widget seine Styles per <style>-Tag direkt in die Seite geschrieben, und Websites mit strenger Policy mussten in style-src die Ausnahme 'unsafe-inline' erlauben. Ein Hash oder eine Nonce half dabei nicht: Das Widget aktualisiert sich selbst, und der Hash hätte sich mit jeder Version geändert. Heute liegt das Design als eigene Datei auf unserer Domain — es reicht, die Domain freizugeben, ganz ohne Inline-Ausnahmen.

Wenn die Policy älter ist

Manchmal steht die Domain bereits in script-src und connect-src, fehlt aber in style-src. Für solche Websites hat das Widget einen Plan B: Sind Inline-Styles auf der Seite erlaubt, lädt es dieselbe Design-Datei und fügt sie selbst ein. Der Chat sieht dann ganz normal aus, sauberer ist es trotzdem, die Domain in style-src aufzunehmen.

Die Kehrseite: erlaubte Domains

Die CSP schützt Ihre Website, das Feld Allowed origins (CORS) in den Website-Einstellungen schützt Ihren Chat: Es legt fest, von welchen Adressen das Widget überhaupt Verbindungen annimmt. Das Sternchen * ist während der Tests praktisch, auf der Live-Website sollten Sie aber Ihre Domains kommagetrennt eintragen. Mehr dazu und zu weiteren Maßnahmen im Abschnitt „Sicherheit und DSGVO“.

In einer Minute prüfen

Öffnen Sie die Seite mit dem Widget und dann die Entwicklerkonsole (F12). Hat die CSP etwas blockiert, steht dort eine Meldung mit dem Namen der Direktive — genau die müssen Sie ergänzen. Kein Button, aber die Konsole ist leer? Dann prüfen Sie, ob der Website-Key im Snippet mit dem Key im Dashboard übereinstimmt und ob die Domain auf der Liste der erlaubten steht; diese Punkte finden Sie auch in den FAQ. Hilft das alles nicht, schreiben Sie uns und schicken Sie den CSP-Header Ihrer Website mit.