Passer au contenu principal

Résolution des erreurs de Content Security Policy (CSP)

Utilisez cet article pour identifier, corriger et gérer les erreurs de Content Security Policy (CSP) qui bloquent les fonctionnalités d'Intercom sur votre site. CSP est une fonction de sécurité du navigateur qui contrôle les ressources externes pouvant...

Écrit par Dawn

Qu'est-ce que les erreurs CSP ?

CSP est une fonction de sécurité du navigateur qui contrôle les ressources externes pouvant se charger — si elle est configurée de manière trop restrictive, elle peut empêcher le chargement correct du Messenger Intercom, des articles du Help Center, des images, des Product Tours et des médias.

Cela peut perturber des fonctionnalités clés et causer des problèmes tels que :

  • Chargements d'images bloqués : Les images ne peuvent pas être chargées dans les Product Tours ou le Messenger.

  • Product Tours non réactifs : Les modifications apportées à un Product Tour ne sont pas enregistrées.

  • Visuels cassés : Les composants Intercom, comme les logos, peuvent apparaître comme des images cassées.

  • Problèmes avec le Help Center : Les articles peuvent apparaître vides ou partiellement rendus, ou des spinners de chargement infinis peuvent se produire.

Note : Cet article est pertinent si vous avez installé le Messenger Intercom ou tout produit Intercom JS sur votre site (y compris Product Tours, Surveys, Checklists et News). Si vous utilisez le Help Center autonome hébergé par Intercom (par exemple help.yourco.com), Intercom gère sa propre CSP et la politique de votre site ne s'y applique pas. La mise à jour de votre CSP nécessite un accès à la configuration de votre serveur ou aux en-têtes de réponse HTTP — si vous ne gérez pas directement l'infrastructure de votre site, partagez cet article avec votre équipe de développement ou votre service informatique.


Comment identifier les erreurs CSP

Pour confirmer que CSP cause des problèmes avec Intercom sur votre site, vous devez vérifier la console développeur de votre navigateur.

  1. Ouvrez les outils développeur dans votre navigateur (généralement en appuyant sur F12 ou en cliquant droit et en sélectionnant Inspecter).

  2. Naviguez vers l'onglet Console.

  3. Reproduisez le problème sur votre site, par exemple en essayant de télécharger une image ou d'enregistrer un Product Tour.

  4. Cherchez des messages d'erreur rouges dans la console indiquant une violation CSP. Ces messages mentionnent souvent des requêtes bloquées vers des domaines Intercom (par exemple, uploads.intercomcdn.com, *.intercom.io) et la directive CSP spécifique qui a causé le blocage, comme connect-src ou img-src. Exemple d'erreur : Refusé de charger le script 'https://widget.intercom.io' car il viole la directive Content Security Policy suivante : "script-src 'self'".


Comment résoudre les erreurs CSP

Pour résoudre ces erreurs, vous devez mettre à jour la configuration CSP de votre site pour autoriser les ressources des domaines requis par Intercom.

1. Mettez à jour vos directives CSP

  • Localisez la directive en erreur : Dans l'erreur de la console développeur, identifiez la directive qui a causé la restriction (par exemple, img-src).

  • Liste blanche des domaines Intercom : Ajoutez les URL Intercom requises aux directives pertinentes dans la configuration CSP de votre site.

Important : Vous devrez généralement ajouter les domaines Intercom aux directives suivantes :

  • connect-src : Pour les fonctionnalités principales.

  • img-src : Pour les images et pièces jointes.

  • media-src : Pour les ressources médias.

Les domaines à ajouter sont *.intercomcdn.com, *.intercom.io et *.intercom-chat.com (nécessaire pour la connexion websocket en direct du Messenger — non couvert par le joker *.intercom.io). Pour la liste de domaines la plus à jour, consultez Using Intercom with Content Security Policy.

Incluez également intercom-sheets.com dans la directive frame-src pour assurer le bon chargement des iframes du visualiseur d'articles.

