Adobe Commerce: Inline-JavaScript-Probleme auf der Checkout-Seite im eingeschränkten Modus der Content Security Policy (CSP)

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

Dieser Artikel enthält ausführliche Erklärungen und Lösungen für Probleme mit benutzerdefinierten JavaScript, die über Adobe Commerce Admin und Google Tag Manager in Adobe Commerce 2.4.7 beim Checkout bei aktiviertem eingeschränkten CSP-Modus hinzugefügt wurden. Insbesondere wird das Inline-Skript "Abgelehnt, es auszuführen", behoben, da es gegen die folgende Fehlermeldung "Content Security Policy directiv e"verstößt, die im Browser-Konsolenprotokoll angezeigt wird. Dieser Fehler weist darauf hin, dass das Inline-Skript aufgrund der strengen CSP-Einstellungen blockiert wird, die die Sicherheit erhöhen sollen, indem sie die Ausführung nicht autorisierter Skripte verhindern.

Ab Adobe Commerce 2.4.7 ist CSP so konfiguriert, dass es standardmäßig im Beschränkungsmodus für Zahlungsseiten in der Storefront und in den Admin-Bereichen ausgeführt wird. Für alle anderen Seiten funktioniert er im Modus Nur Bericht . Diese Verbesserung erfordert die Whitelist aller JavaScript, einschließlich benutzerdefinierter Integrationen mit Drittanbieterdiensten oder -erweiterungen. Wenn benutzerdefinierte JavaScript nicht auf die Whitelist gesetzt werden, blockiert der Browser die Ausführung dieser Skripte auf Checkout- und Zahlungsseiten sowohl in den Admin- als auch in den Storefront-Bereichen.

Die in diesem Artikel bereitgestellten Lösungen beschränken sich nicht auf die Lösung von Problemen mit Google Tag Manager (GTM) Inline JavaScript oder JavaScript, die über die Designkonfiguration von Commerce Admin hinzugefügt wurden. Sie können auch auf andere Szenarien angewendet werden, in denen Inline-JavaScript zum Commerce-Code hinzugefügt wurde. Dazu gehören benutzerdefinierte Skripte, die direkt in Vorlagen, Module oder andere Bereiche des Adobe Commerce-Ökosystems eingebettet sind. Durch die Ausführung der beschriebenen Schritte können Sie sicherstellen, dass alle Inline-Skripte ordnungsgemäß auf die Whitelist gesetzt und ausgeführt werden können. Dadurch bleibt die Funktionalität Ihres benutzerspezifischen Codes erhalten, während Sie die CSP-Einschränkungen einhalten.

HINWEIS: Es wird dringend empfohlen, neue JavaScript mit den in der Adobe Commerce-Dokumentation Inhaltssicherheitsrichtlinien beschriebenen Methoden einzuführen. Diese Methoden stellen sicher, dass Ihre Skripte den CSP-Richtlinien entsprechen, was die Sicherheit Ihrer Commerce-Site erhöht. Befolgen Sie die Best Practices für die Skripterfassung, z. B. die Verwendung externer Skripte mit ordnungsgemäßer Nonce oder Hash-Attributen, um das Risiko von Sicherheitslücken zu minimieren und ein reibungsloseres, sichereres Benutzererlebnis zu gewährleisten.

Beschreibung description

Weitere Informationen zur Umgebung und zu reproduzierenden Schritten finden Sie unter .

Umgebung

Adobe Commerce über Cloud-Infrastruktur und Adobe Commerce vor Ort:

2.4.7 und höher
2.4.6-pX
2.4.5-pX
2.4.4-pX

Problem/Symptome

Im Folgenden finden Sie eine Liste häufiger Probleme und deren Lösungen, wenn Skripte aufgrund von CSP-Einschränkungen auf Checkout- und Zahlungsseiten nicht ausgeführt werden können:

