Documentazione

Adobe Commerce: problemi in linea di JavaScript nella pagina di pagamento in modalità limitata dell’informativa sulla sicurezza dei contenuti (CSP)

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

Questo articolo fornisce spiegazioni dettagliate e soluzioni per i problemi riscontrati con JavaScript personalizzato aggiunto tramite Adobe Commerce Admin e Google Tag Manager in Adobe Commerce 2.4.7 durante l'estrazione quando è abilitata la modalità limitata CSP. In particolare, si rivolge a Rifiutato di eseguire lo script in linea perché viola il seguente messaggio di errore di direttive e del criterio sulla sicurezza dei contenuti visualizzato nel registro della console del browser. Questo errore indica che lo script in linea è bloccato a causa delle impostazioni CSP rigide, progettate per migliorare la sicurezza impedendo l’esecuzione di script non autorizzati.

A partire da Adobe Commerce 2.4.7, CSP è configurato per funzionare in modalità limitata per impostazione predefinita per le pagine di pagamento nelle aree vetrina e amministrazione. Per tutte le altre pagine, funziona in modalità solo report. Questo miglioramento richiede l’inserimento in whitelist di tutti i JavaScript, incluse le integrazioni personalizzate con servizi o estensioni di terze parti. Se non si inserisce il JavaScript personalizzato nella whitelist, il browser blocca l’esecuzione di tali script nelle pagine di pagamento e di pagamento sia nell’area Amministratore che in quella Storefront.

Le soluzioni fornite in questo articolo non si limitano alla risoluzione dei problemi con Google Tag Manager (GTM) Inline JavaScript o JavaScript aggiunti tramite la configurazione di progettazione dell’amministratore di Commerce. Possono essere applicate anche ad altri scenari in cui JavaScript in linea è stato aggiunto al codice Commerce. Ciò include script personalizzati incorporati direttamente all’interno di modelli, moduli o qualsiasi altra parte dell’ecosistema Adobe Commerce. Seguendo i passaggi descritti, puoi garantire che tutti gli script in linea siano correttamente inseriti nella whitelist e autorizzati all’esecuzione, mantenendo così la funzionalità del codice personalizzato nel rispetto delle restrizioni CSP.

NOTA: si consiglia vivamente di introdurre nuovo JavaScript tramite i metodi descritti nella documentazione di Adobe Commerce sui criteri di sicurezza dei contenuti. Questi metodi garantiscono che gli script siano conformi alle linee guida CSP, migliorando la sicurezza del sito Commerce. Seguendo le best practice per l’inclusione degli script, ad esempio utilizzando script esterni con attributi nonce o hash appropriati, puoi ridurre al minimo il rischio di vulnerabilità di sicurezza e garantire un’esperienza utente più fluida e sicura.

Descrizione description

Rivedi i dettagli sull’ambiente e i passaggi da riprodurre.

Ambiente

Adobe Commerce su infrastruttura cloud e Adobe Commerce on-premise:

  • 2.4.7 e versioni successive
  • 2,4,6-pX
  • 2,4,5-pX
  • 2,4,4-pX

Problema/Sintomi

Di seguito è riportato un elenco di problemi comuni e delle relative soluzioni quando l’esecuzione degli script sulle pagine di pagamento e di pagamento è bloccata a causa di restrizioni CSP:

  • Tag HTML GTM con JavaScript in linea
  • JS in linea nella configurazione del tema

Tag HTML GTM con JavaScript in linea

Il JavaScript dal tag HTML personalizzato configurato in Google Tag Manager non viene eseguito correttamente nelle pagine di pagamento o di pagamento della vetrina.

Passaggi da riprodurre

  1. Configura Google Tag Manager con un tag HTML personalizzato contenente JavaScript in linea.
  2. Integrare Google Tag Manager con Adobe Commerce. Per ulteriori informazioni, consulta Configurare l'account Google Analytics nella Guida di Adobe Commerce Merchandising and Promotions.
  3. Aggiungi un prodotto al carrello e procedi al pagamento.
  4. Apri Developer Console in qualsiasi browser supportato.

Risultati previsti

