Documentatie

Adobe Commerce: Inline JavaScript Issues on checkout page in Content Security Policy (CSP) restricted mode

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

Dit artikel verstrekt gedetailleerde verklaringen en oplossingen voor kwesties die met douane JavaScript worden ontmoet die via Adobe Commerce Admin en de Manager van de Markering van Google in Adobe Commerce 2.4.7 tijdens controle wordt toegevoegd wanneer CSP beperkte wijze wordt toegelaten. Specifiek, richt het Weigerd om gealigneerd manuscript uit te voeren omdat het de volgende de foutenmelding van het Beleid van de Veiligheid van de Inhoud overtreedt die in het browser consolelogboek verschijnt. Deze fout wijst erop dat het gealigneerde manuscript wegens de strenge montages CSP wordt geblokkeerd, die worden ontworpen om veiligheid te verbeteren door de uitvoering van onbevoegde manuscripten te verhinderen.

Beginnend van Adobe Commerce 2.4.7, wordt CSP gevormd om op te werken beperking-mode door gebrek voor betalingspagina's in de storefront en admin gebieden. Voor alle andere pagina's, werkt het op rapport-slechts wijze. Deze verbetering vereist de whitelisting van alle JavaScript, met inbegrip van douaneintegratie met derdediensten of uitbreidingen. Als u geen whitelist maakt van aangepaste JavaScript, wordt de uitvoering van deze scripts op de betalingspagina's en op de betalingspagina's in zowel de gebieden Admin als Storefront in de browser geblokkeerd.

De oplossingen in dit artikel zijn niet beperkt tot het oplossen van problemen met Google Tag Manager (GTM) Inline JavaScript of JavaScript die via de Design Configuration of Commerce Admin worden toegevoegd. Ze kunnen ook worden toegepast op andere scenario's waarbij inline JavaScript aan de Commerce-code is toegevoegd. Dit omvat aangepaste scripts die rechtstreeks zijn ingesloten in sjablonen, modules of andere onderdelen van het Adobe Commerce-ecosysteem. Door de beschreven stappen te volgen, kunt u ervoor zorgen dat alle gealigneerde manuscripten behoorlijk en toegestaan zijn uit te voeren, daardoor handhaaft de functionaliteit van uw douanecode terwijl het naleven van de CSP beperkingen.

NOTA : Het wordt hoogst geadviseerd om nieuwe JavaScript via methodes te introduceren die in de documentatie van het Beleid van de Veiligheid van de InhoudAdobe Commerce worden beschreven. Deze methoden zorgen ervoor dat uw scripts voldoen aan de CSP-richtlijnen, waardoor de beveiliging van uw Commerce-site wordt verbeterd. Door beste praktijken voor manuscriptopneming, zoals het gebruiken van externe manuscripten met juiste één keer of knoeiboelattributen te volgen, kunt u het risico van veiligheidskwetsbaarheid minimaliseren en een vlottere, veiligere gebruikerservaring verzekeren.

Beschrijving description

Controleren op details over de omgeving en stappen die moeten worden gereproduceerd.

Milieu

Adobe Commerce op cloudinfrastructuur en Adobe Commerce op locatie:

  • 2.4.7 en hoger
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Uitgave/Symptomen

Hieronder volgt een lijst met veelvoorkomende problemen en de bijbehorende oplossingen wanneer scripts worden geblokkeerd bij het uitvoeren van afrekenings- en betalingspagina's vanwege CSP-beperkingen:

  • GTM HTML-tag met Inline JavaScript
  • Inline JS in Themaconfiguratie

GTM HTML Markering met Inline JavaScript

De JavaScript van de Aangepaste HTML-tag die in Google Tag Manager is geconfigureerd, wordt niet correct uitgevoerd op de winkelpagina's voor afhandeling of betaling.

Stappen om te reproduceren

  1. Configureer Google-tagbeheer met een aangepaste HTML-tag die inline JavaScript bevat.
  2. Google Tag Manager integreren met Adobe Commerce. Verwijs naar uw rekening van Googles Analyticsin de Gids van de Verkoop en van Bevorderingen van Adobe Commerce, voor stappen vormen.
  3. Voeg een product toe aan het winkelwagentje en ga verder met het afrekenen.
  4. Open de Developer Console in een ondersteunde browser.

Verwachte Resultaten

Er verschijnen geen fouten met betrekking tot de aangepaste JavaScript in de console en het script wordt uitgevoerd.

Ware Resultaten

