Menu Close

Resolved – Content Security Policy error in Magento 2

You might face Content Security Policy (CSP) issue in Magento2 after installing third party extensions or connect with Google Analytics. If check error on browser console then it will look like following screenshot

Solution:

How to solve this error?

We can solve this by defining security policy for each individual domains. Create module as steps below

Step1) Register new module by creating two files below

app/code/<VENDOR>/CSP/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'<VENDOR>_CSP',
__DIR__
);

and app/code/<VENDOR>/CSP/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="<VENDOR>_CSP" setup_version="1.0.0" />
</config>

please replace <VENDOR> with your own vendor name

Step2) Create csp_whitelist.xml file in etc folder

app/code/<VENDOR>/CSP/etc/csp_whitelist.xml

<?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="gstatic" type="host">*.gstatic.com</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="gstatic" type="host">*.gstatic.com</value>
				<value id="fontawesome" type="host">*.fontawesome.com</value>
				<value id="bing" type="host">*.bing.com</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="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="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="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="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="form-action">
			<values>
				<value id="twitter.com" type="host">*.twitter.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="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="media-src">
			<values>
				<value id="zopim" type="host">*.zopim.com</value>
				<value id="zopimio" type="host">*.zopim.io</value>
			</values>
		</policy>
	</policies>
</csp_whitelist>

You can add or remove code in csp_whitelist.xml file depend upon the error you are getting in browser console

for example: connect-src, style-src etc

Step3) Once csp_whitelist.xml file finalize then run following command to check effect on website

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento indexer:reindex 

php bin/magento cache:flush

Leave a Reply

Your email address will not be published. Required fields are marked *