GTM-HTML-Tag mit Inline-JavaScript
Inline-JS in der Designkonfiguration

GTM-HTML-Tag mit Inline-JavaScript

Der JavaScript aus dem im Google Tag Manager konfigurierten benutzerdefinierten HTML-Tag wird nicht ordnungsgemäß auf den Storefront-Checkout- oder Zahlungsseiten ausgeführt.

Zu reproduzierende Schritte

Konfigurieren Sie den Google Tag Manager mit einem benutzerdefinierten HTML-Tag, das Inline-JavaScript enthält.
Integrieren Sie den Google Tag Manager in Adobe Commerce. Anweisungen finden Sie unter Konfigurieren Ihres Google Analytics-Kontos im Adobe Commerce Merchandising- und Promotions-Handbuch.
Fügen Sie ein Produkt zum Warenkorb hinzu und fahren Sie mit dem Checkout fort.
Öffnen Sie die Developer Console in einem beliebigen unterstützten Browser.

Erwartete Ergebnisse

In der Konsole werden keine Fehler im Zusammenhang mit der benutzerdefinierten JavaScript angezeigt und das Skript wird erfolgreich ausgeführt.

Tatsächliche Ergebnisse

Der Fehler Weigerte die Ausführung eines Skripts ab, da sein Hash, seine Nonce oder "unsafe-inline"nicht in der script-src-Direktive der Content Security Policy enthalten sind. in der Konsole vorhanden ist und das Skript nicht ausgeführt wird.

HINWEIS: Die genaue Fehlermeldung kann je nach Browser variieren. Im Allgemeinen deutet dies jedoch darauf hin, dass das Skript von der CSP blockiert wird. Diese Meldungen zeigen, dass das Skript aufgrund der aktuellen CSP-Einstellungen nicht ausgeführt werden darf.

Ursache

Der JavaScript aus dem benutzerdefinierten HTML-Tag des Google Tag-Managers wird vom Google Tag Manager selbst in den Speicher eingefügt. Daher ist dieses Skript nicht in den CSP-Einstellungen auf die Whitelist gesetzt und wird anschließend vom Browser aus von der Ausführung ausgeschlossen. Dies liegt daran, dass das CSP die Ausführung von Inline-Skripten beschränkt, die nicht explizit zugelassen sind. Dies gewährleistet eine höhere Sicherheit, erfordert jedoch eine zusätzliche Konfiguration für benutzerdefinierte Skripte.

Lösung

Setzen Sie den JavaScript-Hash auf die Whitelist. Weitere Informationen finden Sie im Abschnitt Auflösung in diesem Artikel .
Signieren Sie Google Tag Manager Custom HTML JavaScript mit einer Nonce. Weitere Informationen finden Sie im Abschnitt Auflösung in diesem Artikel .

Inline-JS in Designkonfiguration

Dieses Problem ähnelt dem Problem "Benutzerdefiniertes HTML-Tag mit Inline-JavaScript". Der Unterschied besteht darin, dass das Skript nicht zum Google Tag-Manager-Admin hinzugefügt wird, sondern zum Adobe Commerce-Admin auf der Seite Designkonfiguration für einen der verfügbaren Bereiche hinzugefügt wird. Auf diese Weise kann ein Inline-HTML-Snippet, JavaScript oder ein Stylesheet zur Kopf- oder Fußzeile des Designs hinzugefügt werden. Genau wie jeder andere Inline-JavaScript muss die Whitelist auf der Checkout-Seite ausgeführt werden.

Zu reproduzierende Schritte

Konfigurieren Sie HTML Head oder Footer in der Designkonfiguration so, dass er einen Inline-JavaScript enthält.
Fügen Sie ein Produkt zum Warenkorb hinzu und fahren Sie mit dem Checkout fort.
Öffnen Sie die Developer Console in einem beliebigen unterstützten Browser.

Erwartete Ergebnisse