De fout weigerde om een manuscript uit te voeren omdat zijn knoeiboel, zijn nonce, of "onsafe-inline"niet in de manuscript-src richtlijn van het Beleid van de Veiligheid van de Inhoud verschijnt. is aanwezig in de console, en het manuscript voert niet uit.

NOTA : De nauwkeurige foutenmelding kan afhankelijk van browser variëren, maar het wijst over het algemeen erop dat het manuscript door CSP wordt geblokkeerd. Deze berichten benadrukken dat het script niet mag worden uitgevoerd vanwege de huidige CSP-instellingen.

Oorzaak

De JavaScript van de aangepaste HTML-tag van Google Tag Manager wordt door Google Tag Manager zelf in de winkel geïnjecteerd. Dit script wordt daarom niet vooraf gewhiteliseerd in de CSP-instellingen en wordt vervolgens geblokkeerd door de browser. Dit komt voor omdat CSP de uitvoering van om het even welke gealigneerde manuscripten beperkt die niet uitdrukkelijk worden toegestaan, die verbeterde veiligheid verzekeren maar extra configuratie voor douanescripten vereisen.

Oplossing

  • Whitelist de JavaScript Hash. Raadpleeg de sectie Resolutie in dit artikel voor meer informatie.
  • Onderteken Google Tag Manager Custom HTML JavaScript met een Nonce. Raadpleeg de sectie Resolutie in dit artikel voor meer informatie.

Inline JS in de Configuratie van het Thema

Dit probleem lijkt sterk op het probleem met de Custom HTML Tag met Inline JavaScript. Het verschil is dat in plaats van het toevoegen van JavaScript in de Manager Admin van de Markering van Google, het manuscript in Adobe Commerce Admin bij de pagina van de Configuratie van het Ontwerpvoor één van het beschikbare werkingsgebied wordt toegevoegd. Met deze methode kunt u een inline-HTML-fragment, JavaScript of stijlpagina toevoegen aan de kop- of voettekst van het thema. Net als bij elke andere inline JavaScript moet de whitelisting worden uitgevoerd op de uitcheckpagina.

Stappen om te reproduceren

  1. Vorm het Hoofd van de HTMLof Voettekstin Configuratie van het Ontwerpom een gealigneerde JavaScript te bevatten.
  2. Voeg een product toe aan het winkelwagentje en ga verder met het afrekenen.
  3. Open de Developer Console in een ondersteunde browser.

Verwachte Resultaten

Er verschijnen geen fouten met betrekking tot de aangepaste JavaScript in de console en het script wordt uitgevoerd.

Ware Resultaten

De fout weigerde om een manuscript uit te voeren omdat zijn knoeiboel, zijn nonce, of "onsafe-inline"niet in de manuscript-src richtlijn van het Beleid van de Veiligheid van de Inhoud verschijnt. is aanwezig in de console, en het manuscript voert niet uit.

NOTA : De nauwkeurige foutenmelding kan afhankelijk van browser variëren, maar het wijst over het algemeen erop dat het manuscript door CSP wordt geblokkeerd. Deze berichten benadrukken dat het script niet mag worden uitgevoerd vanwege de huidige CSP-instellingen.

Oorzaak

De manuscripten en de Bladen van de Stijl in het hoofd van de HTMLen Diverse HTML in de Voettekstsecties van de Configuratie van het Ontwerp zijn gemengde inputgebieden. Deze velden kunnen HTML, Stijlbladen of JavaScript bevatten. Door deze dynamische inhoud is het onmogelijk de inhoud van deze velden automatisch te hashen en te witter te maken. Als JavaScript aan een van deze velden wordt toegevoegd, moet het daarom handmatig worden gewhitelist om op de uitcheckpagina te worden uitgevoerd. Dit is nodig omdat het CDV de uitvoering van inlinescripts beperkt die niet expliciet zijn toegestaan. Hoewel dit verbeterde veiligheid verzekert, vereist het ook extra configuratie om douanescripts toe te laten.

Oplossing

Whitelist de JavaScript Hash. Raadpleeg de sectie Resolutie in dit artikel voor meer informatie.

Resolutie resolution

Elke aangeboden oplossing werkt onafhankelijk. Evalueer en selecteer zorgvuldig het bestand dat het beste aan uw specifieke behoeften voldoet. Overweeg de context van uw implementatie, de aard van de betrokken scripts en de beveiligingsvereisten van uw Adobe Commerce-site om de juiste oplossing te bepalen.

Whitelist de Hash van JavaScript

Om deze kwestie op te lossen, moeten de douane gealigneerde JavaScripts gewhitelistedin de montages zijn CSP. Dit zorgt ervoor dat het script expliciet mag worden uitgevoerd, waarbij de standaardbeveiligingsbeperkingen worden omzeild.

