Résolution des problèmes de Content Security Policy (CSP) bloquant le widget, les images et les Articles de la Base de connaissances
Les instructions ci-dessous s’appliquent uniquement aux ordinateurs de bureau et aux ordinateurs portables.
Si les images ne s’affichent pas dans votre Chat Widget tawk.to ou si vos Articles de la Knowledge Base apparaissent endommagés, se chargent partiellement ou ne s’affichent qu’après actualisation, la Content Security Policy (CSP) de votre site web peut être à l’origine du problème.
La CSP est une fonctionnalité de sécurité des navigateurs qui contrôle quelles ressources (images, scripts, styles) peuvent être chargées. Bien qu’elle améliore la sécurité, des paramètres trop stricts peuvent bloquer du contenu légitime, y compris les ressources tawk.to.
Vous pouvez rencontrer des problèmes de CSP si vous remarquez :
Le Widget apparaît brièvement, puis disparaît.
Les images dans le Widget ne se chargent pas.
Le Widget se comporte de manière imprévisible ou présente des dysfonctionnements.
Les Articles de la Knowledge Base se chargent de manière incomplète ou seulement après actualisation de la page.
Les paramètres de CSP vous permettent de spécifier quelles sources sont fiables pour charger du contenu sur votre site web. Si votre CSP est trop restrictive, elle peut bloquer les images, scripts et styles nécessaires au bon fonctionnement du Widget tawk.to.
Pour résoudre ce problème, vous devez ajouter les ressources tawk.to à la liste blanche dans vos paramètres CSP.
Pour permettre au Widget de se charger correctement, ajoutez les directives suivantes aux en-têtes de réponse de votre serveur :
Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net
Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net
Content-Security-Policy: frame-src *.tawk.to
Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com
Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link s3.amazonaws.com
Content-Security-Policy: connect-src .tawk.to wss://.tawk.to
Content-Security-Policy: form-action *.tawk.to
Exemple :
Si vous ne savez pas comment modifier la configuration de votre serveur, consultez l’administrateur de votre site web ou votre hébergeur. Pour en savoir plus, référez-vous à ce guide sur l’ajout d’en-têtes aux serveurs web courants.
Cela garantit que vos articles se chargent correctement dès la première ouverture de la page par un visiteur.
Exemple : Mise à jour de la CSP dans Cloudflare
Pour les utilisateurs de Cloudflare :
Allez dans Cloudflare > Rules > Custom Rules > Content Security Policy
Appliquez l’ensemble complet des directives aux pages affichant le Widget ou les Articles de la Knowledge Base. Cela garantit que toutes les ressources nécessaires sont chargées sans nécessiter de rafraîchissement de la page.
Vider le cache du navigateur
Les données en cache peuvent empêcher les modifications de prendre effet. Videz votre cache, puis actualisez la page.
Tester sur plusieurs navigateurs
Les différents navigateurs gèrent la CSP différemment. Vérifiez Chrome, Firefox, Safari et Edge pour identifier tout problème spécifique à un navigateur.
Si vous avez besoin d’aide supplémentaire, planifiez un appel avec nous et nous vous assisterons.
Si vous avez des retours sur cet article, ou si vous avez besoin d’aide supplémentaire :
- Cliquez sur l’icône verte du chat en direct
- Planifiez un appel avec nous
- Visitez notre communauté