Documentação

Adobe Commerce: problemas do JavaScript em linha na página de check-out no modo restrito da Política de segurança de conteúdo (CSP)

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

Este artigo fornece explicações e soluções detalhadas para problemas encontrados com o JavaScript personalizado adicionado via Adobe Commerce Admin e Gerenciador de tags da Google no Adobe Commerce 2.4.7 durante o check-out quando o modo restrito pela CSP está habilitado. Especificamente, ele aborda a Mensagem de erro Recusada a executar script embutido porque viola a seguinte diretiva de Política de Segurança de Conteúdo e que aparece no log do console do navegador. Esse erro indica que o script integrado está bloqueado devido às rigorosas configurações da CSP, que foram projetadas para aprimorar a segurança, evitando a execução de scripts não autorizados.

A partir do Adobe Commerce 2.4.7, o CSP está configurado para operar no modo restrito por padrão para páginas de pagamento nas áreas de vitrine e administração. Para todas as outras páginas, ele opera no modo somente relatório. Esse aprimoramento exige a lista de permissões de todo o JavaScript, incluindo integrações personalizadas com serviços ou extensões de terceiros. Se o JavaScript personalizado não for incluído na lista de permissões, o navegador bloqueará a execução desses scripts nas páginas de check-out e pagamento nas áreas de Administração e Loja.

As soluções fornecidas neste artigo não estão limitadas à resolução de problemas com o Google Tag Manager (GTM) Inline JavaScript ou o JavaScript adicionado por meio da Configuração de design do administrador do Commerce. Eles também podem ser aplicados a outros cenários em que o JavaScript em linha foi adicionado ao código do Commerce. Isso inclui scripts personalizados incorporados diretamente a modelos, módulos ou qualquer outra parte do ecossistema do Adobe Commerce. Seguindo as etapas descritas, você pode garantir que todos os scripts incorporados sejam colocados na lista de permissões e tenham permissão para execução, mantendo assim a funcionalidade do código personalizado enquanto seguem as restrições da CSP.

OBSERVAÇÃO: é altamente recomendável introduzir um novo JavaScript por meio dos métodos descritos na documentação do Adobe Commerce das Políticas de Segurança de Conteúdo. Esses métodos garantem que seus scripts estejam em conformidade com as diretrizes da CSP, melhorando a segurança do site do Commerce. Seguindo as práticas recomendadas para inclusão de script, como o uso de scripts externos com atributos nonce ou hash adequados, você pode minimizar o risco de vulnerabilidades de segurança e garantir uma experiência do usuário mais estável e segura.

Descrição description

Analise para obter detalhes sobre o ambiente e as etapas de reprodução.

Ambiente

Adobe Commerce na infraestrutura em nuvem e Adobe Commerce no local:

  • 2.4.7 e posterior
  • 2,4,6-pX
  • 2,4,5-pX
  • 2,4,4-pX

Problema/Sintomas

Abaixo está uma lista de problemas comuns e suas soluções quando a execução dos scripts é bloqueada no check-out e nas páginas de pagamento devido a restrições do CSP:

  • Tag HTML GTM com JavaScript em linha
  • JS em linha na configuração do tema

Marca HTML GTM com JavaScript embutido

A JavaScript da Tag de HTML personalizada configurada no Gerenciador de tags da Google não é executada corretamente na finalização da loja ou nas páginas de pagamento.

Etapas a serem reproduzidas

  1. Configure o Gerenciador de tags da Google com uma tag HTML personalizada que contém JavaScript em linha.
  2. Integre o Google Tag Manager com o Adobe Commerce. Consulte Configurar a conta do Google Analytics no Guia de merchandising e promoções da Adobe Commerce para ver as etapas.
  3. Adicione um produto ao carrinho e prossiga para a finalização da compra.
  4. Abra a Developer Console em qualquer navegador compatível.

Resultados esperados

Nenhum erro relacionado ao JavaScript personalizado é exibido no console, e o script é executado com êxito.

Resultados Reais

O erro Recusou-se a executar um script porque seu hash, seu nonce ou 'unsafe-inline' não aparecem na diretiva script-src da Política de Segurança de Conteúdo. está presente no console e o script não é executado.

OBSERVAÇÃO: a mensagem de erro exata pode variar dependendo do navegador, mas geralmente indica que o script está bloqueado pelo CSP. Essas mensagens destacam que o script não tem permissão para ser executado devido às configurações atuais da CSP.

Causa

A JavaScript da tag HTML personalizada do Google Tag Manager é inserida na loja pelo próprio Google Tag Manager. Como resultado, esse script não está pré-incluído na lista de permissões nas configurações da CSP e será bloqueado na execução pelo navegador. Isso ocorre porque a CSP restringe a execução de qualquer script incorporado que não seja explicitamente permitido, garantindo segurança aprimorada, mas exigindo configuração adicional para scripts personalizados.

Solução

  • Inclua o hash do JavaScript na lista de permissões. Consulte a seção Resolução neste artigo para obter detalhes.
  • Assine o JavaScript HTML personalizado do Google Tag Manager com um Nonce. Consulte a seção Resolução neste artigo para obter detalhes.