GTM-scripts met whitelisting zijn lastig omdat GTM de JavaScript kan wijzigen voordat deze in het Document Object Model (DOM) wordt geïnjecteerd, waaronder regeleinden en opmerkingen worden verwijderd. Bovendien kunnen Google-algoritmen in de loop der tijd zonder voorafgaande kennisgeving veranderen, waardoor de hash mogelijk ongeldig wordt. U moet de hash die door Google Chrome is gegenereerd, gebruiken zoals beschreven in stap C. U moet de hash in uw whitelist regelmatig bijwerken. U kunt ook overwegen Google Tag Manager Custom HTML JavaScript te ondertekenen met een Nonce voor een robuustere oplossing.

  1. Genereer de hash voor de hoofdtekst van de JavaScript.

    NOTA : Om de knoeiboel met succes te produceren, moet u het manuscript in de knoeiboelgenerator voeren. Het is belangrijk om het manuscript zorgvuldig te kopiëren. Sluit de openings- en afsluitende scripttags van de JavaScript uit en kopieer alle regeleinden en alle mogelijke onzichtbare tekens. Dit omvat de (eventuele) regeleinden na het openen script of andere tags. Als de hash niet precies overeenkomt met het script, wordt de uitvoering geweigerd.

    1. Op een Mac kunt u de gehele scripttekst, inclusief alle regeleinden na de openingstag van script , naar het klembord kopiëren en de volgende opdracht in de terminal uitvoeren.

      php -r "echo base64_encode(hash('sha256', shell_exec('pbpaste'), true). PHP_EOL;"

      Deze PHP opdracht neemt de inhoud van het klembord, berekent de SHA-256 hash, zet de hash om in binair getal en codeert deze vervolgens in base64 formaat, waarna het resultaat wordt afgedrukt.

    2. U kunt een verscheidenheid van online knoeiboelgenerators gebruiken om de vereiste knoeiboel voor uw manuscript tot stand te brengen.

      WAARSCHUWING: het is essentieel om te begrijpen dat als u besluit om de derdeonlineservices te gebruiken om hashes voor CSP te produceren, u de privacyimplicaties moet overwegen. Sommige services kunnen uw script uploaden naar hun servers voor hashing, waardoor gevoelige gegevens in uw script mogelijk in gevaar komen. Om dit risico te beperken, wordt aangeraden lokaal hashes te genereren met vertrouwde gereedschappen of scripts, zodat uw gegevens veilig en privé blijven.

    3. U kunt de Google Chrome-browser gebruiken om de al gegenereerde hash voor de JavaScript aan te schaffen. Deze hash is op de afhandelingspagina van de Developer Console niet uitgevoerd.

      1. Ga naar de afhandelingspagina met de Google Chrome-browser en de geblokkeerde JavaScript toegevoegd.

      2. Open de Developer Console door op Cmd+Option+J (op macOS) of Ctrl+Shift+J (op Windows/Linux) te drukken.

      3. Zoek het CSP-foutbericht in de console.

      4. In de laatste zin van het foutbericht vindt u de gegenereerde hashcode voor het geblokkeerde script.

      5. Kopieer de code na sha256-, zonder de aanhalingstekens.

        NOTA: als u veelvoudige geblokkeerde dossiers van JavaScript hebt, ziet u veelvoudige foutenmeldingen in de console. Zorg ervoor dat u precies de JavaScript identificeert die gewhitelliseerd moet worden. Het is raadzaam elk JavaScript-bestand een voor een toe te voegen en te testen om te voorkomen dat het verkeerde script per ongeluk wordt gewhitelliseerd.

        Voor meer details op hoe te om een knoeiboel voor gealigneerde JavaScript te produceren, verwijs naar de Geavanceerde Configuratie CSPin de gids van het Beleid van de Veiligheid van de Inhoud van de Ontwikkelaar van Adobe Commerce.

  2. Whitelist de knoeiboel van het Manuscript. Eerste voeg een knoeiboelaan het csp_whitelist.xml- dossier van uw module toe:

    < values >

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

    < /values>

    Waar UW-HASH-1 moet worden vervangen door de hash die u in de vorige stap hebt opgehaald.
    Als u meerdere scripts als whitelist wilt weergeven, voegt u de tag > value < /value > voor elk script toe, bijvoorbeeld:<

    < values >

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

    < waarde id= "my-new-script" type="hash" algorithm="sha256"> UW-HASH-2 < /value >

    < values >

    Als het bestand niet bestaat, maakt u het met de volgende inhoud.

    < ?xml version="1.0" encoding="UTF-8"?>

    < csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:noNamespaceSchemaLocation="urn module etc/csp_whitelist.xsd">

    < policies >

    < beleid id= "script-src">

    < values >

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

    < waarde id= "my-new-script" type="hash" algorithm="sha256"> UW-HASH-2 < /value >

    < /values>

    < /policy>

    < /policies >

    < /csp_whitelist >

  3. Duw het geheime voorgeheugen: Na het toevoegen van de knoeiboel aan het csp_whitelist.xml dossier, is het essentieel om het geheime voorgeheugenleeg te maken om ervoor te zorgen dat de veranderingen van kracht worden. Als u de cache leegmaakt, worden de opgeslagen gegevens gewist, zodat de bijgewerkte CSP-instellingen direct kunnen worden toegepast. U kunt het geheime voorgeheugen leegmaken door aan Systeem te navigeren > Hulpmiddelen > het Beheer van het Geheime voorgeheugen in het admin paneel van Commerce en selecteer de Flush knoop van het Geheime voorgeheugen van het Magento .  U kunt ook de opdrachtregel gebruiken:

    bin/magento cache:flush

    Met deze opdracht wist u alle cavetypen, zodat de nieuwe CSP-instellingen door het systeem worden herkend.

