Fehlerbehebung für die Storefront-Checkout-Seite in CSP eingeschränkter Modus

Dieser Artikel enthält Erklärungen und Fehlerbehebungen für die Probleme in Adobe Commerce 2.4.7 beim Anzeigen der Checkout-Seite in CSP restricted mode mit "Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …" Fehlermeldung im Browser-Konsolenprotokoll.

Betroffene Produkte und Versionen

Adobe Commerce zur Cloud-Infrastruktur, Adobe Commerce vor Ort und Magento Open Source:

  • 2,4,7
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Problem - Die Storefront-Checkout-Seite ist fehlerhaft oder kann nicht geladen werden

Die Storefront-Checkout -Seite beschädigt ist oder nicht geladen werden kann, mit dem Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …" Fehlermeldung im Browser-Konsolenprotokoll.

Zu reproduzierende Schritte:

  1. Gehen Sie zur Storefront.
  2. Fügen Sie ein Produkt zum Warenkorb hinzu und fahren Sie mit dem Checkout fort.

Erwartete Ergebnisse:

Die Checkout-Seite wird normal vollständig geladen.

Tatsächliche Ergebnisse:

Die Checkout-Seite ist leer oder es fehlen Komponenten. Die folgenden JS im Protokoll der Browserkonsole wird ein Fehler angezeigt: "Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …"

Ursache

In Adobe Commerce und Magento Open Source Version 2.4.7 und höher CSP konfiguriert in restrict-mode, standardmäßig für Zahlungsseiten in den Storefront- und Admin-Bereichen und in report-only -Modus für alle anderen Seiten.
Die entsprechende CSP -Kopfzeile enthält nicht die unsafe-inline Suchbegriff in script-src -Anweisung für Zahlungsseiten. Nur whitelisted Inline-Skripte sind zulässig.

Lösung

Benutzern werden möglicherweise Browserfehler angezeigt, da bestimmte Skripte aufgrund von CSP:

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

Um dieses Problem zu beheben, müssen Sie:

  1. Whitelist die blockierten Skripte mithilfe der SecureHtmlRenderer -Klasse.

  2. Verwenden Sie die CSPNonceProvider -Klasse, um die Ausführung von Skripten zu ermöglichen.
    Adobe Commerce und Magento Open Source 2.4.7 und höher enthalten eine Content Security Policy (CSP) nonce Anbieter zur Erleichterung der Erstellung von nonce -Zeichenfolgen für jede Anfrage. Diese nonce -Zeichenfolgen dann an die CSP -Kopfzeile.

    Verwenden Sie die generateNonce -Funktion in Magento\Csp\Helper\CspNonceProvider um nonce Zeichenfolge.

    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. Hinzufügen einer hash auf die csp_whitelist.xml -Datei.

Problem - Zahlungsmethode fehlt oder funktioniert nicht

Die Zahlungsmethode fehlt oder arbeitet nicht an der Storefront-Checkout mit dem Zeichen "Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …" Fehlermeldung im Browser-Konsolenprotokoll.

Zu reproduzierende Schritte:

  1. Gehen Sie zur Storefront.
  2. Fügen Sie ein Produkt zum Warenkorb hinzu und fahren Sie mit dem Checkout fort.
  3. Wählen Sie eine Zahlungsmethode aus.

Erwartete Ergebnisse:

Sie können eine Zahlungsmethode auswählen und mit der erfolgreichen Bestellung fortfahren.

Tatsächliche Ergebnisse:

Die Zahlungsmethode fehlt oder funktioniert nicht. Die folgenden JS im Protokoll der Browserkonsole wird ein Fehler angezeigt: "Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …"

Ursache

In Adobe Commerce und Magento Open Source Version 2.4.7 und höher CSP konfiguriert in restrict-mode, standardmäßig für Zahlungsseiten in den Storefront- und Admin-Bereichen und in report-only -Modus für alle anderen Seiten.
Die entsprechende CSP -Kopfzeile enthält nicht die unsafe-inline Suchbegriff in script-src -Anweisung für Zahlungsseiten. Nur whitelisted Inline-Skripte sind zulässig.

Lösung

Benutzern werden möglicherweise Browserfehler angezeigt, da bestimmte Skripte aufgrund von CSP:

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

Um dieses Problem zu beheben, müssen Sie:

  1. Whitelist die blockierten Skripte mithilfe der SecureHtmlRenderer -Klasse.

  2. Verwenden Sie die CSPNonceProvider -Klasse, um die Ausführung von Skripten zu ermöglichen.
    Adobe Commerce und Magento Open Source 2.4.7 und höher enthalten eine Content Security Policy (CSP) nonce Anbieter zur Erleichterung der Erstellung von nonce -Zeichenfolgen für jede Anfrage. Diese nonce -Zeichenfolgen dann an die CSP -Kopfzeile.

    Verwenden Sie die generateNonce -Funktion in Magento\Csp\Helper\CspNonceProvider um nonce Zeichenfolge.

    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. Hinzufügen einer hash auf die csp_whitelist.xml -Datei.

Problem - Der Kunde kann keine Bestellung aufgeben

Ein Kunde kann keine Bestellung mit dem Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …" Fehlermeldung im Browser-Konsolenprotokoll.

Zu reproduzierende Schritte:

  1. Gehen Sie zur Storefront.
  2. Fügen Sie ein Produkt zum Warenkorb hinzu und fahren Sie mit dem Checkout fort.
  3. Wählen Sie eine Zahlungsmethode aus.
  4. Klicks Bestellung platzieren.

Erwartete Ergebnisse:

Sie können erfolgreich eine Bestellung aufgeben.

Tatsächliche Ergebnisse:

Sie können keine Bestellung aufgeben. Die folgenden JS im Protokoll der Browserkonsole wird ein Fehler angezeigt: "Weigert, Inline-Skript auszuführen, weil es die folgende Content Security Policy-Anweisung verletzt: "script-src …"

Ursache

In Adobe Commerce und Magento Open Source Version 2.4.7 und höher CSP konfiguriert in restrict-mode, standardmäßig für Zahlungsseiten in den Storefront- und Admin-Bereichen und in report-only -Modus für alle anderen Seiten.
Die entsprechende CSP -Kopfzeile enthält nicht die unsafe-inline Suchbegriff in script-src -Anweisung für Zahlungsseiten. Nur whitelisted Inline-Skripte sind zulässig.

Lösung

Benutzern werden möglicherweise Browserfehler angezeigt, da bestimmte Skripte aufgrund von CSP:

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

Um dieses Problem zu beheben, müssen Sie:

  1. Whitelist die blockierten Skripte mithilfe der SecureHtmlRenderer -Klasse.

  2. Verwenden Sie die CSPNonceProvider -Klasse, um die Ausführung von Skripten zu ermöglichen.
    Adobe Commerce und Magento Open Source 2.4.7 und höher enthalten eine Content Security Policy (CSP) nonce Anbieter zur Erleichterung der Erstellung von nonce -Zeichenfolgen für jede Anfrage. Diese nonce -Zeichenfolgen dann an die CSP -Kopfzeile.

    Verwenden Sie die generateNonce -Funktion in Magento\Csp\Helper\CspNonceProvider um nonce Zeichenfolge.

    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. Hinzufügen einer hash auf die csp_whitelist.xml -Datei.

recommendation-more-help
8bd06ef0-b3d5-4137-b74e-d7b00485808a