Nella console non vengono visualizzati errori relativi al JavaScript personalizzato e lo script viene eseguito correttamente.

Risultati effettivi

L'errore Rifiutato di eseguire uno script perché il relativo hash, il relativo nonce o 'unsafe-inline' non viene visualizzato nella direttiva script-src dei criteri di sicurezza dei contenuti. è presente nella console e lo script non viene eseguito.

NOTA: il messaggio di errore esatto può variare a seconda del browser, ma in genere indica che lo script è bloccato dai CSP. Questi messaggi evidenziano che non è consentita l’esecuzione dello script a causa delle impostazioni CSP correnti.

Causa

Il JavaScript dal tag HTML personalizzato di Google Tag Manager viene inserito nella vetrina dallo stesso Google Tag Manager. Di conseguenza, questo script non viene pre-inserito nella whitelist delle impostazioni CSP e viene successivamente bloccato dall’esecuzione da parte del browser. Ciò si verifica perché il CSP limita l’esecuzione di eventuali script in linea non esplicitamente consentiti, garantendo una maggiore sicurezza ma richiedendo una configurazione aggiuntiva per gli script personalizzati.

Soluzione

  • Inserisci nella whitelist l’hash di JavaScript. Per ulteriori informazioni, consulta la sezione Risoluzione in questo articolo.
  • Firma Google Tag Manager Custom HTML JavaScript con un Nonce. Per ulteriori informazioni, consulta la sezione Risoluzione in questo articolo.

JS in linea nella configurazione del tema

Questo problema è molto simile al problema Tag HTML personalizzati con JavaScript in linea. La differenza è che invece di aggiungere il JavaScript nell'amministrazione di Google Tag Manager, lo script viene aggiunto nell'amministrazione di Adobe Commerce nella pagina Configurazione progettazione per uno degli ambiti disponibili. Utilizzando questo metodo, è possibile aggiungere uno snippet di HTML in linea, un JavaScript o un foglio di stile all’intestazione o al piè di pagina del tema. Come qualsiasi altro JavaScript in linea, sarà necessario eseguire l’inserimento nella whitelist della pagina di pagamento.

Passaggi da riprodurre

  1. Configura Intestazione HTML o Piè di pagina in Configurazione progettazione in modo che contenga un JavaScript in linea.
  2. Aggiungi un prodotto al carrello e procedi al pagamento.
  3. Apri Developer Console in qualsiasi browser supportato.

Risultati previsti

Nella console non vengono visualizzati errori relativi al JavaScript personalizzato e lo script viene eseguito correttamente.

Risultati effettivi

L'errore Rifiutato di eseguire uno script perché il relativo hash, il relativo nonce o 'unsafe-inline' non viene visualizzato nella direttiva script-src dei criteri di sicurezza dei contenuti. è presente nella console e lo script non viene eseguito.

NOTA: il messaggio di errore esatto può variare a seconda del browser, ma in genere indica che lo script è bloccato dal CSP. Questi messaggi evidenziano che non è consentita l’esecuzione dello script a causa delle impostazioni CSP correnti.

Causa

Gli script e i fogli di stile nelle sezioni HTML Head e Miscellaneous HTML nelle sezioni Footer della configurazione di progettazione sono campi di input misti. Questi campi possono contenere HTML, fogli di stile o JavaScript. A causa di questo contenuto dinamico, è impossibile inserire in modo automatico l’hash e la whitelist del contenuto di tali campi. Pertanto, se JavaScript viene aggiunto a uno di questi campi, deve essere inserito manualmente nella whitelist per essere eseguito sulla pagina di pagamento. Ciò è necessario perché il CSP limita l’esecuzione di eventuali script in linea non esplicitamente consentiti. Questo garantisce una maggiore sicurezza, ma richiede anche una configurazione aggiuntiva per consentire gli script personalizzati.

Soluzione

Inserisci nella whitelist l’hash di JavaScript. Per ulteriori informazioni, consulta la sezione Risoluzione in questo articolo.

Risoluzione resolution

Ogni soluzione fornita opera in modo indipendente. Valuta e seleziona con attenzione quello che soddisfa al meglio le tue esigenze specifiche. Considera il contesto dell’implementazione, la natura degli script coinvolti e i requisiti di sicurezza del sito Adobe Commerce per determinare la soluzione appropriata.