JS embutido na configuração de tema

Esse problema é muito semelhante ao problema Tag de HTML personalizada com JavaScript em linha. A diferença é que, em vez de adicionar o JavaScript no Administrador do Google Tag Manager, o script é adicionado no Administrador do Adobe Commerce na página Configuração de design para um dos escopos disponíveis. Usando esse método, um trecho de HTML, JavaScript ou folha de estilos em linha pode ser adicionado ao cabeçalho ou rodapé do tema. Assim como qualquer outro JavaScript em linha, será necessário executar a lista de permissões na página de check-out.

Etapas a serem reproduzidas

  1. Configure Cabeçalho do HTML ou Rodapé na Configuração do Design para conter um JavaScript embutido.
  2. Adicione um produto ao carrinho e prossiga para a finalização da compra.
  3. Abra a Developer Console em qualquer navegador compatível.

Resultados esperados

Nenhum erro relacionado ao JavaScript personalizado é exibido no console, e o script é executado com êxito.

Resultados Reais

O erro Recusou-se a executar um script porque seu hash, seu nonce ou 'unsafe-inline' não aparecem na diretiva script-src da Política de Segurança de Conteúdo. está presente no console e o script não é executado.

OBSERVAÇÃO: a mensagem de erro exata pode variar dependendo do navegador, mas geralmente indica que o script está sendo bloqueado pelo CSP. Essas mensagens destacam que o script não tem permissão para ser executado devido às configurações atuais da CSP.

Causa

Scripts e Folhas de Estilo no Cabeçalho do HTML e HTML Diversos nas seções Rodapé da Configuração de Design são campos de entrada mistos. Esses campos podem conter HTML, Folhas de estilo ou JavaScript. Devido a esse conteúdo dinâmico, é impossível aplicar hash e adicionar o conteúdo desses campos à lista de permissões automaticamente. Portanto, se o JavaScript for adicionado a qualquer um desses campos, ele deverá ser adicionado manualmente à lista de permissões para ser executado na página de check-out. Isso é necessário porque a CSP restringe a execução de qualquer script integrado que não seja explicitamente permitido. Isso garante a segurança aprimorada, mas também exige configuração adicional para permitir scripts personalizados.

Solução

Inclua o hash do JavaScript na lista de permissões. Consulte a seção Resolução neste artigo para obter detalhes.

Resolução resolution

Cada solução fornecida opera independentemente. Avalie e selecione cuidadosamente a que melhor atende às suas necessidades específicas. Considere o contexto da implementação, a natureza dos scripts envolvidos e os requisitos de segurança do site do Adobe Commerce para determinar a solução apropriada.

Incluir o hash JavaScript em uma lista de permissões

Para resolver esse problema, os JavaScripts personalizados em linha devem estar na lista de permissões nas configurações da CSP. Isso garante que o script tenha permissão explícita para ser executado, ignorando as restrições de segurança padrão.