Note : Si les articles se chargent correctement sur votre Help Center autonome mais apparaissent vides ou ne s'affichent pas lorsqu'ils sont ouverts dans le Messenger, un décalage CSP est la cause la plus probable. Le Messenger affiche les articles dans une iframe — si votre politique bloque frame-src intercom-sheets.com ou connect-src *.intercom.io, le visualiseur d'articles dans le Messenger échouera même si le reste du Messenger se charge. Ajoutez intercom-sheets.com à votre directive frame-src pour résoudre ce problème.

2. Révisez les en-têtes de sécurité

Des en-têtes trop restrictifs comme X-Frame-Options ou les paramètres CSP frame-ancestors peuvent aussi impacter la fonctionnalité d'Intercom. Vérifiez ces paramètres et ajustez-les si nécessaire.

3. Vérifiez les paramètres réseau

Assurez-vous que les paramètres réseau ou pare-feu autorisent les connexions sortantes vers les serveurs d'Intercom. Vous devrez peut-être demander à votre équipe informatique de mettre en liste blanche les domaines nécessaires.

4. Testez vos modifications

Après avoir mis à jour votre configuration CSP :

  • Rechargez les pages concernées de votre site et vérifiez si les fonctionnalités d'Intercom fonctionnent désormais correctement.

  • Surveillez la console développeur pour vous assurer qu'aucune nouvelle violation CSP n'apparaît.

  • Effectuez un rafraîchissement complet dans votre navigateur pour vider le cache après avoir modifié la CSP.

    Si les fonctionnalités d'Intercom ne fonctionnent toujours pas après un rafraîchissement complet, rouvrez l'onglet Console et vérifiez s'il reste des erreurs de violation CSP. Chaque nouveau message d'erreur indiquera la prochaine directive ou domaine à ajouter — répétez le cycle de mise à jour et de test jusqu'à ce qu'aucune violation n'apparaisse.


Quelles fonctionnalités d'Intercom sont affectées par les erreurs CSP ?

Différentes fonctionnalités d'Intercom sont bloquées par différentes directives CSP. Le tableau ci-dessous associe chaque fonctionnalité Intercom à ses symptômes courants, à la directive CSP qui la bloque et aux domaines à mettre en liste blanche.

Fonctionnalité Intercom

Symptômes

Directive bloquante

Domaine(s) à mettre en liste blanche

Messenger (widget de chat)

Le widget ne se charge pas ou est invisible

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

Les articles apparaissent vides ou ne se chargent pas, y compris lorsqu'ils sont consultés dans l'espace Help du Messenger

frame-src, connect-src

intercom-sheets.com, *.intercom.io

Chargements d'images et pièces jointes

Les images ne se téléchargent pas ou sont cassées

img-src, connect-src

uploads.intercomcdn.com, *.intercomcdn.com

Product Tours

Les tours ne s'affichent pas ou les modifications ne sont pas enregistrées

script-src, connect-src, img-src

*.intercom.io, *.intercomcdn.com

Médias (vidéo/audio)

Les fichiers médias ne se lisent pas

media-src, connect-src

*.intercomcdn.com

Astuce : Si vous voyez plusieurs erreurs dans la console en même temps, commencez par résoudre celles de la directive la plus restrictive (par exemple, script-src bloque plus que img-src). Une correction de directive peut parfois résoudre plusieurs symptômes.


Comment mettre à jour votre CSP pour des fonctionnalités Intercom spécifiques

Utilisez le mode Report-Only pour auditer avant d'appliquer, puis appliquez les changements progressivement par fonctionnalité.

Utilisez d'abord le mode Report-Only

Avant de modifier votre Content Security Policy (CSP) appliquée pour corriger les problèmes Intercom, ajoutez un en-tête Content-Security-Policy-Report-Only en plus de votre politique existante. Cela enregistre les violations sans rien bloquer, vous permettant d'auditer en toute sécurité ce qui doit changer.

Ajoutez l'en-tête Content-Security-Policy-Report-Only suivant aux en-têtes de réponse HTTP de votre serveur (en plus — pas en remplacement — de votre en-tête Content-Security-Policy appliqué) :

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;

