Was sind CSP-Fehler?
CSP ist eine Browsersicherheitsfunktion, die steuert, welche externen Ressourcen geladen werden dürfen – wenn sie zu restriktiv konfiguriert ist, kann sie verhindern, dass der Intercom Messenger, Help Center-Artikel, Bilder, Product Tours und Medien korrekt geladen werden.
Dies kann wichtige Funktionen stören und Probleme wie folgende verursachen:
Blockierte Bild-Uploads: Bilder können in Product Tours oder im Messenger nicht geladen werden.
Unresponsive Product Tours: Änderungen an einer Product Tour können nicht gespeichert werden.
Defekte Darstellungen: Intercom-Komponenten wie Logos können als defekte Bilder erscheinen.
Help Center-Probleme: Artikel können leer oder teilweise gerendert erscheinen oder unendliche Ladeanimationen auftreten.
Hinweis: Dieser Artikel ist relevant, wenn Sie den Intercom Messenger oder ein Intercom JS-Produkt auf Ihrer Website installiert haben (einschließlich Product Tours, Surveys, Checklists und News). Wenn Sie das eigenständige gehostete Help Center von Intercom verwenden (z. B. help.yourco.com), verwaltet Intercom seine eigene CSP und die Richtlinie Ihrer Website gilt dort nicht. Die Aktualisierung Ihrer CSP erfordert Zugriff auf Ihre Serverkonfiguration oder HTTP-Antwortheader – wenn Sie die Infrastruktur Ihrer Website nicht direkt verwalten, teilen Sie diesen Artikel mit Ihrem Entwicklungsteam oder Ihrer IT-Abteilung.
Wie man CSP-Fehler identifiziert
Um zu bestätigen, dass CSP Probleme mit Intercom auf Ihrer Website verursacht, müssen Sie die Entwicklerkonsole Ihres Browsers überprüfen.
Öffnen Sie die Entwicklertools in Ihrem Browser (normalerweise durch Drücken von F12 oder Rechtsklick und Auswahl von Inspect).
Navigieren Sie zum Tab Console.
Reproduzieren Sie das Problem auf Ihrer Website, z. B. indem Sie versuchen, ein Bild hochzuladen oder eine Product Tour zu speichern.
Suchen Sie in der Konsole nach roten Fehlermeldungen, die auf eine CSP-Verletzung hinweisen. Diese Meldungen erwähnen oft blockierte Anfragen an Intercom domains (z. B.
uploads.intercomcdn.com,*.intercom.io) und die spezifische CSP-Direktive, die die Blockierung verursacht hat, wieconnect-srcoderimg-src. Beispiel-Fehler:Refused to load the script 'https://widget.intercom.io' because it violates the following Content Security Policy directive: "script-src 'self'".
Wie man CSP-Fehler behebt
Um diese Fehler zu beheben, müssen Sie die CSP-Konfiguration Ihrer Website aktualisieren, um Ressourcen von den erforderlichen Intercom domains zuzulassen.
1. Aktualisieren Sie Ihre CSP-Direktiven
Fehler-Direktive lokalisieren: Identifizieren Sie in der Entwicklerkonsole, welche Direktive die Einschränkung verursacht hat (z. B.
img-src).Intercom domains auf die Allowlist setzen: Fügen Sie die erforderlichen Intercom-URLs zu den relevanten Direktiven in der CSP-Konfiguration Ihrer Website hinzu.
Wichtig: Sie müssen in der Regel die Intercom domains zu folgenden Direktiven hinzufügen:
connect-src: Für Kernfunktionen.img-src: Für Bilder und Anhänge.media-src: Für Medienressourcen.
Die hinzuzufügenden domains sind *.intercomcdn.com, *.intercom.io und *.intercom-chat.com (erforderlich für die Live-Websocket-Verbindung des Messengers – nicht durch das *.intercom.io-Wildcard abgedeckt). Für die aktuellste Domainliste siehe Using Intercom with Content Security Policy.
Fügen Sie außerdem intercom-sheets.com in die frame-src-Direktive ein, um das ordnungsgemäße Laden von Artikel-Viewer-Frames sicherzustellen.
Hinweis: Wenn Artikel in Ihrem eigenständigen Help Center korrekt geladen werden, aber leer erscheinen oder nicht gerendert werden, wenn sie im Messenger geöffnet werden, ist wahrscheinlich eine CSP-Fehlanpassung die Ursache. Der Messenger rendert Artikel in einem iframe – wenn Ihre Richtlinie frame-src intercom-sheets.com oder connect-src *.intercom.io blockiert, schlägt der Artikel-Viewer im Messenger fehl, auch wenn der Rest des Messengers geladen wird. Fügen Sie intercom-sheets.com zu Ihrer frame-src-Direktive hinzu, um dies zu beheben.
2. Überarbeiten Sie Sicherheitsheader
Zu restriktive Header wie X-Frame-Options oder CSP-frame-ancestors-Einstellungen können ebenfalls die Funktionalität von Intercom beeinträchtigen. Überprüfen Sie diese Einstellungen und passen Sie sie bei Bedarf an.
3. Überprüfen Sie Netzwerkeinstellungen
Stellen Sie sicher, dass Ihre Netzwerk- oder Firewall-Einstellungen ausgehende Verbindungen zu den Intercom-Servern zulassen. Möglicherweise müssen Sie Ihr IT-Team bitten, die erforderlichen domains auf die Allowlist zu setzen.
4. Testen Sie Ihre Änderungen
Nach der Aktualisierung Ihrer CSP-Konfiguration:
Laden Sie die betroffenen Seiten auf Ihrer Website neu und prüfen Sie, ob die Intercom-Funktionen jetzt korrekt funktionieren.
Überwachen Sie die Entwicklerkonsole, um sicherzustellen, dass keine neuen CSP-Verletzungen auftreten.
Führen Sie einen Hard-Refresh in Ihrem Browser durch, um zwischengespeicherte Assets nach CSP-Änderungen zu löschen.
Wenn Intercom-Funktionen nach einem Hard-Refresh immer noch nicht funktionieren, öffnen Sie den Console-Tab erneut und prüfen Sie auf verbleibende CSP-Verletzungsfehler. Jede neue Fehlermeldung nennt die nächste Direktive oder Domain, die hinzugefügt werden muss – wiederholen Sie den Aktualisierungs- und Testzyklus, bis keine Verletzungen mehr auftreten.
Welche Intercom-Funktionen sind von CSP-Fehlern betroffen?
Verschiedene Intercom-Funktionen werden durch unterschiedliche CSP-Direktiven blockiert. Die folgende Tabelle ordnet jede Intercom-Funktion ihren typischen Symptomen, der blockierenden CSP-Direktive und den zu erlaubenden domains zu.
Intercom-Funktion | Symptome | Blockierte Direktive | Domain(s) auf die Allowlist setzen |
Messenger (Chat-Widget) | Widget lädt nicht oder ist unsichtbar | script-src, connect-src | widget.intercom.io, js.intercomcdn.com, *.intercom-chat.com, api-iam.intercom.io (US), api-iam.eu.intercom.io (EU), api-iam.au.intercom.io (AU) |
Help Center | Artikel erscheinen leer oder laden nicht, auch wenn sie im Messenger Help-Bereich angezeigt werden | frame-src, connect-src | intercom-sheets.com, *.intercom.io |
Bild-Uploads & Anhänge | Bilder können nicht hochgeladen werden oder erscheinen defekt | img-src, connect-src | uploads.intercomcdn.com, *.intercomcdn.com |
Product Tours | Tours werden nicht gerendert oder Änderungen können nicht gespeichert werden | script-src, connect-src, img-src | *.intercom.io, *.intercomcdn.com |
Medien (Video/Audio) | Mediendateien können nicht abgespielt werden | media-src, connect-src | *.intercomcdn.com |
Tipp: Wenn Sie mehrere Konsolenfehler gleichzeitig sehen, beheben Sie diese zuerst bei der restriktivsten Direktive (z. B. blockiert script-src mehr als img-src). Eine Direktivenkorrektur kann manchmal mehrere Symptome beheben.
Wie Sie Ihre CSP für bestimmte Intercom-Funktionen aktualisieren
Verwenden Sie den Report-Only-Modus, um vor der Durchsetzung zu prüfen, und wenden Sie Änderungen dann schrittweise pro Funktion an.
Verwenden Sie zuerst den Report-Only-Modus
Bevor Sie Ihre durchgesetzte Content Security Policy (CSP) bearbeiten, um Intercom-Probleme zu beheben, fügen Sie einen Content-Security-Policy-Report-Only-Header neben Ihrer bestehenden Richtlinie hinzu. Dieser protokolliert Verstöße, ohne etwas zu blockieren, sodass Sie sicher prüfen können, was geändert werden muss.
Fügen Sie den folgenden Content-Security-Policy-Report-Only-Header zu den HTTP-Antwortheadern Ihres Servers hinzu (neben – nicht anstelle – Ihres durchgesetzten Content-Security-Policy-Headers):
Content-Security-Policy-Report-Only:
script-src 'self' https://widget.intercom.io https://js.intercomcdn.com;
connect-src 'self' https://*.intercom.io https://*.intercomcdn.com
https://*.intercom-chat.com wss://*.intercom-chat.com;
img-src 'self' https://*.intercomcdn.com;
media-src 'self' https://*.intercomcdn.com;
frame-src 'self' https://intercom-sheets.com;
Änderungen schrittweise anwenden
Aktivieren Sie den Report-Only-Modus und reproduzieren Sie das Problem.
Notieren Sie jede blockierte Domain in der Konsolenausgabe.
Fügen Sie die erforderlichen Domains nacheinander zur relevanten Direktive in Ihrer durchgesetzten Richtlinie hinzu.
Testen Sie erneut im Report-Only-Modus, um sicherzustellen, dass keine neuen Verstöße auftreten.
Übernehmen Sie die Änderung in Ihren durchgesetzten Content-Security-Policy-Header.
Führen Sie nach der Übernahme einen Hard-Refresh durch und bestätigen Sie, dass die Intercom-Funktion wie erwartet funktioniert. Wenn ein neuer Verstoß in der Konsole erscheint, wiederholen Sie Schritt 1 für die neue Direktive.
Wie Sie Ihre CSP aktuell halten
Die CSP-Konfiguration ist keine einmalige Lösung. Intercom aktualisiert regelmäßig seine Infrastruktur und Domain-Anforderungen. Befolgen Sie die folgenden Schritte, um Ihre Richtlinie aktuell zu halten.
Überwachen Sie neue Verstöße
Richten Sie einen CSP-Reporting-Endpunkt mit der
report-to-Direktive ein (eine CSP-Direktive, die Browsern mitteilt, wohin Verstöße gemeldet werden sollen), damit Verstöße automatisch an einen Protokollierungsdienst gesendet werden – Sie müssen die Konsole nicht manuell überprüfen. Hinweis:report-uriist zugunsten vonreport-toveraltet. Bei Verwendung vonreport-tomüssen Sie auch einen begleitendenReporting-Endpoints-HTTP-Antwortheader hinzufügen, um die Endpunktgruppe zu definieren.Überprüfen Sie Verstöße nach jedem Intercom-Update oder nach Änderungen an der Infrastruktur Ihrer Website.
Bleiben Sie mit der Intercom-Domainliste auf dem Laufenden
Legen Sie die Seite Using Intercom with Content Security Policy als Lesezeichen an und prüfen Sie sie bei größeren Intercom-Updates.
Abonnieren Sie die Statusseite von Intercom, um über Infrastrukturänderungen informiert zu werden, die erforderliche Domains betreffen können.
Vermeiden Sie häufige Verwaltungsfehler
Verwenden Sie nicht unsafe-inline oder unsafe-eval als Abkürzung. Das Hinzufügen dieser Werte zu
script-srcdeaktiviert einen wichtigen Schutz gegen XSS (Cross-Site-Scripting) und macht Ihre Website anfällig für Skriptinjektionen – selbst als vorübergehende Maßnahme. Verwenden Sie stattdessen Nonces (kryptografische Token, die jedem Skript-Tag hinzugefügt werden) oder Hashes – Intercom unterstützt strikte CSPv3 (die dritte Version des CSP-Standards) mit nonce-basierten Richtlinien.Führen Sie Ihre CSP in der Versionskontrolle. Verfolgen Sie jede Änderung zusammen mit Ihrer Bereitstellungshistorie, damit Sie eine Direktivenänderung zurücksetzen können, falls sie die Funktionalität beeinträchtigt.
Testen Sie zuerst in einer Staging-Umgebung. Validieren Sie CSP-Änderungen immer gegen Intercom-Funktionen in einer Staging- oder Vorschauumgebung, bevor Sie sie in der Produktion bereitstellen.
Hinweis: Wenn Sie Intercom über Google Tag Manager (GTM) integrieren, stellen Sie sicher, dass die script-src- und connect-src-Einträge Ihres GTM-Containers ebenfalls in Ihrer Richtlinie enthalten sind – GTM fügt Skripte dynamisch ein, was zusätzliche CSP-Verstöße auslösen kann, die sich von den Intercom domains unterscheiden. Wenn Probleme nach der Aktualisierung dieser Direktiven bestehen bleiben, implementieren Sie den Intercom Messenger in einem dedizierten GTM-Tag anstelle von Inline-Skripten.
Hinweis: CSP-Header-Änderungen können von Ihrem CDN oder Browser zwischengespeichert werden. Wenn Sie nach Änderungen kein aktualisiertes Richtlinienverhalten sehen, leeren Sie den CDN-Cache und führen Sie einen Hard-Refresh durch, bevor Sie erneut testen.
Hinweise:
Die Aktualisierung Ihrer Content Security Policy erfordert Zugriff auf Ihre Serverkonfiguration oder HTTP-Header. Wenn Sie die Infrastruktur Ihrer Website nicht direkt verwalten, teilen Sie diesen Artikel mit Ihrem Entwicklungsteam oder Ihrer IT-Abteilung.
Wenn Sie den Intercom Messenger über Google Tag Manager (GTM) integrieren, stellen Sie sicher, dass die Hosting-Region von GTM mit der Region Ihres Intercom-Arbeitsbereichs übereinstimmt. Setzen Sie
api_baseauf den Endpunkt für Ihre Region:api-iam.intercom.io(US),api-iam.eu.intercom.io(EU / EMEA – Europa, Naher Osten und Afrika) oderapi-iam.au.intercom.io(AU).