In der Konsole werden keine Fehler im Zusammenhang mit der benutzerdefinierten JavaScript angezeigt und das Skript wird erfolgreich ausgeführt.

Tatsächliche Ergebnisse

Ursache

Skripte und Stylesheets im Abschnitt HTML Head und im Abschnitt Footer der Designkonfiguration sind gemischte Eingabefelder. Diese Felder können HTML, Stylesheets oder JavaScript enthalten. Aufgrund dieses dynamischen Inhalts ist es nicht möglich, den Inhalt dieser Felder automatisch zu hashen und auf die Whitelist zu setzen. Wenn JavaScript zu einem dieser Felder hinzugefügt wird, muss es daher manuell auf die Whitelist gesetzt werden, damit es auf der Checkout-Seite ausgeführt werden kann. Dies ist erforderlich, da die CSP die Ausführung von Inline-Skripten beschränkt, die nicht explizit zulässig sind. Dies gewährleistet zwar eine höhere Sicherheit, erfordert jedoch auch zusätzliche Konfigurationen, um benutzerdefinierte Skripte zuzulassen.

Lösung

Setzen Sie den JavaScript-Hash auf die Whitelist. Weitere Informationen finden Sie im Abschnitt Auflösung in diesem Artikel .

Auflösung resolution

Jede bereitgestellte Lösung funktioniert unabhängig. Nehmen Sie sich Zeit für eine sorgfältige Evaluierung und Auswahl des Programms, das Ihren spezifischen Anforderungen am besten gerecht wird. Berücksichtigen Sie den Kontext Ihrer Implementierung, die Art der involvierten Skripte und die Sicherheitsanforderungen Ihrer Adobe Commerce-Site, um die entsprechende Lösung zu ermitteln.

JavaScript-Hash auf die Whitelist setzen

Um dieses Problem zu beheben, müssen die benutzerdefinierten Inline-JavaScripts in den CSP-Einstellungen auf die Whitelist gesetzt sein. Dadurch wird sichergestellt, dass das Skript explizit ausgeführt werden darf, wobei die standardmäßigen Sicherheitsbeschränkungen umgangen werden.

Die Whitelisting benutzerdefinierter GTM-HTML-Skripte ist schwierig, da GTM die JavaScript ändern kann, bevor sie in das Document Object Model (DOM) injiziert werden, einschließlich der Entfernung von Zeilenumbrüchen und Kommentaren. Darüber hinaus können sich die Algorithmen von Google im Laufe der Zeit ohne Vorankündigung ändern, wodurch der Hash möglicherweise invalidiert wird. Sie müssen den von Google Chrome generierten Hash wie in Schritt C beschrieben verwenden und darauf vorbereitet sein, den Hash in Ihrer Whitelist regelmäßig zu aktualisieren. Alternativ können Sie Google Tag Manager Custom HTML JavaScript mit einer Nonce signieren, um eine robustere Lösung zu erhalten.

Generieren Sie den Hash für den JavaScript-Hauptteil.

HINWEIS: Um den Hash erfolgreich zu generieren, müssen Sie das Skript in den Hash-Generator einspeisen. Es ist wichtig, das Skript sorgfältig zu kopieren. Schließen Sie die öffnenden und schließenden Skript-Tags des JavaScript aus, während Sie alle Zeilenumbrüche und alle möglichen unsichtbaren Zeichen kopieren. Dazu gehören Zeilenumbrüche (falls vorhanden) nach dem öffnenden script oder anderen Tags. Wenn der Hash nicht genau mit dem Skript übereinstimmt, wird die Ausführung verweigert.
1. In einem Mac können Sie den gesamten Skripttext, einschließlich Zeilenumbrüchen nach dem öffnenden script -Tag, in die Zwischenablage kopieren und den folgenden Befehl im Terminal ausführen.
  
  php -r "echo base64_encode(hash('sha256', shell_exec('pbpaste'), true)) . PHP_EOL;"
  
  Dieser PHP-Befehl nimmt den Inhalt der Zwischenablage, berechnet den SHA-256-Hash, konvertiert den Hash in Binärkode und kodiert ihn dann im base64-Format, um schließlich das Ergebnis zu drucken.
