Documentation

Adobe Commerce : problèmes JavaScript intégrés sur la page de passage en caisse en mode restreint CSP (Content Security Policy, stratégie de sécurité du contenu)

Last update: Mon Sep 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Cet article fournit des explications détaillées et des solutions pour les problèmes rencontrés avec JavaScript personnalisé ajouté via Adobe Commerce Admin et Google Tag Manager dans Adobe Commerce 2.4.7 lors du passage en caisse lorsque le mode restreint CSP est activé. Plus précisément, il s’agit du Refusé d’exécuter le script intégré car il enfreint la directive suivante relative à la stratégie de sécurité du contenu e message d’erreur qui s’affiche dans le journal de la console du navigateur. Cette erreur indique que le script intégré est bloqué en raison des paramètres CSP stricts, conçus pour améliorer la sécurité en empêchant l’exécution de scripts non autorisés.

À partir d’Adobe Commerce 2.4.7, la stratégie de sécurité du contenu est configurée pour fonctionner par défaut dans le mode restreint pour les pages de paiement dans les zones de storefront et d’administration. Pour toutes les autres pages, il fonctionne en mode rapport-uniquement. Cette amélioration nécessite la mise en whiteliste de tous les JavaScript, y compris les intégrations personnalisées aux services ou extensions tiers. Si le JavaScript personnalisé n’est pas mis sur liste blanche, le navigateur bloque l’exécution de ces scripts sur les pages de paiement et de passage en caisse dans les zones Admin et Storefront.

Les solutions proposées dans cet article ne se limitent pas à la résolution de problèmes liés à Google Tag Manager (GTM) Inline JavaScript ou à JavaScript ajoutés via la configuration de conception de Commerce Admin. Elles peuvent également être appliquées à d’autres scénarios où JavaScript intégré a été ajouté au code Commerce. Cela inclut les scripts personnalisés incorporés directement dans des modèles, des modules ou toute autre partie de l’écosystème Adobe Commerce. En suivant les étapes décrites, vous pouvez vous assurer que tous les scripts intégrés sont correctement placés sur liste blanche et autorisés à s’exécuter, en conservant ainsi les fonctionnalités de votre code personnalisé tout en respectant les restrictions CSP.

REMARQUE : il est vivement recommandé d’introduire de nouvelles JavaScript par le biais de méthodes décrites dans la documentation Adobe Commerce Stratégies de sécurité du contenu. Ces méthodes garantissent que vos scripts sont conformes aux directives de la CSP, ce qui renforce la sécurité de votre site Commerce. En suivant les bonnes pratiques d’inclusion de script, telles que l’utilisation de scripts externes avec des attributs de hachage ou de valeur à usage unique appropriés, vous pouvez minimiser les risques de vulnérabilité de sécurité et garantir une expérience utilisateur plus fluide et plus sécurisée.

Description description

Consultez pour plus d’informations sur l’environnement et les étapes à reproduire.

Environnement

Adobe Commerce sur l’infrastructure cloud et Adobe Commerce sur site :

  • 2.4.7 et versions ultérieures
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Problème/Symptômes

Vous trouverez ci-dessous une liste des problèmes courants et de leurs solutions lorsque les scripts ne peuvent pas s’exécuter sur les pages de paiement et de passage en caisse en raison des restrictions CSP :

  • Balise d’HTML GTM avec JavaScript intégré
  • JS intégré dans la configuration du thème

Balise d’HTML GTM avec JavaScript intégré

Le JavaScript de la balise d’HTML personnalisée configurée dans Google Tag Manager ne s’exécute pas correctement sur les pages de paiement ou de passage en caisse du storefront.

Étapes à reproduire

  1. Configurez le Gestionnaire de balises de Google avec une balise d’HTML personnalisée qui contient le JavaScript intégré.
  2. Intégration de Google Tag Manager à Adobe Commerce. Pour connaître les étapes, voir Configuration de votre compte Google Analytics dans le guide de marchandisage et de promotions Adobe Commerce.
  3. Ajoutez un produit au panier et passez à la caisse.
  4. Ouvrez Developer Console dans n’importe quel navigateur pris en charge.

Résultats attendus

Aucune erreur liée au JavaScript personnalisé n’apparaît dans la console et le script s’exécute correctement.

Résultats réels

