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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :

Créé pour :

Développeur

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 dans CSP restricted mode, avec le message d’erreur "Refusé d’exécuter le script intégré car il enfreint la directive de sécurité du contenu suivante : "script-src …" dans le journal de la console du navigateur.

Produits et versions concernés

Adobe Commerce sur l’infrastructure 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 paiement du storefront est rompue ou ne peut pas se charger

La page storefront checkout est rompue ou ne peut pas se charger, avec le message d’erreur "Refusé d’exécuter le script intégré car il enfreint la directive de politique de sécurité du contenu suivante : "script-src …" dans le journal de la console du navigateur.

Étapes à reproduire :

Allez à la vitrine.
Ajoutez un produit au panier et passez au passage 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 vide ou comporte des composants manquants. L’erreur JS suivante s’affiche dans le journal de la console du navigateur : "Refusé d’exécuter le script intégré car il enfreint la directive de sécurité du contenu suivante : "script-src …"

Cause

Dans Adobe Commerce et Magento Open Source version 2.4.7 et ultérieure, CSP est configuré dans 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 rencontrer 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 : :

Whitelist les scripts bloqués utilisant la classe SecureHtmlRenderer.

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

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

code language-php

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(); } }`

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();
    }
}

Ajoutez un 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 storefront checkout, avec le message d’erreur "Refusé d’exécuter le script intégré car il enfreint la directive de politique de sécurité du contenu suivante : "script-src …" dans le journal de la console du navigateur.

Étapes à reproduire :

Allez à la vitrine.
Ajoutez un produit au panier et passez au passage en caisse.
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 enfreint la directive de sécurité du contenu suivante : "script-src …"

Cause

Solution

Les utilisateurs peuvent rencontrer 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 : :

Whitelist les scripts bloqués utilisant la classe SecureHtmlRenderer.

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

code language-php

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(); } }`

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();
    }
}

Ajoutez un 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 message d’erreur "Refusé d’exécuter le script intégré car il enfreint la directive de sécurité du contenu suivante : "script-src …" dans le journal de la console du navigateur.

Étapes à reproduire :

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

Résultats attendus :

Vous pouvez passer une commande avec succès.

Résultats réels :

Vous ne pouvez pas passer 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 enfreint la directive de sécurité du contenu suivante : "script-src …"

Cause

Solution

Les utilisateurs peuvent rencontrer 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 : :

Whitelist les scripts bloqués utilisant la classe SecureHtmlRenderer.

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

code language-php

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(); } }`

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();
    }
}

Ajoutez un hash au fichier csp_whitelist.xml de votre module.

recommendation-more-help

8bd06ef0-b3d5-4137-b74e-d7b00485808a