Lors de l'affichage des erreurs JS dans la fonctionnalité d'analyse d'erreurs, l'erreur principale pourrait être "Erreur de script".
Contentsquare collecte les erreurs via le navigateur web, cependant la majorité des navigateurs ne partagent pas les détails d'une erreur provenant d'un autre domaine (nom de fonction, fichier, etc.) à moins qu'ils ne soient autorisés à le faire.
C'est pourquoi, pour certaines erreurs, Contentsquare ne peut signaler que "Erreur de script", car c'est un paramètre provenant du navigateur et du serveur d'hébergement.
Gestion des scripts à démasquer
Travaillez avec vos développeurs pour comprendre quelles erreurs JS ils ont du mal à reproduire et à corriger.
Vous pouvez créer un tableau pour lister vos fournisseurs tiers* et suivre quels scripts ont été démasqués avec l'attribut cross-origin.
*Veuillez noter que certains tiers ne peuvent pas être démasqués par ex. Google, Meta ou Adobe.
Comment démasquer les erreurs de script
| Remarque : Ce processus nécessitera l'aide de votre développeur. |
1. Ajouter l'en-tête HTTP Access-Control-Allow-Origin sur le script :
Access-Control-Allow-Origin
2. Configurer l'en-tête de réponse à :
Access-Control-Allow-Origin:*
Le serveur indiquera aux navigateurs que n'importe quelle origine peut récupérer ce fichier.
3. Ajouter l'attribut sur la balise script :
crossorigin="anonymous"
Version Javascript : script.crossOrigin="anonymous" (par ex. Pour le chargeur asynchrone GTM). Ce code indique au navigateur de récupérer le fichier cible de manière anonyme afin qu'aucune donnée sensible ne soit transmise via cookie ou authentification HTTP.
⚠️ Cela doit être fait uniquement sur les scripts pour lesquels l'en-tête envoyé autorise le cross-domain (étape 1 ci-dessus !).
FAQ
Pourquoi devrais-je démasquer les erreurs de script ?
Si vous avez des erreurs JS que vos développeurs ont du mal à reproduire et à corriger, vous pouvez les démasquer pour voir le message d'erreur explicite. Remarque : Ajouter l'en-tête “Access-Control-Allow-Origin” exposera le message d'erreur de script à tous les scripts tiers exécutés sur votre site web, pas seulement à Contentsquare.
Que feront les deux instructions ci-dessus ?
En mettant à jour l'en-tête (étape 1), le serveur indiquera aux navigateurs que n'importe quelle origine peut récupérer et inspecter ce fichier, y compris l'hôte. En ajoutant l'attribut crossorigin (étape 2), cela indiquera au navigateur que le fichier cible doit être récupéré "anonymement". Cela signifie qu'aucune information potentiellement identifiable par l'utilisateur, comme les cookies ou les identifiants HTTP, ne sera transmise par le navigateur au serveur lors de la demande de ce fichier.
Combien de temps faut-il pour voir les résultats ?
Après 3 heures, les erreurs de script devraient commencer à être remplacées par les détails réels des scripts dans l'analyse d'erreurs.
Quel est l'inconvénient en matière de sécurité ?
Concernant l'étape 1, la première chose à garder à l'esprit est que cet en-tête est simplement un en-tête HTTP qui est envoyé du serveur au navigateur. Le limiter pour des origines spécifiques ou désactiver complètement l'en-tête ne rend pas votre site web plus sûr si vos ressources privées ne sont pas correctement protégées. En fait, les navigateurs modernes prennent en compte l'en-tête, mais une application comme Postman ou un robot peut simplement ignorer l'en-tête. Remarque : Si vous avez corrigé toutes les erreurs et que vous êtes sûr qu'il n'y en aura pas de nouvelles, vous pouvez choisir de masquer les erreurs de script. Si de nouvelles erreurs se produisent, vous devrez répéter le processus. Lors de l'ajout de l'attribut (étape 2), le navigateur exécutera le script normalement, mais il n'y aura aucun échange d'identifiants utilisateur via des cookies, des certificats SSL côté client ou une authentification HTTP à moins que ce ne soit dans la même origine. Comme les scripts sont des fichiers statiques, ils n'ont presque jamais besoin de ces fonctionnalités de toute façon.
Comment savoir si un fichier existant a besoin d'une mise à jour de l'en-tête HTTP ?
Sur Google Chrome, ouvrez le panneau des outils de développement, allez dans l'onglet Réseau et cliquez sur le nom du fichier JS. Sous l'onglet En-têtes, recherchez les "En-têtes de réponse". Vous devriez voir "access-control-allow-origin" listé. Remarque : Vous devrez peut-être attendre que le cache du navigateur ou du réseau de diffusion de contenu (CDN) soit mis à jour.
Qui de mon équipe aura besoin de m'aider à démasquer les erreurs de script ?
Faites appel aux développeurs web de votre site pour aider à prioriser puis à démasquer les erreurs de script.
Partagez cet article avec eux et lisez la suite pour en savoir plus !
Pourquoi certaines erreurs ne sont-elles signalées que comme "Erreur de script" ?
Contentsquare collecte les erreurs via le navigateur web. La majorité des navigateurs ne partagent pas les détails d'une erreur provenant d'un autre domaine (nom de fonction, fichier, etc.) à moins qu'ils ne soient autorisés à le faire. C'est le cas, par exemple, pour des outils tiers tels que les scripts de Google Analytics.
C'est pourquoi, pour certaines erreurs, Contentsquare ne peut signaler que "Erreur de script", car c'est un paramètre provenant du navigateur et du serveur d'hébergement.
Pour corriger cela, les scripts doivent être démasqués pour signaler qu'ils acceptent d'être inspectés par des étiquettes comme les nôtres.
Comment démasquer les erreurs de script sur votre propre ordinateur
Bien que Contentsquare ne puisse pas accéder à des détails spécifiques sur l'erreur, si vous êtes en mesure de la reproduire sur votre propre ordinateur, vous devriez pouvoir obtenir des informations plus utiles sur les erreurs à démasquer en premier.
Suivez les étapes ci-dessous :
1. Ouvrez votre site web sur une page qui produit constamment des erreurs.
2. Ouvrez la console Javascript de votre navigateur (détails ici)
3. Dans la console, vous verrez un journal complet démasqué de toutes les erreurs sur cette page.
4. Utilisez la fonction ci-dessous pour vérifier ce que le tag CS voit lorsque cette erreur se produit.
window.onerror=function(errorName, file, lineNo, colNo, errStack) {
debugger;
}
Si vous ne trouvez pas ce que vous cherchez - vérifiez avec les développeurs web de votre site !
Comment démasquer les erreurs de script de manière permanente
Étape 1. Choisissez les scripts à démasquer
Plus vous démasquez de scripts, plus vous pourrez collecter d'erreurs.
Tout d'abord, vous devrez prioriser les scripts à démasquer :
- Demandez à votre(s) développeur(s) de site Ils vous aideront à sélectionner les scripts les plus accessibles pour démasquer et collecter les détails des erreurs et, par la suite, les corriger.
- Sélectionnez des scripts dans le module d'analyse d'erreurs. Certaines “Erreurs de script” pointent vers un fichier spécifique, il peut être bon de les démasquer si vous souhaitez plus de détails à leur sujet.
- Demandez aux fournisseurs tiers de faire de même. De cette façon, leurs bibliothèques JavaScript seront ajoutées à votre liste de surveillance !
Remarque : Le processus de démasquage des erreurs de script est une mise à jour générale, ce qui signifie que vous n'avez pas besoin d'attendre de nouvelles erreurs à générer avant de suivre les instructions ci-dessous pour démasquer, ce processus démasquera toutes les erreurs JS
Étape 2. Ajoutez un en-tête HTTP cross-origin sur le serveur de ces scripts
Le(s) serveur(s) hébergeant le(s) script(s) doivent envoyer cet en-tête HTTP :
| Access-Control-Allow-Origin: * |
Qui peut faire cela ?
C'est une action côté serveur qui peut être effectuée soit par les développeurs en charge du site web et/ou le fournisseur d'hébergement. Partagez cette page avec eux !
Que signifie cela ?
Le serveur indiquera aux navigateurs que tout origine peut récupérer et inspecter ce fichier, y compris l'hôte.
Dois-je attendre de nouvelles erreurs à générer pour commencer à démasquer ?
Non, le processus de démasquage des erreurs de script en utilisant un en-tête cross-origin est une mise à jour générale, ce qui signifie que vous n'avez pas besoin d'attendre de nouvelles erreurs à générer avant de suivre les instructions ci-dessous pour démasquer, ce processus démasquera tous les scripts tiers.
Puis-je utiliser le domaine de mon site web au lieu de * ?
Oui, vous pouvez également le faire si vous spécifiez l'origine complète (protocole, sous-domaine et domaine) où le script sera chargé.
Par exemple : Access-Control-Allow-Origin: https://www.domain.com et Access-Control-Allow-Origin: https://checkout.domain.com pour votre "domain.com" site web, selon l'endroit où le script est chargé.
Y a-t-il un inconvénient en matière de sécurité ?
Non. La première chose à garder à l'esprit est que cet en-tête est simplement un en-tête HTTP qui est envoyé du serveur au navigateur. Le limiter pour des origines spécifiques ou désactiver complètement l'en-tête ne rend pas votre site web plus sûr si vos ressources privées ne sont pas correctement protégées. En fait, les navigateurs modernes prennent en compte l'en-tête, mais une application comme Postman ou un robot peut simplement ignorer l'en-tête.
Comment voir les en-têtes HTTP d'un fichier ? [Pour les développeurs]
- Sur Google Chrome, ouvrez le panneau des outils de développement.
- Dans l'onglet Réseau, cliquez sur le nom du fichier JS.
- Sous l'onglet En-têtes, recherchez les “En-têtes de réponse”
- Vous devriez voir listé “access-control-allow-origin: *” après la mise à jour ci-dessus ou si aucun changement n'est nécessaire.
Remarque : Vous devrez peut-être attendre que le cache du navigateur ou du réseau de distribution de contenu (CDN) soit mis à jour.
Étape 3. Ajoutez un attribut de script crossorigin="anonymous" sur ces scripts
Sur la ou les balises appelant le ou les fichiers, ajoutez l'attribut suivant :
| <script src="http://another-domain.com/app.js"crossorigin="anonymous"></script> |
⚠️ Cela doit être fait uniquement sur les scripts pour lesquels l'en-tête envoyé autorise le cross-domain (étape 2 ci-dessus).
Qui peut faire cela ? —C'est une action côté serveur qui peut être effectuée par l'équipe de développement en charge du site. Partagez cette page avec eux !
Que signifie cela ? —Ce code indique au navigateur que le fichier cible doit être récupéré "anonymement". Cela signifie qu'aucune information potentiellement identifiant l'utilisateur, comme les cookies ou les identifiants HTTP, ne sera transmise par le navigateur au serveur lors de la demande de ce fichier.
Y a-t-il un inconvénient en matière de sécurité ? — Non. En ajoutant l'attribut, le navigateur exécutera le script normalement, mais il n'y aura aucun échange d'identifiants utilisateur via des cookies, des certificats SSL côté client ou une authentification HTTP, sauf s'il s'agit de la même origine. Comme les scripts sont des fichiers statiques, ils n'ont presque jamais besoin de ces fonctionnalités de toute façon.
Étape 4. Voir les résultats
Après 3 heures, les erreurs de script devraient commencer à être remplacées par les détails réels des scripts dans l'analyse d'erreurs.