O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)

Com a introdução do CSP no Magento 2, módulos que inserem arquivos JavaScript, CSS, imagens ou praticamente qualquer tipo de recurso externo, poderão precisar de adaptações.

À partir da versão 2.3.5, o Magento começou a alertar sobre tais riscos diretamente no inspetor de seu navegador.

Fala-se que à partir da versão 2.4 os avisos deixarão de existir e tais requisições serão bloqueadas.

Desta forma, a menos que tais fontes sejam adicionadas à uma lista de exceção (whitelist), módulos de pagamento, scripts de integração e vários outros recursos terão suas funcionalidades afetadas.

De uma forma ou de outra, tal mudança vem para o bem. Podemos nos antecipar e já preparar nossos módulos e lojas para esta mudança.

O que é isso?

CSP, Content Security Policies, ou Políticas de Segurança de Conteúdo é um recurso criado para evitar que scripts maliciosos sejam adicionados aos nossos sites. Desta forma, quando um ataque deste tipo é feito, o script não conseguirá ser adicionado com facilidade, a menos que ele esteja nesta lista de exceção.

Com isso, quando seu servidor/site responde à uma requisição HTTP, um cabeçalho extra é enviado, informando ao navegador quais fontes externas são permitidas para cada tipo de conteúdo e ação. Desta forma, alguns tipos de ataques podem ser evitados ou dificultados, tais como:

• Carregar um script malicioso de um site de terceiro
• Carregar um CSS que fariam seus usuários clicarem em algum elemento que não deveria estar em uma página
• Inserir um javascript para roubar dados de cartão de crédito digital ou minerar bitcoins
• Inserir um script para enviar dados de sessão de um administrador logado para outro lugar

Este cabeçalho pode ser um Content-Security-Policy-Report-Only (para apenas notificar) ou Content-Security-Policy (para bloquear quem não estiver na lista).

A maioria dos navegadores já suportam tal recurso e estão preparados para bloquear tais scripts.

CSP no Magento 2

O Magento 2.3.5 implementou o suporte à tal recurso com o módulo Magento_Csp. Uma série de configurações padrão foram adicionadas no nível de aplicação e para alguns módulos do core do Magento. As políticas podem ser configuradas exclusivamente na área de adminhtml ou de frontend, e também podem ser configuradas em páginas específicas.

O CSP pode funcionar de duas formas diferentes no seu Magento:

• report-only (apenas para reportar) – Neste modo nada é bloqueado, e o Magento apenas alertará sobre o problema ou ao fato de alguma coisa que poderia ser bloqueada. Neste modo os alertas são exibidos no console do navegador (como na imagem no começo do artigo) ou podem ser enviadas para um endpoint HTTP para coletar o que deu errado.
• restrict-mode (modo de restriçã) – Neste modo, qualquer coisa que estiver em desacordo será bloqueado.

Configuração CSP Padrão

Como comentado, ainda na versão 2.3.5 o padrão será apenas reportar (report-only). Desta forma, poderemos ver o que será bloqueado no futuro quando usarmos a configuração padrão.

Uma vez configurado, o Magento pode obrigar políticas como estas:

• Qualquer recurso, como arquivos .js, .vss, .jpg, ou .ttf só podem ser carregados à partir do domínio da loja
• Iframes só podem incluir páginas da própria loja
• Requisições AJAX só podem ser feitas para a própria loja
• Formulários só podem ser enviados para a loja
• Somente scripts e css que estão na lista de exceção poderão ser compilados pelo navegador

Alterando e checando a configuração atual

Os valores são salvos dentro de default/csp/mode/admin/report_only e default/csp/mode/storefront/report_only para área administrativa e frontend especificamente.

Quando o valor destas configurações é 1, o Magento apenas alertará sobre divergências. Se o valor for 0, as mesmas serão bloqueadas pelo navegador.

Por enquanto, o módulo Magento_Csp não possuí um arquivo system.xml, portanto não é possível alterar estas configurações por linha de comando, pois o caminho de configuração ainda não foi definido.

Desta forma, a única forma de alterar a configuração é criando um módulo e adicionando o arquivo etc/config.xml abaixo nele:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <csp>
            <mode>
                <storefront>
                    <report_only>0</report_only>
                </storefront>
                <admin>
                    <report_only>0</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

Para verificar se os valores tiveram efeito, acesse a página inicial da sua loja, e inspecione a aba de Rede. Localize qual cabeçalho está sendo usado.

Testando e logando

Se quiser apenas ver como sua loja seria impactada, mantenha o modo como report-only (1) e adicione um URL de log no seu config.xml acima. Você pode usar o Webhook.site se preferir.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <csp>
            <mode>
                <storefront>
                    <report_only>1</report_only>
                    <report_uri>https://webhook.site/9669be18-783e-491c-a825-c0fa083072fe</report_uri>
                </storefront>
                <admin>
                    <report_only>1</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

Desta forma, toda URL que for bloqueada no futuro, será logada. Após fazer isso, navegue na loja e depois verifique quais URL’s precisam de sua atenção.

Liberando domínios específicos em seu módulo

Semana passada tive um cliente que começou a usar o CSP em modo de restrição. Com isso, o meu módulo de integração com o PagSeguro parou de ser exibido em sua loja, afinal ele chama JavaScripts externos. Na aba de rede podíamos ver o bloqueio (blocked:csp).

Tudo que precisei fazer foi ler os tipos de restrição e URL’s que estavam sendo barrados no console do navegador e adicioná-los à uma lista de exceção dentro do próprio módulo, em etc/csp_whitelist.xml.

Uma lista e políticas suportadas pelo Magento e suas descrições podem ser encontradas aqui.

No caso do PagSeguro, a atualização acima pode ser vista em qualquer versão à partir da 2.4.11.

Quer saber mais?

Nesta página da documentação oficial (em Inglês) já tem bastante coisa sobre CSP e Magento. No site da Mozilla também é possível entender a fundo como funciona o cabeçalho Content-Security-Policy (em Português).

Já para saber mais sobre Magento 2 e desenvolvimento, consulte o Magento 2: O Curso. Este é o lugar ideal para aprender a criar módulos e componentes para Magento 2. Além disso, você terá acesso à um grupo exclusivo de alunos onde trocamos experiências e dicas sobre o mundo do e-commerce e Magento.

• Sobre
• Últimos Posts

Ricardo Martins

É desenvolvedor web há 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 11 cursos Magento (os principais no magenteiro.com/cursos) com mais de 14 mil alunos de 105 países, é também criador do módulo PagSeguro Transparente, usado em mais de 12 mil lojas.

Últimos posts por Ricardo Martins (exibir todos)

• PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
• Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
• Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023