2. Sie können eine Vielzahl von Online-Hash-Generatoren verwenden, um den erforderlichen Hash für Ihr Skript zu erstellen.
  
  WARNUNG: Es ist wichtig zu verstehen, dass Sie bei der Verwendung von Online-Diensten von Drittanbietern zur Generierung von Hashes für CSP die Auswirkungen auf den Datenschutz berücksichtigen müssen. Einige Dienste können Ihr Skript zum Hashing auf ihre Server hochladen, was die in Ihrem Skript enthaltenen sensiblen Daten beeinträchtigen könnte. Um dieses Risiko zu verringern, wird empfohlen, Hashes lokal mit vertrauenswürdigen Tools oder Skripten zu generieren, um sicherzustellen, dass Ihre Daten sicher und privat bleiben.
3. Sie können den Google Chrome-Browser verwenden, um den bereits generierten Hash für die JavaScript zu erhalten, dem die Ausführung auf der Checkout-Seite von der Developer Console verweigert wurde.
  1. Rufen Sie die Checkout-Seite mit dem Google Chrome-Browser auf, wobei die gesperrte JavaScript hinzugefügt wurde.
  2. Öffnen Sie die Developer Console durch Drücken von Cmd+Option+J (auf macOS) oder Ctrl+Shift+J (auf Windows/Linux).
  3. Suchen Sie die CSP-Fehlermeldung in der Konsole.
  4. Im letzten Satz der Fehlermeldung finden Sie den generierten Hashcode für das Blockierungsskript.
  5. Kopieren Sie den Code nach sha256-, wobei die Anführungszeichen weggelassen werden.
    
    HINWEIS: Wenn mehrere gesperrte JavaScript-Dateien vorhanden sind, werden in der Konsole mehrere Fehlermeldungen angezeigt. Stellen Sie sicher, dass Sie die genaue JavaScript identifizieren, die auf die Whitelist gesetzt werden muss. Es wird empfohlen, jede JavaScript-Datei einzeln hinzuzufügen und zu testen, um zu vermeiden, dass versehentlich das falsche Skript auf die Whitelist gesetzt wird.
    
    Weitere Informationen zum Generieren eines Hashs für Inline-JavaScript finden Sie in der erweiterten CSP-Konfiguration im Handbuch Adobe Commerce Developer Content Security Policies .
Setzen Sie den Skript-Hash auf die Whitelist. Fügen Sie zuerst einen Hash zur Datei "csp_whitelist.xml"Ihres Moduls hinzu:

< Werte>

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

< /values>

Dabei sollte YOUR-HASH-1 durch den Hash ersetzt werden, den Sie im vorherigen Schritt erworben haben.
Um mehrere Skripte auf die Whitelist zu setzen, fügen Sie für jedes Skript ein Tag < value> < /value> hinzu, z. B.:

< Werte>

< 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>

< Werte>

Wenn die Datei nicht vorhanden ist, erstellen Sie sie mit folgendem Inhalt.

< ?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">

< Werte>

< 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>
Leeren Sie den Cache: Nachdem Sie den Hash zur Datei csp_whitelist.xml hinzugefügt haben, müssen Sie den Cache leeren 2}, um sicherzustellen, dass die Änderungen wirksam werden.Durch Leeren des Caches werden die gespeicherten Daten gelöscht, sodass die aktualisierten CSP-Einstellungen sofort angewendet werden können. Sie können den Cache leeren, indem Sie zu System navigieren. > Tools > Cache-Verwaltung im Commerce-Admin-Bereich und wählen Sie die Schaltfläche Magento-Cache leeren aus. Alternativ können Sie die Befehlszeile verwenden:

bin/magento cache:flush

Mit diesem Befehl werden alle Cache-Typen gelöscht, um sicherzustellen, dass Ihre neuen CSP-Einstellungen vom System erkannt werden.

Signieren von benutzerdefiniertem Google Tag Manager-HTML JavaScript mit einer Nonce

Eine weitere Möglichkeit, die Ausführung von JavaScript in GTM zu ermöglichen, besteht darin, dem öffnenden -Tag des Skripts eine Nonce hinzuzufügen. Das nonce-Attribut bietet eine Möglichkeit, bestimmte Inline-Skripte dynamisch auf die Whitelist zu setzen, um sicherzustellen, dass sie ausgeführt werden dürfen. Weitere Informationen finden Sie in der Dokumentation zum Verwenden des CSP-Nonce-Anbieters zum Zulassen von Inline-Skripten🔗 .

WARNUNG: Beachten Sie, dass ein Angreifer bei einer Beschädigung des GTM-Kontos böswillige JavaScript in die Storefront injizieren und mit der Nonce signieren kann, wodurch die Ausführung ermöglicht wird. Dies könnte potenziell zum Diebstahl sensibler Daten während des Checkout-Prozesses führen.

Adobe Commerce Development Part

HINWEIS: Die CSP Nonce-Variableninjektion ist in Adobe Commerce 2.4.8 und höheren Versionen standardmäßig verfügbar. Wenn Sie diese benutzerdefinierte Injektion in früheren Versionen von Adobe Commerce implementieren, aktualisieren Sie diese Anpassungen, bevor Sie auf Adobe Commerce 2.4.8 oder höher aktualisieren. Wenn Sie Adobe Commerce 2.4.8 oder höher ausführen, fahren Sie mit dem Abschnitt GTM-Konfiguration fort.

Verwenden Sie in Ihrem benutzerdefinierten Modul CSP Nonce Provider und übergeben Sie die Nonce an die JavaScript. Weitere Informationen finden Sie unter Grundlegende Vorlagenkonzepte in der Adobe Commerce-Entwicklerdokumentation.
Spritzen Sie die globale Variable mit der Nonce mithilfe von JavaScript:

< script>

window.cspNonce = config.cspNonce;

< /script>
Dieses Skript legt eine globale Variable "cspNonce"mit dem Wert der aktuellen Nonce fest, die dann in der Google Tag Manager-Variablen erfasst und zum Signieren benutzerdefinierter HTML-Skripte verwendet werden kann, um sicherzustellen, dass sie unter dem CSP ausgeführt werden dürfen. Es sollte auf allen Seiten eingefügt werden.

GTM-Konfiguration Teil

Erfassen Sie den Wert dieser Variablen aus GTM:
1. Erstellen Sie eine Google Tag-Manager-Variable vom Typ JavaScript-Variable. Geben Sie der Variablen einen klaren Namen, wie er später referenziert wird. In diesem Beispiel ist es gtmNonce.
2. Setzen Sie den globalen Variablennamen auf den Namen der globalen JavaScript-Variable, die im vorherigen Schritt eingefügt wurde. In diesem Beispiel ist es cspNonce.
Ändern Sie den Block Benutzerdefinierte HTML, der die JavaScript enthält, die Sie beim Checkout ausführen müssen, um das Nonce-Attribut einzuschließen, indem Sie auf die zuvor erstellte GTM-Variable verweisen.

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

HINWEIS: Stellen Sie sicher, dass Sie das Kontrollkästchen Support document.write aktivieren, da dies für die ordnungsgemäße Funktion des Skripts unerlässlich ist.

Durch Hinzufügen des Attributs nonce wird das Skript mit der bereitgestellten Nonce signiert, sodass es sicher unter der Content Security Policy (CSP) ausgeführt werden kann.

recommendation-more-help

3d58f420-19b5-47a0-a122-5c9dab55ec7f