Dokumentation

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)

Den här artikeln innehåller detaljerade förklaringar och lösningar för problem som uppstår med anpassade JavaScript som har lagts till via Adobe Commerce Admin och Google Tag Manager i Adobe Commerce 2.4.7 vid utcheckning när begränsat CSP-läge är aktiverat. Den åtgärdar Refused to execute inline script eftersom den bryter mot följande Content Security Policy directiv e-felmeddelande som visas i webbläsarens konsollogg. Det här felet anger att det infogade skriptet är blockerat på grund av de strikta CSP-inställningarna, som har utformats för att förbättra säkerheten genom att förhindra att obehöriga skript körs.

Från och med Adobe Commerce 2.4.7 är CSP konfigurerat att fungera i restrict-mode som standard för betalningssidor i butiks- och administratörsområdena. För alla andra sidor fungerar den i läget enbart rapport. Den här förbättringen kräver vitlistning av alla JavaScript, inklusive anpassad integrering med tredjepartstjänster eller tillägg. Om du inte vitlistar anpassade JavaScript blockerar webbläsaren körningen av dessa skript på utchecknings- och betalningssidor både i Admin- och Storefront-området.

Lösningarna i den här artikeln är inte begränsade till att lösa problem med Google Tag Manager (GTM) Inline JavaScript eller JavaScript som lagts till via designkonfigurationen i Commerce Admin. De kan också användas i andra scenarier där infogad JavaScript har lagts till i Commerce-koden. Detta inkluderar anpassade skript som är inbäddade direkt i mallar, moduler eller andra delar av Adobe Commerce ekosystem. Genom att följa de beskrivna stegen kan du se till att alla infogade skript vitlistas och tillåts att köras, vilket betyder att funktionen i den anpassade koden bevaras samtidigt som du följer begränsningarna i CSP.

Obs! Vi rekommenderar att du introducerar nya JavaScript via metoder som beskrivs i Adobe Commerce-dokumentationen Innehållsskyddsprofiler. Dessa metoder ser till att dina skript följer riktlinjerna för CSP och förbättrar säkerheten på din Commerce-webbplats. Genom att följa god praxis för skriptinkludering, t.ex. använda externa skript med riktiga nonce- eller hash-attribut, kan du minimera risken för säkerhetsluckor och säkerställa en smidigare och säkrare användarupplevelse.

Beskrivning description

Läs mer om miljö och hur du reproducerar.

Miljö

Adobe Commerce i molninfrastrukturen och Adobe Commerce lokalt:

  • 2.4.7 och senare
  • 2.4.6-pX
  • 2.4.5-pX
  • 2.4.4-pX

Problem/symtom

Nedan finns en lista över vanliga problem och lösningar för dem när skript blockeras från att köras på utchecknings- och betalningssidor på grund av begränsningar i CSP:

  • GTM HTML-tagg med inline JavaScript
  • Inline JS in Theme Configuration

GTM HTML-tagg med inline JavaScript

JavaScript från taggen Custom HTML som konfigurerats i Google Tag Manager körs inte korrekt på utchecknings- eller betalningssidorna för butiken.

Steg som ska återskapas

  1. Konfigurera Google Tag Manager med en anpassad HTML-tagg som innehåller infogad JavaScript.
  2. Integrera Google Tag Manager med Adobe Commerce. Se Konfigurera ditt Google Analytics-konto i Adobe Commerce Merchandising and Promotion Guide för steg.
  3. Lägg en produkt i kundvagnen och fortsätt till kassan.
  4. Öppna Developer Console i en webbläsare som stöds.

Förväntade resultat

Inga fel relaterade till den anpassade JavaScript visas i konsolen och skriptet körs.

Faktiska resultat

Felet Avvisade körning av ett skript eftersom dess hash, nonce eller unsafe-inline inte visas i skriptsrc-direktivet i Content Security Policy. finns i konsolen och skriptet körs inte.

Obs! Det exakta felmeddelandet kan variera beroende på webbläsaren, men det betyder vanligtvis att skriptet blockeras av CSP. Dessa meddelanden markerar att skriptet inte tillåts köras på grund av de aktuella CSP-inställningarna.

Orsak

JavaScript från taggen Google Tag Manager Custom HTML är inmatad i butiken av Google Tag Manager. Detta skript är därför inte förvitlistat i CSP-inställningarna och blockeras därefter från att köras av webbläsaren. Detta beror på att CSP begränsar körningen av infogade skript som inte uttryckligen tillåts, vilket ger bättre säkerhet men kräver ytterligare konfiguration för anpassade skript.

Lösning

  • Vitlista JavaScript Hash. Mer information finns i avsnittet Upplösning i den här artikeln.
  • Signera Google Tag Manager Custom HTML JavaScript med Nonce. Mer information finns i avsnittet Upplösning i den här artikeln.

Infogad JS i temakonfiguration