Inserisci nella whitelist l'hash JavaScript

Per risolvere questo problema, gli script JavaScript in linea personalizzati devono essere inseriti nella whitelist nelle impostazioni CSP. In questo modo si garantisce che lo script possa essere eseguito in modo esplicito, ignorando le restrizioni di sicurezza predefinite.

Inserire nella whitelist gli script di HTML personalizzati GTM è difficile perché GTM può modificare il JavaScript prima di inserirlo nel modello DOM (Document Object Model), inclusa la rimozione di interruzioni di riga e commenti. Inoltre, gli algoritmi di Google possono cambiare nel tempo senza preavviso, invalidando potenzialmente l’hash. Devi utilizzare l’hash generato da Google Chrome come descritto nel passaggio C ed essere preparato ad aggiornare periodicamente l’hash nella whitelist. In alternativa, puoi firmare Google Tag Manager Custom HTML JavaScript con un Nonce per una soluzione più solida.

  1. Genera l’hash per il corpo del JavaScript.

    NOTA: per generare correttamente l'hash, è necessario inserire lo script nel generatore di hash. È importante copiare lo script con attenzione. Escludi i tag di script di apertura e chiusura del JavaScript durante la copia di tutte le interruzioni di riga ed eventuali caratteri invisibili. Ciò include le eventuali interruzioni di riga successive all'apertura di script o di altri tag. Se l’hash non corrisponde esattamente allo script, l’esecuzione viene negata.

    1. In un Mac è possibile copiare l'intero corpo dello script, incluse eventuali interruzioni di riga dopo l'apertura del tag script, negli Appunti ed eseguire il comando seguente nel terminale.

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

      Questo comando PHP prende il contenuto degli Appunti, calcola il relativo hash SHA-256, converte l'hash in binario, quindi lo codifica in formato base64, infine stampa il risultato.

    2. Puoi utilizzare diversi generatori di hash online per creare l’hash richiesto per lo script.

      AVVERTENZA: È fondamentale comprendere che se decidi di utilizzare servizi online di terze parti per generare hash per CSP, è necessario considerare le implicazioni relative alla privacy. Alcuni servizi potrebbero caricare lo script sui propri server per eseguire l'hashing dei dati sensibili inclusi nello script, con conseguente rischio di compromissione di tali dati. Per limitare questo rischio, si consiglia di generare hash localmente utilizzando strumenti o script affidabili, garantendo la protezione e la riservatezza dei dati.

    3. Puoi utilizzare il browser Chrome di Google per acquisire dal Developer Console l’hash già generato per il JavaScript a cui è stata negata l’esecuzione nella pagina di pagamento.

      1. Vai alla pagina di pagamento utilizzando il browser Chrome di Google con il JavaScript bloccato aggiunto.

      2. Aprire Developer Console premendo Cmd+Option+J (su macOS) o Ctrl+Shift+J (su Windows/Linux).

      3. Individua il messaggio di errore CSP nella console.

      4. Nell’ultima frase del messaggio di errore, trovi il codice hash generato per lo script bloccato.

      5. Copiare il codice dopo sha256-, omettendo le virgolette.

        NOTA: Se sono presenti più file JavaScript bloccati, nella console verranno visualizzati più messaggi di errore. Assicurati di identificare esattamente il JavaScript che deve essere inserito nella whitelist. È consigliabile aggiungere e testare ogni file JavaScript uno per uno per evitare di inserire erroneamente nella whitelist lo script sbagliato.

        Per ulteriori dettagli su come generare un hash per JavaScript in linea, consulta la Configurazione CSP avanzata nella guida Criteri di sicurezza dei contenuti per Adobe Commerce Developer.

  2. Inserisci nella whitelist l’hash dello script. Aggiungi un hash al file csp_whitelist.xml del modulo:

    < valori>

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

    < /values>

    Dove YOUR-HASH-1 deve essere sostituito con l’hash acquisito nel passaggio precedente.
    Per inserire più script nella whitelist, aggiungi un tag < value> < /value> per ogni script, ad esempio:

    < valori>

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

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

    < valori>

    Se il file non esiste, crealo con il seguente contenuto.

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

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

    xsi:noNamespaceSchemaLocation="urn:magento:modulo:Magento_Csp:etc/csp_whitelist.xsd">

    < criteri>

    < id criterio="script-src">

    < valori>

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

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

    < /values>

    < /policy>

    < /policies>

    < /csp_whitelist>

  3. Svuota la cache: dopo aver aggiunto l'hash al file csp_whitelist.xml, è essenziale svuotare la cache per garantire che le modifiche abbiano effetto. Lo scaricamento della cache cancella i dati memorizzati, consentendo l’applicazione immediata delle impostazioni CSP aggiornate. È possibile svuotare la cache passando a Sistema > Strumenti > Gestione cache nel pannello di amministrazione di Commerce e selezionare il pulsante Svuota cache Magento.  In alternativa, utilizzare la riga di comando:

    bin/magento cache:flush

    Questo comando cancella tutti i tipi di cache, assicurandosi che le nuove impostazioni CSP siano riconosciute dal sistema.