L’erreur Refusé d’exécuter un script car son hachage, sa valeur à usage unique ou "unsafe-inline" n’apparaît pas dans la directive script-src de la stratégie de sécurité du contenu. est présent dans la console et le script ne s’exécute pas.

REMARQUE : le message d’erreur exact peut varier en fonction du navigateur, mais il indique généralement que le script est bloqué par la CSP. Ces messages soulignent que l’exécution du script n’est pas autorisée en raison des paramètres de la CSP actuelle.

Cause

La balise d’HTML personnalisé de Google Tag Manager JavaScript est injectée dans le storefront par Google Tag Manager lui-même. Par conséquent, ce script n’est pas pré-whitelisté dans les paramètres CSP et est par la suite bloqué de l’exécution par le navigateur. Cela se produit car la CSP limite l’exécution des scripts intégrés qui ne sont pas explicitement autorisés, assurant une sécurité améliorée, mais nécessitant une configuration supplémentaire pour les scripts personnalisés.

Solution

  • Ajoutez le hachage JavaScript sur liste blanche. Pour plus d’informations, reportez-vous à la section Résolution de cet article.
  • Signez Google Tag Manager HTML personnalisé JavaScript avec une valeur à usage unique. Pour plus d’informations, reportez-vous à la section Résolution de cet article.

JS intégré dans la configuration du thème

Ce problème est très similaire au problème de balise d’HTML personnalisée avec le JavaScript intégré . La différence est qu’au lieu d’ajouter JavaScript dans l’administrateur du gestionnaire de balises Google, le script est ajouté dans l’administrateur Adobe Commerce à la page Configuration de la conception pour l’une des portées disponibles. Grâce à cette méthode, un fragment de code d’HTML intégré, JavaScript ou une feuille de style peut être ajouté à l’en-tête ou au pied de page du thème. Comme toute autre JavaScript intégrée, la mise en whiteliste doit être exécutée sur la page de passage en caisse.

Étapes à reproduire

  1. Configurez En-tête d’HTML ou Pied de page dans la Configuration de conception pour contenir un JavaScript intégré.
  2. Ajoutez un produit au panier et passez à la caisse.
  3. Ouvrez Developer Console dans n’importe quel navigateur pris en charge.

Résultats attendus

Aucune erreur liée au JavaScript personnalisé n’apparaît dans la console et le script s’exécute correctement.

Résultats réels

L’erreur Refusé d’exécuter un script car son hachage, sa valeur à usage unique ou "unsafe-inline" n’apparaît pas dans la directive script-src de la stratégie de sécurité du contenu. est présent dans la console et le script ne s’exécute pas.

REMARQUE : le message d’erreur exact peut varier en fonction du navigateur, mais il indique généralement que le script est bloqué par la CSP. Ces messages soulignent que l’exécution du script n’est pas autorisée en raison des paramètres de la CSP actuelle.

Cause

Les scripts et les feuilles de style de l’HTML En-tête de l’HTML et Divers dans les sections Pied de page de la configuration de conception sont des champs d’entrée mixtes. Ces champs peuvent contenir des HTMLS, des feuilles de style ou JavaScript. En raison de ce contenu dynamique, il est impossible de hacher et de whitelister automatiquement le contenu de ces champs. Par conséquent, si JavaScript est ajouté à l’un de ces champs, il doit être placé en liste blanche manuellement pour être exécuté sur la page de passage en caisse. Cela est nécessaire, car la CSP limite l’exécution des scripts intégrés qui ne sont pas explicitement autorisés. Bien que cela garantisse une sécurité renforcée, il nécessite également une configuration supplémentaire pour autoriser les scripts personnalisés.

Solution

Ajoutez le hachage JavaScript sur liste blanche. Pour plus d’informations, reportez-vous à la section Résolution de cet article.

Résolution resolution

Chaque solution fournie fonctionne indépendamment. Évaluez soigneusement et sélectionnez celle qui répond le mieux à vos besoins spécifiques. Tenez compte du contexte de votre mise en oeuvre, de la nature des scripts concernés et des exigences de sécurité de votre site Adobe Commerce afin de déterminer la solution appropriée.

Whitelist the JavaScript Hash

Pour résoudre ce problème, les scripts JavaScript intégrés personnalisés doivent être placés sur liste blanche dans les paramètres CSP. Cela garantit que le script est explicitement autorisé à s’exécuter, en contournant les restrictions de sécurité par défaut.

