{"id":2481,"date":"2020-06-24T22:35:05","date_gmt":"2020-06-25T01:35:05","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=2481"},"modified":"2024-09-16T22:37:50","modified_gmt":"2024-09-17T01:37:50","slug":"csp-e-magento2-como-resolver","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/","title":{"rendered":"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)"},"content":{"rendered":"\n<p>Com a introdu\u00e7\u00e3o do CSP no Magento 2, m\u00f3dulos que inserem arquivos JavaScript, CSS, imagens ou praticamente qualquer tipo de recurso externo, poder\u00e3o precisar de adapta\u00e7\u00f5es.<\/p>\n\n\n\n<p>\u00c0 partir da vers\u00e3o 2.3.5, o Magento come\u00e7ou a <strong>alertar<\/strong> sobre tais riscos diretamente no inspetor de seu navegador.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" width=\"700\" height=\"59\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-700x59.jpg\" alt=\"Como o aviso de CSP \u00e9 exibido no navegador\" class=\"wp-image-2482\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-700x59.jpg 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-250x21.jpg 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-768x65.jpg 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-760x64.jpg 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-500x42.jpg 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP-120x10.jpg 120w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content_Security_Poilicy_Magento_2_CSP.jpg 1510w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><figcaption><em>Aviso sendo exibido no console do navegador<\/em><\/figcaption><\/figure>\n\n\n\n<p>Fala-se que \u00e0 partir da vers\u00e3o 2.4 os avisos deixar\u00e3o de existir e <strong>tais requisi\u00e7\u00f5es ser\u00e3o bloqueadas<\/strong>.<\/p>\n\n\n\n<p>Desta forma, a menos que tais fontes sejam adicionadas \u00e0 uma lista de exce\u00e7\u00e3o (whitelist), m\u00f3dulos de pagamento, scripts de integra\u00e7\u00e3o e v\u00e1rios outros recursos ter\u00e3o suas funcionalidades afetadas.<\/p>\n\n\n\n<p>De uma forma ou de outra, tal mudan\u00e7a vem para o bem. Podemos nos antecipar e j\u00e1 preparar nossos m\u00f3dulos e lojas para esta mudan\u00e7a.<\/p>\n\n\n\n<h2 id=\"h-o-que-e-isso\">O que \u00e9 isso?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"700\" height=\"350\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-700x350.png\" alt=\"\" class=\"wp-image-2494\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-700x350.png 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-250x125.png 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-768x384.png 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-760x380.png 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-500x250.png 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp-120x60.png 120w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp.png 960w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>CSP, <em>Content Security Policies<\/em>, ou Pol\u00edticas de Seguran\u00e7a de Conte\u00fado \u00e9 um recurso criado para <strong>evitar que scripts maliciosos sejam adicionados aos nossos sites<\/strong>. Desta forma, quando um ataque deste tipo \u00e9 feito, o script n\u00e3o conseguir\u00e1 ser adicionado com facilidade, <strong>a menos que ele esteja nesta lista de exce\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<p>Com isso, quando seu servidor\/site responde \u00e0 uma requisi\u00e7\u00e3o HTTP, um cabe\u00e7alho extra \u00e9 enviado, informando ao navegador quais fontes externas s\u00e3o permitidas para cada tipo de conte\u00fado e a\u00e7\u00e3o. Desta forma, alguns tipos de ataques podem ser evitados ou dificultados, tais como:<\/p>\n\n\n\n<ul><li>Carregar um script malicioso de um site de terceiro<\/li><li>Carregar um CSS que fariam seus usu\u00e1rios clicarem em algum elemento que n\u00e3o deveria estar em uma p\u00e1gina<\/li><li>Inserir um javascript para roubar dados de cart\u00e3o de cr\u00e9dito digital ou minerar bitcoins<\/li><li>Inserir um script para enviar dados de sess\u00e3o de um administrador logado para outro lugar<\/li><\/ul>\n\n\n\n<p>Este cabe\u00e7alho pode ser um <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTTP\/Headers\/Content-Security-Policy-Report-Only\" target=\"_blank\">Content-Security-Policy-Report-Only<\/a> (para apenas notificar) ou <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Content-Security-Policy\" target=\"_blank\">Content-Security-Policy<\/a> (para bloquear quem n\u00e3o estiver na lista). <\/p>\n\n\n\n<p>A maioria dos navegadores j\u00e1 suportam tal recurso e est\u00e3o preparados para bloquear tais scripts.<\/p>\n\n\n\n<h2 id=\"h-csp-no-magento-2\">CSP no Magento 2<\/h2>\n\n\n\n<p>O Magento 2.3.5 implementou o suporte \u00e0 tal recurso com o m\u00f3dulo <code>Magento_Csp<\/code>. Uma s\u00e9rie de configura\u00e7\u00f5es padr\u00e3o foram adicionadas no n\u00edvel de aplica\u00e7\u00e3o e para alguns m\u00f3dulos do core do Magento. As pol\u00edticas podem ser configuradas exclusivamente na \u00e1rea de <em>adminhtml<\/em> ou de <em>frontend<\/em>, e tamb\u00e9m podem ser configuradas em p\u00e1ginas espec\u00edficas.<\/p>\n\n\n\n<p>O CSP pode funcionar de duas formas diferentes no seu Magento:<\/p>\n\n\n\n<ul><li>report-only (apenas para reportar) &#8211; Neste modo nada \u00e9 bloqueado, e o Magento apenas alertar\u00e1 sobre o problema ou ao fato de alguma coisa que poderia ser bloqueada. Neste modo os alertas s\u00e3o exibidos no console do navegador (como na imagem no come\u00e7o do artigo) ou podem ser enviadas para um endpoint HTTP para coletar o que deu errado.<\/li><li>restrict-mode (modo de restri\u00e7\u00e3) &#8211; Neste modo, qualquer coisa que estiver em desacordo ser\u00e1 bloqueado.<\/li><\/ul>\n\n\n\n<h2 id=\"h-configuracao-csp-padrao\">Configura\u00e7\u00e3o CSP Padr\u00e3o<\/h2>\n\n\n\n<p>Como comentado, ainda na vers\u00e3o 2.3.5 o padr\u00e3o ser\u00e1 apenas reportar (report-only). Desta forma, poderemos ver o que ser\u00e1 bloqueado no futuro quando usarmos a configura\u00e7\u00e3o padr\u00e3o.<\/p>\n\n\n\n<p>Uma vez configurado, o Magento pode obrigar pol\u00edticas como estas:<\/p>\n\n\n\n<ul><li>Qualquer recurso, como arquivos .js, .vss, .jpg, ou .ttf s\u00f3 podem ser carregados \u00e0 partir do dom\u00ednio da loja<\/li><li>Iframes s\u00f3 podem incluir p\u00e1ginas da pr\u00f3pria loja<\/li><li>Requisi\u00e7\u00f5es AJAX s\u00f3 podem ser feitas para a pr\u00f3pria loja<\/li><li>Formul\u00e1rios s\u00f3 podem ser enviados para a loja<\/li><li>Somente scripts e css que est\u00e3o na lista de exce\u00e7\u00e3o poder\u00e3o ser compilados pelo navegador<\/li><\/ul>\n\n\n\n<h2 id=\"h-alterando-e-checando-a-configuracao-atual\">Alterando e checando a configura\u00e7\u00e3o atual<\/h2>\n\n\n\n<p>Os valores s\u00e3o salvos dentro de <code>default\/csp\/mode\/admin\/report_only<\/code> e <code>default\/csp\/mode\/storefront\/report_only<\/code> para \u00e1rea administrativa e frontend especificamente.<\/p>\n\n\n\n<p>Quando o valor destas configura\u00e7\u00f5es \u00e9 1, o Magento apenas alertar\u00e1 sobre diverg\u00eancias. Se o valor for 0, as mesmas ser\u00e3o bloqueadas pelo navegador.<\/p>\n\n\n\n<p>Por enquanto, o m\u00f3dulo Magento_Csp n\u00e3o possu\u00ed um arquivo system.xml, portanto n\u00e3o \u00e9 poss\u00edvel alterar estas configura\u00e7\u00f5es por linha de comando, pois o caminho de configura\u00e7\u00e3o ainda n\u00e3o foi definido.<\/p>\n\n\n\n<p>Desta forma, a \u00fanica forma de alterar a configura\u00e7\u00e3o \u00e9 <a href=\"https:\/\/www.magenteiro.com\/blog\/magento-2\/desenvolvimento-m2\/como-criar-um-modulo-para-magento-2\/\">criando um m\u00f3dulo<\/a> e adicionando o arquivo <code>etc\/config.xml<\/code> abaixo nele:<\/p>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-title=\"\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;config xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:module:Magento_Store:etc\/config.xsd&quot;&gt;\n    &lt;default&gt;\n        &lt;csp&gt;\n            &lt;mode&gt;\n                &lt;storefront&gt;\n                    &lt;report_only&gt;0&lt;\/report_only&gt;\n                &lt;\/storefront&gt;\n                &lt;admin&gt;\n                    &lt;report_only&gt;0&lt;\/report_only&gt;\n                &lt;\/admin&gt;\n            &lt;\/mode&gt;\n        &lt;\/csp&gt;\n    &lt;\/default&gt;\n&lt;\/config&gt;<\/pre>\n<p>\u00a0<\/p>\n\n\n<p>Para verificar se os valores tiveram efeito, acesse a p\u00e1gina inicial da sua loja, e inspecione a aba de Rede. Localize qual cabe\u00e7alho est\u00e1 sendo usado. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"700\" height=\"279\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-700x279.jpg\" alt=\"O header CSP sendo exibido em uma requisi\u00e7\u00e3o HTTP\" class=\"wp-image-2483\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-700x279.jpg 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-250x100.jpg 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-768x306.jpg 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-760x303.jpg 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-500x199.jpg 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only-120x48.jpg 120w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/Content-Security-Policy-Report-Only.jpg 1028w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<h2 id=\"h-testando-e-logando\">Testando e logando<\/h2>\n\n\n\n<p>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\u00ea pode usar o <a href=\"https:\/\/webhook.site\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webhook.site<\/a> se preferir.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xhtml\" data-enlighter-title=\"\">&lt;?xml version=&quot;1.0&quot;?&gt;\n&lt;config xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot; xsi:noNamespaceSchemaLocation=&quot;urn:magento:module:Magento_Store:etc\/config.xsd&quot;&gt;\n    &lt;default&gt;\n        &lt;csp&gt;\n            &lt;mode&gt;\n                &lt;storefront&gt;\n                    &lt;report_only&gt;1&lt;\/report_only&gt;\n                    &lt;report_uri&gt;https:\/\/webhook.site\/9669be18-783e-491c-a825-c0fa083072fe&lt;\/report_uri&gt;\n                &lt;\/storefront&gt;\n                &lt;admin&gt;\n                    &lt;report_only&gt;1&lt;\/report_only&gt;\n                &lt;\/admin&gt;\n            &lt;\/mode&gt;\n        &lt;\/csp&gt;\n    &lt;\/default&gt;\n&lt;\/config&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n\n\n\n<p>Desta forma, toda URL que for bloqueada no futuro, ser\u00e1 logada. Ap\u00f3s fazer isso, navegue na loja e depois verifique quais URL&#8217;s precisam de sua aten\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-scaled.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" width=\"700\" height=\"448\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-700x448.jpg\" alt=\"Resultado dos logs de CSP no Magento 2\" class=\"wp-image-2491\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-700x448.jpg 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-250x160.jpg 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-768x491.jpg 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-1536x982.jpg 1536w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-2048x1309.jpg 2048w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-760x486.jpg 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-500x320.jpg 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/report_uri_magento_csp-120x77.jpg 120w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/figure>\n\n\n\n<h2 id=\"h-liberando-dominios-especificos-em-seu-modulo\">Liberando dom\u00ednios espec\u00edficos em seu m\u00f3dulo<\/h2>\n\n\n\n<p>Semana passada tive um cliente que come\u00e7ou a usar o CSP em modo de restri\u00e7\u00e3o. Com isso, o meu <a href=\"https:\/\/pbintegracoes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00f3dulo de integra\u00e7\u00e3o com o PagSeguro<\/a> parou de ser exibido em sua loja, afinal ele chama JavaScripts externos. Na aba de rede pod\u00edamos ver o bloqueio (blocked:csp). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"700\" height=\"17\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-700x17.png\" alt=\"\" class=\"wp-image-2485\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-700x17.png 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-250x6.png 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-768x18.png 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-1536x36.png 1536w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-760x18.png 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-500x12.png 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0-120x3.png 120w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/mceclip0.png 1608w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Tudo que precisei fazer foi ler os tipos de restri\u00e7\u00e3o e URL&#8217;s que estavam sendo barrados no console do navegador e adicion\u00e1-los \u00e0 uma lista de exce\u00e7\u00e3o dentro do pr\u00f3prio m\u00f3dulo, em <strong>etc\/csp_whitelist.xml<\/strong>.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/r-martins\/403115ef92633701e46cd69855acf160.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"700\" height=\"124\" src=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-700x124.jpg\" alt=\"\" class=\"wp-image-2484\" srcset=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-700x124.jpg 700w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-250x44.jpg 250w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-768x136.jpg 768w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-760x135.jpg 760w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-500x89.jpg 500w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id-120x21.jpg 120w, https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/policy_id.jpg 1510w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Uma lista e pol\u00edticas suportadas pelo Magento e suas descri\u00e7\u00f5es podem ser encontradas <a rel=\"noreferrer noopener\" href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/extension-dev-guide\/security\/content-security-policies.html#configure-csps-for-your-custom-codeextensiontheme\" target=\"_blank\">aqui<\/a>.<\/p>\n\n\n\n<p>No caso do PagSeguro, a atualiza\u00e7\u00e3o acima pode ser vista em qualquer vers\u00e3o \u00e0 partir da 2.4.11.<\/p>\n\n\n\n<h2 id=\"h-quer-saber-mais\">Quer saber mais?<\/h2>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/devdocs.magento.com\/guides\/v2.4\/extension-dev-guide\/security\/content-security-policies.html\" target=\"_blank\">Nesta p\u00e1gina<\/a> da documenta\u00e7\u00e3o oficial (em Ingl\u00eas) j\u00e1 tem bastante coisa sobre CSP e Magento. No site da Mozilla tamb\u00e9m \u00e9 poss\u00edvel <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/HTTP\/CSP\" target=\"_blank\">entender a fundo como funciona o cabe\u00e7alho Content-Security-Policy<\/a> (em Portugu\u00eas).<\/p>\n\n\n\n<p>J\u00e1 para <a href=\"https:\/\/www.magenteiro.com\/cursos?utm_source=magenteiro&amp;utm_medium=post&amp;utm_campaign=csp&amp;___store=default\" target=\"_blank\" rel=\"noreferrer noopener\">saber mais sobre Magento<\/a> 2 e desenvolvimento, consulte o <a href=\"https:\/\/www.magenteiro.com\/curso-magento-2?utm_source=magenteiro&amp;utm_medium=post&amp;utm_campaign=csp&amp;___store=default\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2: O Curso<\/a>. Este \u00e9 o lugar ideal para aprender a criar m\u00f3dulos e componentes para Magento 2. Al\u00e9m disso, voc\u00ea ter\u00e1 acesso \u00e0 um grupo exclusivo de alunos onde trocamos experi\u00eancias e dicas sobre o mundo do e-commerce e Magento.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"Com a introdu\u00e7\u00e3o do CSP no Magento 2, m\u00f3dulos que inserem arquivos JavaScript, CSS, imagens ou praticamente qualquer tipo de [&hellip;]","protected":false},"author":1,"featured_media":2493,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,25],"tags":[118,41,37,61,22],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.0 (Yoast SEO v19.4) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSP no Magento 2 - Como configurar e liberar acesso \u00e0 recursos externos<\/title>\n<meta name=\"description\" content=\"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)\" \/>\n<meta property=\"og:description\" content=\"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\" \/>\n<meta property=\"og:site_name\" content=\"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/magenteiro\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-25T01:35:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-17T01:37:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ricardo Martins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@magenteiro\" \/>\n<meta name=\"twitter:site\" content=\"@magenteiro\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ricardo Martins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\",\"name\":\"Magenteiro\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/magenteiro\",\"https:\/\/www.linkedin.com\/company\/magenteiro\",\"https:\/\/www.youtube.com\/magenteiro\",\"https:\/\/facebook.com\/magenteiro\",\"https:\/\/twitter.com\/magenteiro\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png\",\"contentUrl\":\"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png\",\"width\":787,\"height\":149,\"caption\":\"Magenteiro\"},\"image\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#website\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/\",\"name\":\"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1\",\"description\":\"Artigos t\u00e9cnicos, tutoriais e muitos v\u00eddeos e cursos sobre Magento. Aqui voc\u00ea encontra dicas para lojistas e desenvolvedores feitos por quem entende do assunto.\",\"publisher\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magenteiro.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\",\"url\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\",\"name\":\"CSP no Magento 2 - Como configurar e liberar acesso \u00e0 recursos externos\",\"isPartOf\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#website\"},\"datePublished\":\"2020-06-25T01:35:05+00:00\",\"dateModified\":\"2024-09-17T01:37:50+00:00\",\"description\":\"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magenteiro.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\"},\"author\":{\"name\":\"Ricardo Martins\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150\"},\"headline\":\"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)\",\"datePublished\":\"2020-06-25T01:35:05+00:00\",\"dateModified\":\"2024-09-17T01:37:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/\"},\"wordCount\":1030,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#organization\"},\"keywords\":[\"Avan\u00e7ado\",\"Magento 2\",\"m\u00f3dulos\",\"pagseguro\",\"seguran\u00e7a\"],\"articleSection\":[\"Desenvolvimento\",\"Magento 2\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150\",\"name\":\"Ricardo Martins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g\",\"caption\":\"Ricardo Martins\"},\"description\":\"\u00c9 desenvolvedor web h\u00e1 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\u00edses, \u00e9 tamb\u00e9m criador do m\u00f3dulo PagSeguro Transparente, usado em mais de 12 mil lojas.\",\"sameAs\":[\"https:\/\/www.magenteiro.com\/\"],\"url\":\"https:\/\/www.magenteiro.com\/blog\/author\/ricardomartins\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSP no Magento 2 - Como configurar e liberar acesso \u00e0 recursos externos","description":"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/","og_locale":"pt_BR","og_type":"article","og_title":"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)","og_description":"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?","og_url":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/","og_site_name":"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1","article_publisher":"https:\/\/facebook.com\/magenteiro","article_published_time":"2020-06-25T01:35:05+00:00","article_modified_time":"2024-09-17T01:37:50+00:00","og_image":[{"width":960,"height":480,"url":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2020\/06\/magento2-csp.jpg","type":"image\/jpeg"}],"author":"Ricardo Martins","twitter_card":"summary_large_image","twitter_creator":"@magenteiro","twitter_site":"@magenteiro","twitter_misc":{"Written by":"Ricardo Martins","Est. reading time":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.magenteiro.com\/blog\/#organization","name":"Magenteiro","url":"https:\/\/www.magenteiro.com\/blog\/","sameAs":["https:\/\/www.instagram.com\/magenteiro","https:\/\/www.linkedin.com\/company\/magenteiro","https:\/\/www.youtube.com\/magenteiro","https:\/\/facebook.com\/magenteiro","https:\/\/twitter.com\/magenteiro"],"logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png","contentUrl":"https:\/\/www.magenteiro.com\/blog\/wp-content\/uploads\/2017\/04\/logo-white.png","width":787,"height":149,"caption":"Magenteiro"},"image":{"@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.magenteiro.com\/blog\/#website","url":"https:\/\/www.magenteiro.com\/blog\/","name":"Magenteiro | V\u00eddeos, Artigos, e Cursos Magento 2 e Magento 1","description":"Artigos t\u00e9cnicos, tutoriais e muitos v\u00eddeos e cursos sobre Magento. Aqui voc\u00ea encontra dicas para lojistas e desenvolvedores feitos por quem entende do assunto.","publisher":{"@id":"https:\/\/www.magenteiro.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magenteiro.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/","url":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/","name":"CSP no Magento 2 - Como configurar e liberar acesso \u00e0 recursos externos","isPartOf":{"@id":"https:\/\/www.magenteiro.com\/blog\/#website"},"datePublished":"2020-06-25T01:35:05+00:00","dateModified":"2024-09-17T01:37:50+00:00","description":"O Magento 2.3.5 introduziu o suporte ao header CSP (Content-Security-Policies). Isso altera a forma como os m\u00f3dulos usam recursos externos. O que fazer?","breadcrumb":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magenteiro.com\/blog\/"},{"@type":"ListItem","position":2,"name":"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)"}]},{"@type":"Article","@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#article","isPartOf":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/"},"author":{"name":"Ricardo Martins","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150"},"headline":"O que deve mudar na forma como usamos JS e arquivos externos no Magento 2 (CSP)","datePublished":"2020-06-25T01:35:05+00:00","dateModified":"2024-09-17T01:37:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/"},"wordCount":1030,"commentCount":0,"publisher":{"@id":"https:\/\/www.magenteiro.com\/blog\/#organization"},"keywords":["Avan\u00e7ado","Magento 2","m\u00f3dulos","pagseguro","seguran\u00e7a"],"articleSection":["Desenvolvimento","Magento 2"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magenteiro.com\/blog\/magento-2\/csp-e-magento2-como-resolver\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/e90c4bb268e5f2dad10d7c9760d4f150","name":"Ricardo Martins","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.magenteiro.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ae5800c87c4e0f6a4a6b7a3d66aae138?s=96&d=mm&r=g","caption":"Ricardo Martins"},"description":"\u00c9 desenvolvedor web h\u00e1 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\u00edses, \u00e9 tamb\u00e9m criador do m\u00f3dulo PagSeguro Transparente, usado em mais de 12 mil lojas.","sameAs":["https:\/\/www.magenteiro.com\/"],"url":"https:\/\/www.magenteiro.com\/blog\/author\/ricardomartins\/"}]}},"_links":{"self":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/2481"}],"collection":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/comments?post=2481"}],"version-history":[{"count":12,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/2481\/revisions"}],"predecessor-version":[{"id":4283,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/posts\/2481\/revisions\/4283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/media\/2493"}],"wp:attachment":[{"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/media?parent=2481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/categories?post=2481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magenteiro.com\/blog\/wp-json\/wp\/v2\/tags?post=2481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}