Incluir scripts HTML personalizados GTM na lista de permissões é desafiador, pois o GTM pode modificar o JavaScript antes de inseri-lo no Modelo de objeto de documento (DOM), incluindo a remoção de quebras de linha e comentários. Além disso, os algoritmos do Google podem mudar com o tempo sem aviso prévio, possivelmente invalidando o hash. Você precisa usar o hash gerado pelo Google Chrome conforme descrito na etapa C e estar preparado para atualizar o hash na lista de permissões periodicamente. Como alternativa, considere assinar o Google Tag Manager Custom HTML JavaScript com um Nonce para obter uma solução mais robusta.

  1. Gere o hash para o corpo do JavaScript.

    OBSERVAÇÃO: para gerar o hash com êxito, você precisa alimentar o script no gerador de hash. É importante copiar o script cuidadosamente. Exclua as tags de script de abertura e fechamento da JavaScript, enquanto copia todas as quebras de linha e quaisquer caracteres invisíveis possíveis. Isso inclui as quebras de linha (se houver) após a abertura de script ou outras marcas. Se o hash não corresponder exatamente ao script, a execução será negada.

    1. Em uma Mac, você pode copiar todo o corpo do script, incluindo qualquer quebra de linha após a tag de abertura script, para a área de transferência e executar o seguinte comando no terminal.

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

      Este comando PHP pega o conteúdo da área de transferência, calcula seu hash SHA-256, converte o hash para binário e então o codifica no formato base64, finalmente imprimindo o resultado.

    2. Você pode usar uma variedade de geradores de hash online para criar o hash necessário para o seu script.

      AVISO: É essencial compreender que, se você decidir usar serviços online de terceiros para gerar hashes para o CSP, deverá considerar as implicações de privacidade. Alguns serviços podem fazer upload do script nos servidores para hash, possivelmente comprometendo os dados confidenciais incluídos no script. Para reduzir esse risco, é recomendável gerar hashes localmente usando ferramentas ou scripts confiáveis, garantindo que seus dados permaneçam seguros e privados.

    3. Você pode usar o navegador Google Chrome para adquirir o hash já gerado para a JavaScript cuja execução foi negada na página de check-out da Developer Console.

      1. Vá para a página de check-out usando o navegador Google Chrome com o JavaScript bloqueado adicionado.

      2. Abra o Developer Console pressionando Cmd+Option+J (no macOS) ou Ctrl+Shift+J (no Windows/Linux).

      3. Localize a mensagem de erro da CSP no console.

      4. Na última frase da mensagem de erro, você encontrará o código hash gerado para o script bloqueado.

      5. Copiar o código após sha256-, omitindo as aspas.

        OBSERVAÇÃO: Se você tiver vários arquivos bloqueados do JavaScript, verá várias mensagens de erro no console. Certifique-se de identificar o JavaScript exato que precisa ser incluído na lista de permissões. É aconselhável adicionar e testar cada arquivo do JavaScript, um por um, para evitar a inclusão do script errado na lista de permissões por engano.

        Para obter mais detalhes sobre como gerar um hash para o JavaScript em linha, consulte a Configuração avançada do CSP no guia de Políticas de segurança de conteúdo para desenvolvedores do Adobe Commerce.

  2. Incluir na lista de permissões o hash do script. Primeiro Adicione um hash ao arquivo csp_whitelist.xml do módulo:

    < valores>

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

    < /valores>

    Onde YOUR-HASH-1 deve ser substituído pelo hash adquirido na etapa anterior.
    Para adicionar vários scripts à lista de permissões, adicione uma marca < value> < /value> para cada script, por exemplo:

    < valores>

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

    < valores>

    Se o arquivo não existir, crie-o com o conteúdo a seguir.

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

    < políticas>

    < política id="script-src">

    < valores>

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

    < /valores>

    < /política>

    < /políticas>

    < /csp_whitelist>

  3. Liberar o cache: depois de adicionar o hash ao arquivo csp_whitelist.xml, é essencial liberar o cache para garantir que as alterações tenham efeito. A limpeza do cache limpa os dados armazenados, permitindo que as configurações atualizadas do CSP sejam aplicadas imediatamente. Você pode liberar o cache navegando para o Sistema > Ferramentas > Gerenciamento de cache no painel de administração do Commerce e selecione o botão Liberar cache de Magento.  Como alternativa, use a linha de comando:

    bin/magento cache:flush

    Esse comando limpa todos os tipos de cache, garantindo que suas novas configurações da CSP sejam reconhecidas pelo sistema.

Assinar o Google Tag Manager Custom HTML JavaScript com um Nonce

Outra maneira de permitir a execução do JavaScript no GTM é adicionar um nonce à tag de abertura do script. O atributo nonce fornece uma maneira de incluir scripts em linha específicos dinamicamente na lista de permissões, garantindo que eles tenham permissão para execução. Para obter mais detalhes, consulte Usar o provedor nonce de CSP para permitir a documentação de scripts integrados.

AVISO: Lembre-se de que, se a conta do GTM for comprometida, um invasor poderá injetar JavaScript mal-intencionado na loja e assiná-lo com o nonce, permitindo sua execução. Isso pode levar ao roubo de dados confidenciais durante o processo de finalização.

Parte de Desenvolvimento do Adobe Commerce

OBSERVAÇÃO: a injeção da variável CSP Nonce estará disponível imediatamente no Adobe Commerce 2.4.8 e versões posteriores. Se você implementar essa injeção personalizada em versões anteriores do Adobe Commerce, reverta essas personalizações antes de atualizar para o Adobe Commerce 2.4.8 ou superior. Se você estiver executando o Adobe Commerce 2.4.8 ou superior, prossiga para a seção Configuração do GTM.

  1. Em seu módulo personalizado, utilize o Provedor de Nonce CSP e passe o nonce para a JavaScript. Para obter mais detalhes, consulte Conceitos básicos do modelo na Documentação para desenvolvedores do Adobe Commerce.

  2. Insira a variável global com o nonce usando o JavaScript:

    < script>

    window.cspNonce = config.cspNonce;

    < /script>

  3. Esse script define uma variável global cspNonce com o valor do nonce atual, que pode ser capturado na variável do Google Tag Manager e usado para assinar scripts HTML personalizados para garantir que eles possam ser executados no CSP. Ele deve ser inserido em todas as páginas.

Parte da Configuração GTM

  1. Capture o valor dessa variável no GTM:

    1. Crie uma Variável do Google Tag Manager do tipo Variável do JavaScript. Dê um nome claro à variável, pois ela será referenciada posteriormente. Neste exemplo, é gtmNonce.

    2. Defina o Nome da Variável Global com o nome da variável global do JavaScript inserida na etapa anterior. Neste exemplo, é cspNonce.

  2. Modifique o bloco HTML personalizado que contém o JavaScript que você precisa executar no check-out para incluir o atributo nonce, fazendo referência à variável GTM criada anteriormente.

< script nonce="{{gtmNonce}}">
                     console.log("Isto é um teste");
              < /script>

OBSERVAÇÃO: marque a caixa de seleção Suporte document.write, pois isso é essencial para que o script funcione corretamente.

Ao adicionar o atributo nonce, o script é assinado com o nonce fornecido, permitindo que ele seja executado com segurança na Política de segurança de conteúdo (CSP).

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