Dépannage de la page de passage en caisse de storefront en mode CSP restreint

Cet article fournit des explications et des correctifs pour les problèmes d’Adobe Commerce 2.4.7 lors de l’affichage de la page de passage en caisse en CSP restricted mode, avec le « Refusé d’exécuter le script intégré, car il enfreint la directive de la politique de sécurité du contenu suivante : « script-src … » message d’erreur dans le journal de la console du navigateur.

Produits et versions concernés

Adobe Commerce sur les infrastructures cloud, Adobe Commerce sur site et Magento Open Source :

  • 2.4.7
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Problème - La page de passage en caisse de Storefront est endommagée ou ne peut pas se charger

La page passage en caisse storefront est endommagée ou ne peut pas se charger, avec le « Refusé d’exécuter le script intégré, car il viole la directive de la politique de sécurité du contenu suivante : « script-src … » message d’erreur dans le journal de la console du navigateur.

Procédure à suivre :

  1. Allez à la vitrine.
  2. Ajoutez un produit au panier et passez en caisse.

Résultats attendus :

La page de passage en caisse se charge entièrement normalement.

Résultats réels :

La page de passage en caisse est vierge ou il manque des composants. L’erreur JS suivante s’affiche dans le journal de la console du navigateur : « Refusé d’exécuter le script intégré, car il viole la directive de politique de sécurité du contenu suivante : « script-src … »

Cause

Dans Adobe Commerce et Magento Open Source versions 2.4.7 et ultérieures, CSP est configuré en restrict-mode, par défaut, pour les pages de paiement dans les zones storefront et admin, et en mode report-only pour toutes les autres pages.
L’en-tête CSP correspondant ne contient pas le mot-clé unsafe-inline dans la directive script-src pour les pages de paiement. En outre, seuls whitelisted scripts intégrés sont autorisés.

Solution

Les utilisateurs peuvent voir des erreurs de navigateur en raison du blocage de certains scripts en raison de CSP :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

Pour résoudre ce problème, vous devez effectuer l’une des opérations suivantes :

  1. Whitelist les scripts bloqués à l’aide de la classe SecureHtmlRenderer .

  2. Utilisez la classe CSPNonceProvider pour autoriser l’exécution des scripts.
    Adobe Commerce et Magento Open Source 2.4.7 et versions ultérieures incluent un fournisseur de nonce Content Security Policy (CSP) pour faciliter la génération de chaînes de nonce uniques pour chaque requête. Ces chaînes nonce sont ensuite associées à l’en-tête CSP.

    Utilisez la fonction generateNonce dans Magento\Csp\Helper\CspNonceProvider pour obtenir une chaîne nonce.

    code language-php
    use Magento\Csp\Helper\CspNonceProvider;
    
    class MyClass
    {
    
        /**
         * @var CspNonceProvider
         */
        private $cspNonceProvider;
    
        /**
         * @param CspNonceProvider $cspNonceProvider
         */
        public function __construct(CspNonceProvider $cspNonceProvider)
        {
            $this->cspNonceProvider = $cspNonceProvider
        }
    
        /**
         * Get CSP Nonce
         *
         * @return String
         */
        public function getNonce(): string
        {
            return $this->cspNonceProvider->generateNonce();
        }
    }
    
  3. Ajoutez a hash au fichier csp_whitelist.xml de votre module.

Problème - Le mode de paiement est manquant ou ne fonctionne pas

Le mode de paiement est manquant ou ne fonctionne pas sur la page passage en caisse storefront, avec le « Refusé d’exécuter le script intégré, car il enfreint la directive de la politique de sécurité du contenu suivante : « script-src … » message d’erreur dans le journal de la console du navigateur.

Procédure à suivre :

  1. Allez à la vitrine.
  2. Ajoutez un produit au panier et passez en caisse.
  3. Sélectionnez un mode de paiement.

Résultats attendus :

Vous pouvez sélectionner un mode de paiement et passer une commande avec succès.

Résultats réels :

Le mode de paiement est manquant ou ne fonctionne pas. L’erreur JS suivante s’affiche dans le journal de la console du navigateur : « Refusé d’exécuter le script intégré, car il viole la directive de politique de sécurité du contenu suivante : « script-src … »

Cause

Dans Adobe Commerce et Magento Open Source versions 2.4.7 et ultérieures, CSP est configuré en restrict-mode, par défaut, pour les pages de paiement dans les zones storefront et admin, et en mode report-only pour toutes les autres pages.
L’en-tête CSP correspondant ne contient pas le mot-clé unsafe-inline dans la directive script-src pour les pages de paiement. En outre, seuls whitelisted scripts intégrés sont autorisés.

