Recentemente, tive um problema no projeto de um cliente que as chamadas externas de libs JS e CSS não estavam funcionando. No console encontrei o seguinte problema:
Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src assets.adobedtm.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com <URL> <URL> secure.authorize.net test.authorize.net <URL> <URL> <URL> t.paypal.com s.ytimg.com video.google.com vimeo.com <URL> js.authorize.net jstest.authorize.net cdn-scripts.signifyd.com <URL> js.braintreegateway.com *.avada.io *.googleapis.com *.addthis.com *.moatads.com *.addthisedge.com *.facebook.com *.pinterest.com 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Ok. Mas como resolver e o porquê disso?
Como resolver erro de CORS no Magento 2
O Magento trabalha consistentemente para trazer mais segurança aos usuários da plataforma, tento uma loja virtual mais segura, e a cada nova release do Magento 2 temos acesso a diversas melhorias de segurança.
O Magento 2.3.5 vem com recursos interessantes e aprimoramentos de segurança para os proprietários de lojas virtuais em Magento 2.
A Causa:
Content Security Policy
As Políticas de Segurança de Conteúdo (CSP) são uma ferramenta poderosa para mitigar Cross Site Scripting (XSS) e ataques relacionados, incluindo skimmers de cartão, sequestro de sessão, clickjacking e muito mais. Os servidores Web enviam CSPs em resposta aos cabeçalhos HTTP (a saber Content-Security-Policy e Content-Security-Policy-Report-Only) para navegadores que colocam na lista de permissões as origens de scripts, estilos e outros recursos. Juntos, os CSPs e os recursos integrados do navegador ajudam a prevenir:
- Carregando um script malicioso do site de um invasor;
- Um script embutido malicioso que envia informações de cartão de crédito para o site de um invasor;
- Carregar um estilo malicioso que fará os usuários clicarem em um elemento que não deveria estar em uma página.
Magento e CSP
A partir da versão 2.3.5, Magento suporta cabeçalhos CSP e fornece maneiras de configurá-los. (Esta funcionalidade é definida no módulo Magento_Csp.) Magento também fornece configurações padrão no nível do aplicativo e para módulos centrais individuais que requerem configuração extra. As políticas podem ser configuradas para áreas adminhtmle storefrontseparadamente para acomodar diferentes casos de uso. Magento também permite configurar CSPs exclusivos para páginas específicas.
O CSP pode funcionar em dois modos:
report-only– Neste modo, Magento relata violações de política, mas não interfere. Este modo é útil para depuração. Por padrão, as violações de CSP são gravadas no console do navegador, mas podem ser configuradas para serem relatadas a um endpoint como uma solicitação HTTP para coletar logs. Há uma série de serviços que coletam, armazenam e classificam os relatórios de violações de CSP de sua loja para você.restrict mode– Neste modo, Magento atua em quaisquer violações de política.
Como Resolver
Para resolver, em um módulo customizados criaremos uma Whitelist com todas as URL’s que deverão ser liberadas no Magento.
No seu módulo customizado, siga os passos abaixo:
csp_whitelist.xml
Vendor/MyModule/etc/csp_whitelist.xml:
<?xml version="1.0"?>
<!--
/**
* Copyright Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp/etc/csp_whitelist.xsd">
<policies>
<policy id="script-src">
<values>
<value id="cloudflare" type="host">*.cloudflare.com</value>
<value id="google-apis" type="host">*.googleapis.com</value>
</values>
</policy>
<policy id="style-src">
<values>
<value id="cloudflare" type="host">*.cloudflare.com</value>
<value id="google-apis" type="host">*.googleapis.com</value>
</values>
</policy>
<policy id="img-src">
<values>
<value id="cloudflare" type="host">*.cloudflare.com</value>
<value id="google-apis" type="host">*.googleapis.com</value>
</values>
</policy>
<policy id="connect-src">
<values>
<value id="cloudflare" type="host">*.cloudflare.com</value>
<value id="google-apis" type="host">*.googleapis.com</value>
</values>
</policy>
<policy id="font-src">
<values>
<value id="awesome" type="host">*.fontawesome.com</value>
</values>
</policy>
</policies>
</csp_whitelist>
config.xml
Vendor/MyModule/etc/config.xml:
<?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_uri>http://mywebstore.com/csp/endpoint</report_uri>
</storefront>
<admin>
<report_uri>http://mywebstore.com/csp/endpoint</report_uri>
</admin>
</mode>
</csp>
</default>
</config>
Feito isso. Recompile o seu projeto e teste!
Importante: lendo alguns artigos sobre o assunto, vi a seguinte solução:
php bin/magento module:disable Magento_Csp
Essa é a pior solução que você pode adotar. Isso deixará a sua loja insegura. O ideal é criar a whitelist, conforme ensinamos acima.
Dúvidas? Posta aí!
Um abraço.