Det här problemet påminner mycket om Custom HTML Tag with Inline JavaScript. Skillnaden är att i stället för att lägga till JavaScript i Google Tag Manager Admin, läggs skriptet till i Adobe Commerce Admin på sidan Designkonfiguration för ett av de tillgängliga omfattningarna. Med den här metoden kan du lägga till ett textbundet HTML-kodfragment, JavaScript eller formatmall i temats sidhuvud eller sidfot. Precis som alla andra inline-JavaScript-program krävs vitlistning för att köras på utcheckningssidan.

Steg att återskapa

  1. Konfigurera HTML Head eller Footer i Design Configuration så att den innehåller en intern JavaScript.
  2. Lägg en produkt i kundvagnen och fortsätt till kassan.
  3. Öppna Developer Console i en webbläsare som stöds.

Förväntade resultat

Inga fel relaterade till den anpassade JavaScript visas i konsolen och skriptet körs.

Faktiska resultat

Felet Avvisade körning av ett skript eftersom dess hash, nonce eller unsafe-inline inte visas i skriptsrc-direktivet i Content Security Policy. finns i konsolen och skriptet körs inte.

Obs! Det exakta felmeddelandet kan variera beroende på webbläsaren, men det betyder vanligtvis att skriptet blockeras av CSP. Dessa meddelanden markerar att skriptet inte tillåts köras på grund av de aktuella CSP-inställningarna.

Orsak

Skript och formatmallar i HTML Head och Övrigt HTML i Footer -avsnitten i designkonfigurationen är blandade indatafält. Dessa fält kan innehålla HTML, formatmallar eller JavaScript. På grund av detta dynamiska innehåll är det omöjligt att automatiskt hash-lista och vitlista innehållet i dessa fält. Om JavaScript läggs till i något av dessa fält måste det därför vitlistas manuellt för att köras på utcheckningssidan. Detta är nödvändigt eftersom CSP begränsar körningen av infogade skript som inte är uttryckligen tillåtna. Detta garanterar förbättrad säkerhet, men kräver även ytterligare konfiguration för att tillåta anpassade skript.

Lösning

Vitlista JavaScript Hash. Mer information finns i avsnittet Upplösning i den här artikeln.

Upplösning resolution

Alla lösningar som tillhandahålls fungerar oberoende av varandra. Utvärdera och välj den som bäst passar dina specifika behov. Ta hänsyn till implementeringens kontext, vilka skript som används och säkerhetskraven för din Adobe Commerce-webbplats för att avgöra vilken lösning som passar bäst.

Vitlista JavaScript Hash

För att lösa det här problemet måste de anpassade infogade JavaScript-skripten vara vitlistade i CSP-inställningarna. Detta säkerställer att skriptet uttryckligen tillåts köras, utan att standardsäkerhetsbegränsningarna överskrids.