Appliquez les changements progressivement

  1. Activez le mode Report-Only et reproduisez le problème.

  2. Notez chaque domaine bloqué dans la sortie de la console.

  3. Ajoutez le(s) domaine(s) requis à la directive pertinente dans votre politique appliquée — une directive à la fois.

  4. Retestez en mode Report-Only pour confirmer qu'aucune nouvelle violation n'apparaît.

  5. Promouvez la modification dans votre en-tête Content-Security-Policy appliqué.

    Une fois promue, effectuez un rafraîchissement complet et confirmez que la fonctionnalité Intercom fonctionne comme prévu. Si une nouvelle violation apparaît dans la console, recommencez à l'étape 1 pour la nouvelle directive.


Comment maintenir votre CSP à jour

La configuration CSP n'est pas une correction unique. Intercom met périodiquement à jour son infrastructure et ses exigences de domaine. Suivez les étapes ci-dessous pour garder votre politique à jour.

Surveillez les nouvelles violations

  • Configurez un point de rapport CSP avec la directive report-to (une directive CSP qui indique aux navigateurs où envoyer les rapports de violation) pour que les violations soient envoyées automatiquement à un service de journalisation — vous n'aurez pas à vérifier manuellement la console. Note : report-uri est obsolète au profit de report-to. Lors de l'utilisation de report-to, vous devez également ajouter un en-tête HTTP compagnon Reporting-Endpoints pour définir le groupe de points de terminaison.

  • Examinez les rapports de violation après chaque mise à jour d'Intercom ou après avoir déployé des changements dans l'infrastructure de votre site.

Restez à jour avec la liste des domaines d'Intercom

  • Mettez en favori l'article Using Intercom with Content Security Policy et consultez-le lors des mises à jour majeures d'Intercom.

  • Abonnez-vous à la page de statut d'Intercom pour être informé des changements d'infrastructure pouvant affecter les domaines requis.

Évitez les pièges courants de gestion

  • N'utilisez pas unsafe-inline ou unsafe-eval comme raccourci. Ajouter ces valeurs à script-src désactive une grande classe de protection contre les XSS (cross-site scripting) et expose votre site aux attaques par injection de scripts — même temporairement. Utilisez plutôt des nonces (jetons cryptographiques ajoutés à chaque balise script) ou des hachages — Intercom supporte strictement CSPv3 (la troisième version de la norme CSP) avec des politiques basées sur des nonces.

  • Gardez votre CSP sous contrôle de version. Suivez chaque changement avec votre historique de déploiement pour pouvoir revenir en arrière si une modification de directive casse une fonctionnalité.

  • Testez d'abord dans un environnement de préproduction. Validez toujours les changements CSP avec les fonctionnalités Intercom dans un environnement de préproduction ou de prévisualisation avant de déployer en production.

Note : Si vous intégrez Intercom via Google Tag Manager (GTM), assurez-vous que les entrées script-src et connect-src de votre conteneur GTM sont également incluses dans votre politique — GTM injecte des scripts dynamiquement, ce qui peut déclencher des violations CSP supplémentaires indépendantes des domaines d'Intercom. Si les problèmes persistent après la mise à jour de ces directives, déployez le Messenger Intercom dans une balise GTM dédiée plutôt qu'avec des scripts inline.

Note : Les modifications des en-têtes CSP peuvent être mises en cache par votre CDN ou navigateur. Si vous ne voyez pas le comportement de politique mis à jour après les modifications, videz le cache de votre CDN et effectuez un rafraîchissement complet avant de tester à nouveau.

Notes :

  • La mise à jour de votre Content Security Policy nécessite un accès à la configuration de votre serveur ou aux en-têtes HTTP. Si vous ne gérez pas directement l'infrastructure de votre site, partagez cet article avec votre équipe de développement ou votre service informatique.

  • Lors de l'intégration du Messenger Intercom via Google Tag Manager (GTM), assurez-vous que la région d'hébergement GTM correspond à la région de votre espace de travail Intercom. Définissez api_base sur le point de terminaison de votre région : api-iam.intercom.io (US), api-iam.eu.intercom.io (EU / EMEA — Europe, Moyen-Orient et Afrique), ou api-iam.au.intercom.io (AU).

Avez-vous trouvé la réponse à votre question ?