Firma Google Tag Manager Custom HTML JavaScript con un Nonce

Un altro modo per consentire l’esecuzione di JavaScript in GTM è quello di aggiungere un nonce al tag di apertura dello script. L’attributo nonce consente di inserire in una whitelist in modo dinamico specifici script in linea, garantendone l’esecuzione. Per ulteriori dettagli, consulta Utilizzo del provider nonce CSP per consentire gli script in linea.

AVVISO: ricorda che se l'account GTM è compromesso, un utente malintenzionato può inserire JavaScript dannoso nella vetrina e firmarlo con il nonce, consentendo la sua esecuzione. Questo potrebbe potenzialmente portare al furto di dati sensibili durante il processo di pagamento.

Parte di sviluppo Adobe Commerce

NOTA: l'iniezione della variabile Nonce CSP sarà disponibile come opzione predefinita in Adobe Commerce 2.4.8 e versioni successive. Se implementi questa iniezione personalizzata nelle versioni precedenti di Adobe Commerce, esegui il rollback di queste personalizzazioni prima di eseguire l’aggiornamento ad Adobe Commerce 2.4.8 o versione successiva. Se utilizzi Adobe Commerce 2.4.8 o versione successiva, passa alla sezione Configurazione GTM.

  1. Nel modulo personalizzato, utilizza il provider Nonce CSP e passa il nonce a JavaScript. Per ulteriori informazioni, consulta Concetti di base dei modelli nella documentazione per gli sviluppatori di Adobe Commerce.

  2. Inserisci la variabile globale con il nonce utilizzando JavaScript:

    < script>

    window.cspNonce = config.cspNonce;

    < /script>

  3. Questo script imposta una variabile globale cspNonce con il valore del nonce corrente, che può quindi essere acquisito nella variabile Google Tag Manager e utilizzato per firmare gli script Custom HTML in modo che possano essere eseguiti nel CSP. Deve essere iniettato in tutte le pagine.

Parte configurazione GTM

  1. Acquisisci il valore di questa variabile da GTM:

    1. Creare una variabile di Google Tag Manager del tipo Variabile JavaScript. Assegna alla variabile un nome chiaro, come verrà fatto riferimento in seguito. In questo esempio, è gtmNonce.

    2. Imposta Nome variabile globale sul nome della variabile globale JavaScript inserita nel passaggio precedente. In questo esempio, è cspNonce.

  2. Modifica il blocco HTML personalizzato contenente il JavaScript da eseguire al momento del pagamento per includere l’attributo nonce, facendo riferimento alla variabile GTM creata in precedenza.

< script nonce="{{gtmNonce}}">
                     console.log("Questo è un test");
              < /script>

NOTA: assicurarsi di selezionare la casella di controllo Support document.write, in quanto è essenziale per il corretto funzionamento dello script.

Aggiungendo l’attributo nonce, lo script viene firmato con il nonce fornito, consentendone l’esecuzione sicura in base ai Criteri di sicurezza dei contenuti (CSP, Content Security Policy).

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