Det är svårt att vitlista egna HTML-skript i GTM eftersom GTM kan modifiera JavaScript innan det injiceras i DOM (Document Object Model), inklusive borttagning av radbrytningar och kommentarer. Dessutom kan Google algoritmer ändras över tid utan föregående meddelande, vilket kan göra hash-filen ogiltig. Du måste använda hashen som genererats av Google Chrome enligt beskrivningen i steg C och vara redo att uppdatera hashen i din vitlista regelbundet. Du kan också överväga att signera Google Tag Manager Custom HTML JavaScript med Nonce för en mer robust lösning.

  1. Generera hash-koden för JavaScript-brödtexten.

    Obs! Om du vill generera hash-koden måste du mata in skriptet i hash-generatorn. Det är viktigt att kopiera skriptet noggrant. Uteslut de inledande och avslutande script-taggarna i JavaScript, samtidigt som alla radbrytningar och eventuella osynliga tecken kopieras. Detta inkluderar radbrytningarna (om sådana finns) efter öppningen script eller andra taggar. Om hashen inte matchar skriptet exakt nekas körning.

    1. På en Mac kan du kopiera hela skriptbrödtexten, inklusive eventuella radbrytningar efter den inledande script-taggen, till Urklipp och köra följande kommando i terminalen.

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

      Det här PHP-kommandot tar urklippsinnehållet, beräknar SHA-256-hash-värdet, konverterar hash-värdet till binärt och kodar det sedan i base64-format, och resultatet skrivs till slut ut.

    2. Du kan använda en mängd olika hash-generatorer online för att skapa den hash som krävs för skriptet.

      VARNING! Det är viktigt att förstå att om du använder onlinetjänster från tredje part för att generera hascher för CSP måste du ta hänsyn till sekretesskonsekvenserna. Vissa tjänster kan överföra skriptet till sina servrar för att hash-koda, vilket kan äventyra känsliga data som ingår i skriptet. För att minska den här risken rekommenderar vi att du genererar hash-värden lokalt med hjälp av pålitliga verktyg eller skript för att säkerställa att dina data förblir säkra och privata.

    3. Du kan använda webbläsaren Google Chrome för att hämta den redan genererade hashen för JavaScript som nekades körning på utcheckningssidan från Developer Console.

      1. Gå till utcheckningssidan med webbläsaren Google Chrome med den blockerade JavaScript tillagd.

      2. Öppna Developer Console genom att trycka på Cmd+Option+J (på macOS) eller Ctrl+Shift+J (på Windows/Linux).

      3. Leta reda på CSP-felmeddelandet i konsolen.

      4. I den sista meningen i felmeddelandet hittar du den genererade hashkoden för det blockerade skriptet.

      5. Kopiera koden efter sha256-, utelämna citattecknen.

        Obs! Om du har flera blockerade JavaScript-filer visas flera felmeddelanden i konsolen. Se till att du vet vilken JavaScript som behöver vitlistas. Du bör lägga till och testa varje JavaScript-fil en i taget för att undvika att felaktigt vitlista fel skript.

        Mer information om hur du genererar en hash för infogad JavaScript finns i Avancerad CSP-konfiguration i guiden Adobe Commerce Developer Content Security Policies.

  2. Vitlista skripthashen. Lägg först till en hash i modulen csp_whitelist.xml:

    < värden >

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

    < /values>

    Där YOUR-HASH-1 ska ersättas med hash som du förvärvade i föregående steg.
    Om du vill vitlista flera skript lägger du till taggen < value> < /value> för varje skript, till exempel:

    < värden >

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

    < värden >

    Om filen inte finns skapar du den med följande innehåll.

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

    < profiler>

    < policy id="script-src">

    < värden >

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

  3. Töm cacheminnet: När du har lagt till hashen i filen csp_whitelist.xml är det viktigt att tömma cacheminnet för att ändringarna ska börja gälla. När du tömmer cachen rensas lagrade data, vilket innebär att de uppdaterade CSP-inställningarna kan användas omedelbart. Du kan tömma cachen genom att gå till System > Verktyg > Cachehantering på Commerce-administratörspanelen och välj knappen Rensa Magento-cache .  Du kan också använda kommandoraden:

    bin/magento cache:flush

    Det här kommandot rensar alla cachetyper och ser till att dina nya CSP-inställningar känns igen av systemet.

Signera Google Tag Manager Custom HTML JavaScript med Nonce

Ett annat sätt att tillåta körning av JavaScript i GTM är genom att lägga till ett nonce i skriptets öppningstagg. Med attributet nonce kan du vitlista specifika infogade skript dynamiskt så att de kan köras. Mer information finns i Använda CSP-providern för att tillåta textbundna skript -dokumentation.

VARNING! Tänk på att om GTM-kontot är komprometterat kan en angripare lägga in skadlig JavaScript i butiken och signera det direkt, vilket gör att programmet kan köras. Detta kan potentiellt leda till stöld av känsliga data under utcheckningsprocessen.

Adobe Commerce Development Part

OBS! Injektionen av variabeln CSP Nonce kommer att vara tillgänglig direkt i Adobe Commerce 2.4.8 och senare. Om du implementerar den här anpassade injektionen i tidigare versioner av Adobe Commerce bör du återställa dessa anpassningar innan du uppgraderar till Adobe Commerce 2.4.8 eller senare. Om du kör Adobe Commerce 2.4.8 eller senare går du vidare till avsnittet GTM-konfiguration.

  1. Använd CSP Nonce Provider i din anpassade modul och skicka nonce till JavaScript. Mer information finns i Grundläggande mallbegrepp i dokumentationen för Adobe Commerce Developer.

  2. Mata in den globala variabeln med "nonce" med JavaScript:

    < skript>

    window.cspNonce = config.cspNonce;

    < /script>

  3. Det här skriptet ställer in en global variabel cspNonce med värdet för aktuellt nonce, som sedan kan fångas in i Google Tag Manager-variabeln och användas för att signera anpassade HTML-skript för att säkerställa att de kan köras under CSP. Den ska injiceras på alla sidor.

GTM-konfigurationsdel

  1. Hämta värdet för den här variabeln från GTM:

    1. Skapa en Google Tag Manager-variabel av typen JavaScript-variabel. Ge variabeln ett tydligt namn, som det kommer att refereras till senare. I det här exemplet är det gtmNonce.

    2. Ange Global variabelnamn till namnet på den globala JavaScript-variabeln som injicerades i föregående steg. I det här exemplet är det cspNonce.

  2. Ändra blocket för anpassade HTML som innehåller den JavaScript som du måste köra vid utcheckning för att inkludera attributet nonce och referera till den GTM-variabel som du skapade tidigare.

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

Obs! Kontrollera att kryssrutan Support document.write är markerad, eftersom detta är nödvändigt för att skriptet ska fungera korrekt.

Genom att lägga till attributet nonce signeras skriptet med angivet nonce, vilket gör att det kan köras säkert under CSP (Content Security Policy).

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