Solution

Les utilisateurs peuvent voir des erreurs de navigateur en raison du blocage de certains scripts en raison de CSP :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

Pour résoudre ce problème, vous devez effectuer l’une des opérations suivantes :

  1. Whitelist les scripts bloqués à l’aide de la classe SecureHtmlRenderer .

  2. Utilisez la classe CSPNonceProvider pour autoriser l’exécution des scripts.
    Adobe Commerce et Magento Open Source 2.4.7 et versions ultérieures incluent un fournisseur de nonce Content Security Policy (CSP) pour faciliter la génération de chaînes de nonce uniques pour chaque requête. Ces chaînes nonce sont ensuite associées à l’en-tête CSP.

    Utilisez la fonction generateNonce dans Magento\Csp\Helper\CspNonceProvider pour obtenir une chaîne nonce.

    code language-php
    use Magento\Csp\Helper\CspNonceProvider;
    
    class MyClass
    {
    
        /**
         * @var CspNonceProvider
         */
        private $cspNonceProvider;
    
        /**
         * @param CspNonceProvider $cspNonceProvider
         */
        public function __construct(CspNonceProvider $cspNonceProvider)
        {
            $this->cspNonceProvider = $cspNonceProvider
        }
    
        /**
         * Get CSP Nonce
         *
         * @return String
         */
        public function getNonce(): string
        {
            return $this->cspNonceProvider->generateNonce();
        }
    }
    
  3. Ajoutez a hash au fichier csp_whitelist.xml de votre module.

Problème - Le client ne peut pas passer de commande

Un client ne peut pas passer de commande avec le script intégré « a refusé d’exécuter le script intégré, car il enfreint la directive de politique de sécurité du contenu suivante : « script-src … » message d’erreur dans le journal de la console du navigateur.

Procédure à suivre :

  1. Allez à la vitrine.
  2. Ajoutez un produit au panier et passez en caisse.
  3. Sélectionnez un mode de paiement.
  4. Cliquez sur Passer une commande.

Résultats attendus :

Vous pouvez passer une commande avec succès.

Résultats réels :

Vous ne pouvez pas passer de commande. L’erreur JS suivante s’affiche dans le journal de la console du navigateur : « Refusé d’exécuter le script intégré, car il viole la directive de politique de sécurité du contenu suivante : « script-src … »

Cause

Dans Adobe Commerce et Magento Open Source versions 2.4.7 et ultérieures, CSP est configuré en restrict-mode, par défaut, pour les pages de paiement dans les zones storefront et admin, et en mode report-only pour toutes les autres pages.
L’en-tête CSP correspondant ne contient pas le mot-clé unsafe-inline dans la directive script-src pour les pages de paiement. En outre, seuls whitelisted scripts intégrés sont autorisés.

Solution

Les utilisateurs peuvent voir des erreurs de navigateur en raison du blocage de certains scripts en raison de CSP :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src

Pour résoudre ce problème, vous devez effectuer l’une des opérations suivantes :

  1. Whitelist les scripts bloqués à l’aide de la classe SecureHtmlRenderer .

  2. Utilisez la classe CSPNonceProvider pour autoriser l’exécution des scripts.
    Adobe Commerce et Magento Open Source 2.4.7 et versions ultérieures incluent un fournisseur de nonce Content Security Policy (CSP) pour faciliter la génération de chaînes de nonce uniques pour chaque requête. Ces chaînes nonce sont ensuite associées à l’en-tête CSP.

    Utilisez la fonction generateNonce dans Magento\Csp\Helper\CspNonceProvider pour obtenir une chaîne nonce.

    code language-php
    use Magento\Csp\Helper\CspNonceProvider;
    
    class MyClass
    {
    
        /**
         * @var CspNonceProvider
         */
        private $cspNonceProvider;
    
        /**
         * @param CspNonceProvider $cspNonceProvider
         */
        public function __construct(CspNonceProvider $cspNonceProvider)
        {
            $this->cspNonceProvider = $cspNonceProvider
        }
    
        /**
         * Get CSP Nonce
         *
         * @return String
         */
        public function getNonce(): string
        {
            return $this->cspNonceProvider->generateNonce();
        }
    }
    
  3. Ajoutez a hash au fichier csp_whitelist.xml de votre module.

recommendation-more-help
commerce-knowledge-base-help