How to Fix Content Security Policy Warnings in Magento 2

In this blog, Today I will explain to how to fix content security policy warnings in Magento 2. From Magento 2.3.5 version, Magento introduce new feature to prevent cross site scripting and other related attacks called Content Security Policy.

In Magento, Magento_Csp module is about content security policy. CSPs and built-in browser features help prevent :

Loading a malicious script from an attacker’s website
A malicious inline script from sending credit card info to an attacker’s website
Loading a malicious style that will make users click on an element that wasn’t supposed to be on a page.

You may also like this :

Let’s assume that you have created simple module. After that, you need to create csp_whitelist.xml file at app/code/RH/Helloworld/etc/ and paste the below code to add a domain to whitelist for a policy.

Copy Code


<?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="fontawesome" type="host">*.fontawesome.com</value>
                <value id="cloudflare" type="host">*.cloudflare.com</value>
                <value id="google-analytics" type="host">*.google-analytics.com</value>
                <value id="gstatic" type="host">*.gstatic.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
            </values>
        </policy>

        <policy id="style-src">
            <values>
                <value id="fontawesome" type="host">*.fontawesome.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="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="doubleclick" type="host">*.doubleclick.net</value>
                <value id="mastercard" type="host">*.mastercard.com</value>
            </values>
        </policy>

        <policy id="connect-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>
            </values>
        </policy>

        <policy id="font-src">
            <values>
                <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="cloudflare" type="host">*.cloudflare.com</value>
            </values>
        </policy>

        <policy id="frame-src">
            <values>
                <value id="youtube.com" type="host">*.youtube.com</value>
                <value id="twitter.com" type="host">*.twitter.com</value>
                <value id="vimeo.com" type="host">*.vimeo.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>

However, You can add other domain to the whitelist for a policy in appropriate policy id in csp_whitelist.xml. In value id, you must need to use unique id.

In Last, You need to clean cache.

Now, this url’s warning will be remove from browser’s console.

That’s it !!!

I hope this blog is easy to understand about how to fix content security policy warnings in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Post Views: 3,488