La mise en whiteliste des scripts d’HTML personnalisés de GTM est difficile, car GTM peut modifier le JavaScript avant de l’injecter dans le modèle d’objet de document (DOM), y compris la suppression des sauts de ligne et des commentaires. En outre, les algorithmes de Google peuvent changer au fil du temps sans préavis, ce qui peut invalider le hachage. Vous devez utiliser le hachage généré par Google Chrome comme décrit à l’étape C et être prêt à le mettre à jour régulièrement dans votre liste blanche. Vous pouvez également envisager de signer Google Tag Manager Custom HTML JavaScript avec une valeur à usage unique pour une solution plus robuste.

  1. Générez le hachage pour le corps JavaScript.

    REMARQUE : pour générer le hachage avec succès, vous devez alimenter le script dans le générateur de hachage. Il est important de copier le script avec soin. Excluez les balises de script d’ouverture et de fermeture de JavaScript, tout en copiant tous les sauts de ligne et les caractères invisibles possibles. Cela inclut les sauts de ligne (le cas échéant) après l’ouverture de script ou d’autres balises. Si le hachage ne correspond pas exactement au script, l’exécution est refusée.

    1. Sur un Mac, vous pouvez copier l’intégralité du corps du script, y compris les sauts de ligne après la balise script d’ouverture, dans le Presse-papiers, et exécuter la commande suivante dans le terminal.

      php -r "echo base64_encode(hash('sha256', shell_exec('pbpaste'), true)) . PHP_EOL;"

      Cette commande PHP prend le contenu du presse-papiers, calcule son hachage SHA-256, convertit le hachage en binaire, puis le code au format base64, pour finalement imprimer le résultat.

    2. Vous pouvez utiliser divers générateurs de hachage en ligne pour créer le hachage requis pour votre script.

      AVERTISSEMENT : Il est essentiel de comprendre que si vous décidez d’utiliser des services en ligne tiers pour générer des hachages pour la CSP, vous devez tenir compte des implications en matière de confidentialité. Certains services peuvent charger votre script sur leurs serveurs à des fins de hachage, ce qui peut compromettre les données sensibles incluses dans votre script. Pour atténuer ce risque, il est recommandé de générer des hachages localement à l’aide d’outils ou de scripts approuvés, en veillant à ce que vos données restent protégées et privées.

    3. Vous pouvez utiliser le navigateur Chrome Google pour acquérir le hachage déjà généré pour JavaScript qui s’est vu refuser l’exécution sur la page de passage en caisse à partir de Developer Console.

      1. Accédez à la page de passage en caisse à l’aide du navigateur Google Chrome avec le JavaScript bloqué ajouté.

      2. Ouvrez Developer Console en appuyant sur Cmd+Option+J (sur macOS) ou Ctrl+Shift+J (sous Windows/Linux).

      3. Recherchez le message d’erreur CSP dans la console.

      4. Dans la dernière phrase du message d’erreur, vous trouvez le code de hachage généré pour le script bloqué.

      5. Copiez le code aprèssha256-, en omettant les guillemets.

        REMARQUE : Si vous avez plusieurs fichiers JavaScript bloqués, plusieurs messages d’erreur s’affichent dans la console. Veillez à identifier le JavaScript exact qui doit être placé sur liste blanche. Il est conseillé d’ajouter et de tester chaque fichier JavaScript un par un afin d’éviter de mettre par erreur en whiteliste le mauvais script.

        Pour plus d’informations sur la génération d’un hachage pour JavaScript intégré, reportez-vous à la configuration avancée de la CSP du guide Stratégies de sécurité du contenu du développeur Adobe Commerce.

  2. Ajoutez le hachage de script sur liste blanche. Ajoutez tout d’abord un hachage au fichier csp_whitelist.xml de votre module :

    < valeurs>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < /values>

    Où YOUR-HASH-1 doit être remplacé par le hachage que vous avez acquis à l’étape précédente.
    Pour placer plusieurs scripts sur liste blanche, ajoutez une balise < value> < /value> pour chaque script, par exemple :

    < valeurs>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < valeurs>

    Si le fichier n’existe pas, créez-le avec le contenu suivant.

    < ?xml version="1.0" encoding="UTF-8"?>

    < csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">

    < policies>

    < policy id="script-src">

    < valeurs>

    < value id="my-script" type="hash" algorithm="sha256"> YOUR-HASH-1< /value>

    < value id="my-new-script" type="hash" algorithm="sha256"> YOUR-HASH-2< /value>

    < /values>

    < /policy>

    < /policies>

    < /csp_whitelist>

  3. Videz le cache : après avoir ajouté le hachage au fichier csp_whitelist.xml, il est essentiel de vider le cache pour s’assurer que les modifications prennent effet. Le vidage du cache efface les données stockées, ce qui permet d’appliquer immédiatement les paramètres CSP mis à jour. Vous pouvez vider le cache en accédant à Système > Outils > Gestion du cache dans le panneau d’administration de Commerce et sélectionnez le bouton Vider le cache du Magento.  Vous pouvez également utiliser la ligne de commande :

    bin/magento cache:flush

    Cette commande efface tous les types de cache, en veillant à ce que vos nouveaux paramètres CSP soient reconnus par le système.

