CSP, i.e., Content Security Policy is a robust tool introduced to prevent attacks on your Magento 2 store that aims to offer an additional layer of defence to detect and fight against Cross-Site Scripting (XSS) and related attacks, including card skimmers, session hijacking, clickjacking, and more. As of version Magento 2.3.5, it supports CSP headers and provides ways to configure them.

One can disable Magento 2 content security policy also. However, disabling CSP results in more possibilities of attacks on the store. Instead of blocking all third-party APIs completely, you can use the below solution and allow your selected third-party API as per your requirement.

CSP is implemented in Magento 2.3.5 with an aim to offer an additional layer of defence to detect and mitigate cross-site scripting and its related data injection attacks.

Method to Fix Content Security Policy Warnings in Magento 2:

You can use this solution to solve the warning shown below:

1. Create a csp_whitelist.xml file in Vendor\Extension\etc

<? 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="uniqueId" type="host">https://domain.com</value>
                <value id="uniqueId" type="host">accounts.google.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

<? 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">

<value id="uniqueId" type="host">https://domain.com</value>

<value id="uniqueId" type="host">accounts.google.com</value>

</values>

</policy>

</policies>

</csp_whitelist>

You can add a domain to the whitelist for a policy like script-src, style-src, font-src and others by adding a csp_whitelist.xml to your custom module’s etc folder.

We have to pass a unique random id to the value field.

In the value tag, enter the domain which is mentioned in the warning.

2. Create a config.xml file in Vendor\Extension\etc

<?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_only>0</report_only>
                </storefront>
                <admin>
                    <report_only>0</report_only>
                </admin>
            </mode>
        </csp>
    </default>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">

<csp>

<mode>

<report_only>0</report_only>

</storefront>

<admin>

<report_only>0</report_only>

</admin>

</mode>

</csp>

</default>

</config>

Content Security Policy works in two modes:

report – only – Magento reports the policy violations but does not act upon it. It is mainly used for debugging. CSP works in this mode by default.
restrict mode – Magento acts in the case of policy violations.

Here, we will use the default mode with zero value.

It’s an example of ‘script-src’ warning, you can use the below solution for such kind of similar warnings as per the above path and method.

style-src:

 <policy id="style-src">
            <values>
                <value id="uniqueId" type="host">https://domain.com</value>
                <value id="uniqueId" type="host">https://accounts.google.com/gsi/style</value>
            </values>
 </policy>

<value id="uniqueId" type="host">https://domain.com</value>

<value id="uniqueId" type="host">https://accounts.google.com/gsi/style</value>

</values>

</policy>

frame-src:

 <policy id="frame-src">
            <values>
                <value id="uniqueId" type="host">https://domain.com</value>
                <value id="uniqueId" type="host">https://accounts.google.com</value>
            </values>
 </policy>

<value id="uniqueId" type="host">https://domain.com</value>

<value id="uniqueId" type="host">https://accounts.google.com</value>

</values>

</policy>

connect-src:

 <policy id="connect-src">
            <values>
                <value id="uniqueId" type="host">https://domain.com</value>
                <value id="uniqueId" type="host">https://accounts.google.com/gsi/status</value>
            </values>
 </policy>

<value id="uniqueId" type="host">https://domain.com</value>

<value id="uniqueId" type="host">https://accounts.google.com/gsi/status</value>

</values>

</policy>

img-src:

 <policy id="img-src">
            <values>
            	<value id="uniqueId" type="host">https://domain.com</value>
                <value id="meetanshi-image" type="host">https://meetanshi.com/media.png</value>
            </values>
 </policy>

<value id="uniqueId" type="host">https://domain.com</value>

<value id="meetanshi-image" type="host">https://meetanshi.com/media.png</value>

</values>

</policy>

font-src:

 <policy id="font-src">
            <values>
                <value id="uniqueId" type="host">https://domain.com</value>
                <value id="uniqueId" type="host">*.gstatic.com</value>
            </values>
 </policy>

<value id="uniqueId" type="host">https://domain.com</value>

<value id="uniqueId" type="host">*.gstatic.com</value>

</values>

</policy>

You can solve any kind of CSP warning by following the above method.

Ways to Add Whitelisted Resources to Custom Code

The following table describes each type of CSP to configure it for your custom code/extension/theme

default-src	The default policy.
base-url	Defines which URLs can appear in a page’s <base> element.
child-src	Defines the sources for workers and embedded frame contents.
connect-src	Defines the sources that can be loaded using script interfaces.
font-src	Defines which sources can serve fonts.
form-action	Defines valid endpoints for submission from <form> tags.
frame-ancestors	Defines the sources that can embed the current page.
frame-src	Defines the sources for elements such as <frame> and <iframe>.
img-src	Defines the sources from which images can be loaded.
manifest-src	Defines the allowable contents of web app manifests.
media-src	Defines the sources from which images can be loaded.
object-src	Defines the sources for the <object>, <embed>, and <applet> elements.
script-src	Defines the sources for JavaScript <script> elements.
style-src	Defines the sources for stylesheets.

That’s it.

Any doubts? If so, mention them in the Comments section below for me to help you out asap.

Do share your thoughts on Magento CSP in the Comments section below.

Also, I’d be grateful if you can help me spread the word about the post among Magento Community via social media.

Thank You!

(based on 14 Reviews)

Fixed: Content Security Policy Warnings in Magento 2

Method to Fix Content Security Policy Warnings in Magento 2:

Ways to Add Whitelisted Resources to Custom Code

Ronak Bhatti

Leave a reply: Cancel Reply

Customer Service

Quick Links

Client's Love

Fixed: Content Security Policy Warnings in Magento 2

Method to Fix Content Security Policy Warnings in Magento 2:

Ways to Add Whitelisted Resources to Custom Code

Get Weekly Updates

Ronak Bhatti

Leave a reply: Cancel Reply

<img alt="Meetanshi" class="footer-logo-img" src="https://meetanshi.com/blog/wp-content/uploads/2020/01/meetanshi_small.png"/>

Customer Service

Quick Links

Client's Love