Magento 2.3.5 introduced a new feature called “Content Security Policy (CSP)” to provide additional layers of defense for Magento installations by helping to detect and mitigate Cross-Site Scripting (XSS) and related data injection attacks. Contact Dolphin Web Solution for Magento 2 development.
By default, CSP is configured in report-only mode, which allows merchants and developers to configure policies to work according to their custom code. After the policies have been configured, switch the mode to restrict.
When some resources from magento tries to include or execute an external site’s file/property then magento block it from loading immediately if it’s not whitelisted.
Magento 2.3.5 added a new module module-csp ( Magento_Csp ) which supports Content Security Policies ( CSP ) headers and provides ways to configure them. The policies can be configured for backend and frontend areas both.
You need to create below file in any of the modules which is enable. Let me show you by creating new module.
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Dolphin_Cspallow', __DIR__ );
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Dolphin_Cspallow" setup_version="1.0.0" /> </config>
<?xml version="1.0"?> <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="twitter.com" type="host">*.twitter.com</value> <value id="google-analytics" type="host">*.google-analytics.com</value> <value id="twimg" type="host">*.twimg.com</value> <value id="gstatic" type="host">*.gstatic.com</value> <value id="trustedshops" type="host">*.trustedshops.com</value> <value id="usercentrics" type="host">*.usercentrics.eu</value> <value id="fontawesome" type="host">*.fontawesome.com</value> <value id="bing" type="host">*.bing.com</value> <value id="zopim" type="host">*.zopim.com</value> <value id="zdassets" type="host">*.zdassets.com</value> <value id="google" type="host">*.google.com</value> </values> </policy> <policy id="style-src"> <values> <value id="cloudflare" type="host">*.cloudflare.com</value> <value id="googleapis" type="host">*.googleapis.com</value> <value id="twitter.com" type="host">*.twitter.com</value> <value id="twimg" type="host">*.twimg.com</value> <value id="gstatic" type="host">*.gstatic.com</value> <value id="typekit" type="host">*.typekit.net</value> <value id="trustedshops" type="host">*.trustedshops.com</value> <value id="fontawesome" type="host">*.fontawesome.com</value> <value id="bing" type="host">*.bing.com</value> </values> </policy> <policy id="img-src"> <values> <value id="cloudflare" type="host">*.cloudflare.com</value> <value id="klarna-base" type="host">*.klarna.com</value> <value id="googleadservices" type="host">*.googleadservices.com</value> <value id="google-analytics" type="host">*.google-analytics.com</value> <value id="paypal" type="host">*.paypal.com</value> <value id="twitter.com" type="host">*.twitter.com</value> <value id="twimg" type="host">*.twimg.com</value> <value id="vimeocdn" type="host">*.vimeocdn.com</value> <value id="youtube-img" type="host">*.ytimg.com</value> <value id="data" type="host">'self' data:</value> <value id="fontawesome" type="host">*.bing.com</value> <value id="zopim" type="host">*.zopim.com</value> <value id="zopimio" type="host">*.zopim.io</value> <value id="doubleclick" type="host">*.doubleclick.net</value> <value id="google" type="host">*.google.com</value> <value id="googlein" type="host">*.google.co.in</value> <value id="mastercard" type="host">*.mastercard.com</value> </values> </policy> <policy id="connect-src"> <values> <value id="google-analytics" type="host">www.google-analytics.com</value> <value id="cloudflare" type="host">*.cloudflare.com</value> <value id="twitter.com" type="host">*.twitter.com</value> <value id="paypal" type="host">*.paypal.com</value> <value id="twimg" type="host">*.twimg.com</value> <value id="zdassets" type="host">*.zdassets.com</value> <value id="zopim" type="host">*.zopim.com</value> <value id="zopimio" type="host">*.zopim.io</value> <value id="mediator" type="host">wss://widget-mediator.zopim.com</value> <value id="googleanalytics" type="host">*.google-analytics.com</value> <value id="doubleclick" type="host">https://stats.g.doubleclick.net</value> </values> </policy> <policy id="font-src"> <values> <value id="cloudflare" type="host">*.cloudflare.com</value> <value id="twitter.com" type="host">*.twitter.com</value> <value id="gstatic" type="host">*.gstatic.com</value> <value id="typekit" type="host">*.typekit.net</value> <value id="twimg" type="host">*.twimg.com</value> <value id="trustedshops" type="host">*.trustedshops.com</value> <value id="googleapis" type="host">*.googleapis.com</value> <value id="zopim" type="host">*.zopim.com</value> <value id="zopimio" type="host">*.zopim.io</value> </values> </policy> <policy id="frame-src"> <values> <value id="youtube.com" type="host">https://www.youtube.com</value> <value id="sandbox.paypal.com" type="host">http://www.sandbox.paypal.com</value> <value id="paypal.com" type="host">www.paypal.com</value> <value id="twitter.com" type="host">*.twitter.com</value> </values> </policy> <policy id="media-src"> <values> <value id="zopim" type="host">*.zopim.com</value> <value id="zopimio" type="host">*.zopim.io</value> </values> </policy> <policy id="form-action"> <values> <value id="twitter.com" type="host">*.twitter.com</value> </values> </policy> </policies> </csp_whitelist>
You can add your third party urls / domains to csp_whitelist.xml.
For example if you are facing error like below :
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.gstatic.com/recaptcha/releases/recaptcha__en.js (“script-src”).
The above error is related to “script” is blocking from google captcha provider. So You need to allow its whitelist code in csp_whitelist.xml file mentioned as above. Let me show you how to add code for it.
<policy id="script-src"> <values> <value id="gstatic" type="host">*.gstatic.com</value> </values> </policy>
Do share your thoughts on Magento CSP in the Comments section below.
Thank you.
Click one of our contacts below to chat on WhatsApp