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

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 der JavaScript aus, während Sie alle Zeilenumbrüche und mögliche unsichtbare Zeichen kopieren. Dazu gehören die Zeilenumbrüche (falls vorhanden) nach dem 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 aller Zeilenumbrüche nach dem Öffnen script -Tags, 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 seinen SHA-256-Hash, konvertiert den Hash in eine Binärdatei 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 die Auswirkungen auf den Datenschutz berücksichtigen müssen, wenn Sie sich entscheiden, Online-Services von Drittanbietern zu verwenden, um Hashes für CSP zu generieren. Einige Dienste können Ihr Skript zum Hashing auf ihre Server hochladen, wodurch möglicherweise vertrauliche Daten, die in Ihrem Skript enthalten sind, gefährdet werden. Um dieses Risiko zu mindern, wird empfohlen, Hashes mithilfe von vertrauenswürdigen Tools oder Skripten lokal 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 abzurufen, deren Ausführung auf der Kaufbestätigungsseite von der Developer Console verweigert wurde.

   1. Gehen Sie zur Kaufbestätigungsseite, indem Sie den Google Chrome-Browser verwenden, dem die blockierte JavaScript hinzugefügt wurde.

   2. Öffnen Sie die Developer Console, indem Sie Cmd+Option+J (unter macOS) oder Ctrl+Shift+J (unter Windows/Linux) drücken.

   3. Suchen Sie die CSP-Fehlermeldung in der Konsole.

   4. Im letzten Satz der Fehlermeldung finden Sie den generierten Hash-Code für das blockierte Skript.

   5. Kopieren Sie den Code nach dem sha256-, wobei Sie die Anführungszeichen weglassen.

      

      HINWEIS: Wenn mehrere JavaScript-Dateien blockiert sind, werden in der Konsole mehrere Fehlermeldungen angezeigt. Stellen Sie sicher, dass Sie genau die 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 das falsche Skript auf die Whitelist gesetzt wird.

      Weitere Informationen zum Generieren eines Hash für JavaScript im Inline-Modus finden Sie im Abschnitt Erweiterte CSP-Konfiguration im Handbuch zu Inhaltssicherheitsrichtlinien für Adobe Commerce-Entwickler.

Setzen Sie den Skript-Hash auf die Whitelist. Fügen Sie zuerst "" zur Datei „csp_whitelist.xml“ Ihres Moduls hinzu:

< Werte>

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

< /values>

Dabei sollte IHR-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 > Skript einen < Wert < /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">

< Richtlinien>

<-Richtlinie 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 csp_whitelist.xml-Datei hinzugefügt haben, müssen Sie den Cache leeren 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 "" > Tools > Sie Cache-) im Admin-Panel von Commerce und wählen Sie die Schaltfläche Leeren des Magento-) aus.  Verwenden Sie alternativ die Befehlszeile:

bin/magento cache:flush

Dieser Befehl löscht alle Cache-Typen und stellt sicher, dass Ihre neuen CSP-Einstellungen vom System erkannt werden.

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 Developer-Dokumentation.

Fügen Sie die globale Variable mit der Nonce mithilfe von JavaScript ein:

< Skript>

window.cspNonce = config.cspNonce;

< /script>

Dieses Skript legt eine globale Variable cspNonce mit dem Wert der aktuellen Nonce fest, die dann in der Variablen "Google Tag Manager“ erfasst und zum Signieren von benutzerdefinierten HTML-Skripten verwendet werden kann, um sicherzustellen, dass sie unter der CSP ausgeführt werden dürfen. Es sollte auf allen Seiten injiziert werden.

Erfasst den Wert dieser Variablen aus GTM:

1. Erstellen Sie eine Google Tag Manager-Variable vom Typ JavaScript-Variable. Benennen Sie die Variable klar, da sie später referenziert wird. In diesem Beispiel ist es gtmNonce.

2. Legen Sie Globaler Variablenname auf den Namen der globalen JavaScript-Variablen fest, die Sie im vorherigen Schritt eingefügt haben. In diesem Beispiel ist es cspNonce.

   

Ändern Sie Ihren benutzerdefinierten HTML-Block, der die JavaScript enthält, die Sie beim Auschecken ausführen müssen, sodass er das Nonce-Attribut enthält, das auf die zuvor erstellte GTM-Variable verweist.