Sign Google Tag Manager HTML personnalisé JavaScript avec une valeur à usage unique

Une autre manière de permettre l’exécution de JavaScript dans GTM consiste à ajouter une valeur à usage unique à la balise d’ouverture du script. L’attribut nonce permet de whitelister dynamiquement des scripts intégrés spécifiques, en s’assurant qu’ils sont autorisés à s’exécuter. Pour plus d'informations, reportez-vous à la documentation Utilisation du fournisseur à usage unique CSP pour autoriser les scripts intégrés .

AVERTISSEMENT : Gardez à l’esprit que si le compte GTM est compromis, un attaquant peut injecter un JavaScript malveillant dans le storefront et le signer avec la valeur à usage unique, ce qui permet son exécution. Cela peut entraîner le vol de données sensibles pendant le processus de passage en caisse.

Adobe Commerce Development Part

REMARQUE : l’injection de variable à usage unique CSP sera disponible clé en main dans Adobe Commerce 2.4.8 et versions ultérieures. Si vous implémentez cette injection personnalisée dans des versions antérieures d’Adobe Commerce, annulez ces personnalisations avant de passer à Adobe Commerce 2.4.8 ou version ultérieure. Si vous exécutez Adobe Commerce 2.4.8 ou version ultérieure, passez à la section Configuration de GTM .

  1. Dans votre module personnalisé, utilisez CSP Nonce Provider et transmettez la valeur à usage unique à JavaScript. Pour plus d’informations, reportez-vous à la section Concepts de modèle de base de la documentation du développeur Adobe Commerce.

  2. injectez la variable globale avec la valeur à usage unique à l’aide de JavaScript :

    < script>

    window.cspNonce = config.cspNonce;

    < /script>

  3. Ce script définit une variable globale cspNonce avec la valeur de la valeur à usage unique actuelle, qui peut ensuite être capturée dans la variable Gestionnaire de balises de Google et utilisée pour signer des scripts d’HTML personnalisé afin de s’assurer qu’ils sont autorisés à s’exécuter sous la stratégie de sécurité du contenu. Il doit être injecté dans toutes les pages.

Partie de configuration de GTM

  1. Capturez la valeur de cette variable à partir de GTM :

    1. Créez une variable Gestionnaire de balises Google de type Variable JavaScript. Attribuez un nom clair à la variable, car elle sera référencée ultérieurement. Dans cet exemple, il s’agit de gtmNonce.

    2. Définissez le nom de variable globale sur le nom de la variable globale JavaScript injectée à l’étape précédente. Dans cet exemple, il s’agit de cspNonce.

  2. Modifiez votre bloc d’HTML personnalisé qui contient le JavaScript que vous devez exécuter lors de l’extraction pour inclure l’attribut nonce, en référençant la variable GTM que vous avez créée précédemment.

< script nonce="{{gtmNonce}}">
                     console.log("This is a test");
              < /script>

REMARQUE : Assurez-vous de cocher la case Support document.write , car cela est essentiel au bon fonctionnement du script.

En ajoutant l’attribut nonce , le script est signé avec la valeur à usage unique fournie, ce qui lui permet de s’exécuter en toute sécurité sous la stratégie de sécurité du contenu (CSP).

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f