de HTML JavaScript van de Manager van de Markering van Google van het Tagbeheer van het Teken met een Nonce

Een andere manier om de uitvoering van JavaScript in GTM toe te staan, is door een nonce toe te voegen aan de openingstag van het script. Het attribuut nonce biedt een manier om specifieke inlinescripts dynamisch whitelist te geven, zodat deze wel mogen worden uitgevoerd. Voor meer details, verwijs naar Gebruikend CSP één keer leverancier om gealigneerde manuscriptendocumentatie toe te staan.

WAARSCHUWING: houd in mening dat als de rekening GTM wordt gecompromitteerd, een aanvaller kwaadwillige JavaScript in de storefront kan injecteren en het met nonce ondertekenen, toestaand zijn uitvoering. Dit kan mogelijk leiden tot diefstal van gevoelige gegevens tijdens het uitrekenen.

Adobe Commerce Development Part

NOTA : De injectie van de Variabele van CSP Nonce zal uit de doos in Adobe Commerce 2.4.8 en recentere versies beschikbaar zijn. Als u deze aangepaste injectie implementeert in eerdere versies van Adobe Commerce, moet u deze aanpassingen terugdraaien voordat u een upgrade uitvoert naar Adobe Commerce 2.4.8 of hoger. Als u Adobe Commerce 2.4.8 of hoger gebruikt, gaat u naar het gedeelte GTM-configuratie.

  1. In uw douanemodule, gebruik Nonce Leverancier CSPen ga nonce tot JavaScript over. Voor meer details, verwijs naar Basisconcepten van het Malplaatjein de documentatie van de Ontwikkelaar van Adobe Commerce.

  2. Injecteer de globale variabele met de nonce met behulp van JavaScript:

    < script >

    window.cspNonce = config.cspNonce;

    < /script>

  3. Met dit script wordt een algemene variabele cspNonce ingesteld met de waarde van de huidige nonce, die vervolgens kan worden vastgelegd in de variabele Google Tag Manager en die kan worden gebruikt om aangepaste HTML-scripts te ondertekenen om ervoor te zorgen dat deze kunnen worden uitgevoerd in het kader van het CSP. Het moet op alle pagina's worden geïnjecteerd.

Deel van de Configuratie GTM

  1. Vang de waarde van deze variabele van GTM:

    1. Creeer een Variabele van de Manager van de Markering van Google van de type Variabele van JavaScript . Geef de variabele een duidelijke naam, aangezien er later naar wordt verwezen. In dit voorbeeld is het gtmNonce .

    2. Plaats de Globale Veranderlijke Naam aan de naam van de globale variabele van JavaScript die in de vorige stap wordt ingespoten. In dit voorbeeld is het cspNonce .

  2. Wijzig uw blok van de HTML van de Douane dat JavaScript bevat u bij controle moet uitvoeren om het nonce attribuut te omvatten, verwijzend naar de Variabele GTM u eerder creeerde.

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

NOTA: Zorg ervoor dat u { checkbox 0} van de Steun document.write controleert, aangezien dit voor het manuscript om correct te functioneren essentieel is.

Door het attribuut 'nonce' toe te voegen, wordt het script ondertekend met de opgegeven nonce, zodat het veilig kan worden uitgevoerd onder de CSP (Content Security Policy).

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f