How to Fix Content-Security-Policy issue in Magento 2: A Step-by-Step Guide

Securing your Magento 2 website is of utmost importance to protect it from potential security vulnerabilities, such as cross-site scripting (XSS) attacks. One crucial security feature you need to pay attention to is the Content-Security-Policy (CSP). However, misconfigurations or conflicts with third-party extensions can sometimes cause issues with the Content-Security-Policy header. In this step-by-step guide, we will walk you through the process of fixing the Content-Security-Policy issue in Magento 2. By following these instructions, you’ll be able to ensure that your website remains secure while maintaining its functionality.

Overview of Content-Security-Policy (CSP)

To effectively fix Content-Security-Policy in Magento 2, it’s important to have a clear understanding of what CSP entails and how it operates within the framework. Here’s an overview of Content-Security-Policy:

1. What is Content-Security-Policy?

Content-Security-Policy is a security feature implemented by modern web browsers to mitigate the risk of cross-site scripting (XSS) attacks. It allows website administrators to define a set of policies that control which resources can be loaded and executed on their web pages.

2. Key Elements of Content-Security-Policy

• Directives: CSP utilizes directives to specify the rules and restrictions for resource loading and execution.
• Sources: These define the origins from which resources can be loaded, such as ‘self’, ‘unsafe-inline’, ‘unsafe-eval’, or specific domains.
• Policies: Multiple directives can be combined to create a comprehensive security policy for a website.

3. Common Directives Used in Content-Security-Policy

• default-src: This directive specifies the default sources from which various resources like scripts, stylesheets, images, fonts, frames, and connections can be loaded if specific directives are not explicitly defined.
• script-src: The script-src directive controls the sources from which JavaScript files can be loaded and executed. It helps prevent the execution of malicious scripts from untrusted sources.
• style-src: With the style-src directive, you can manage the sources from which CSS stylesheets can be loaded. It ensures that only trusted stylesheets are applied to your web pages.
• img-src: The img-src directive specifies the allowed sources from which images can be loaded on your website. 
• font-src: The font-src directive controls the sources from which font files can be loaded.
• frame-src: This directive specifies the sources that can be embedded in frames or iframes. It helps control which websites can be loaded within frames on your web pages, preventing unauthorized embedding.
• connect-src: The connect-src directive manages the sources that can be accessed via XMLHttpRequest, Fetch, or WebSockets. By limiting the allowed sources, you can restrict potential data leakage or unauthorized network requests.

The purpose of CSP is to enhance security. However, if CSP is not configured correctly, it can prevent the browser from loading CSS files, scripts, or other resources from unknown sources. This can impact the appearance and functionality of the website or custom modules in Magento 2, causing them to not work properly or display incorrectly.

Fixing Content-Security-Policy in Magento 2 aims to ensure that essential files such as CSS and scripts are safely and properly loaded and executed. This ensures that your website functions correctly and is not blocked by the browser.

Methods for Fixing Content-Security-Policy (CSP) Issues in Magento 2

The error will appear as shown below. You can check the error by going to Inspect -> Console of your browser.

You will receive the following message when encountering the issue: Content-Security-Policy: The page’s settings blocked the loading of a resource at …

To resolve this error in Magento 2, we will follow these steps:

Step 1: Create file csp_whitelist.xml

The csp_whitelist.xml file in Magento 2 is a configuration file that allows you to define a whitelist of trusted sources for Content Security Policy (CSP) directives.

Create the csp_whitelist.xml file in your custom module under the path app/code/<Vendor>/<Module>/etc

Step 2: Add domain to the whitelist

For example, in the case of the image above, the page blocked http://cdnjs.cloudflare.com style-src and script-src. Add the following code into the csp_whitelist.xml file just created in step 1:

<?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="cdnjs-cloudflare" type="host">http://cdnjs.cloudflare.com</value>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="cdnjs-cloudflare" type="host">http://cdnjs.cloudflare.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Note: The CSP type can be changed by editing the id attribute value in the policy tag(font-src, frame-src, img-src, connect-src…)

After adding the resource to the whitelist, save it and proceed to clear the cache.

php bin/magento c:c

Now the whitelisted resources will be working properly, reload the page to check the results.

Conclusion

In conclusion, addressing Content-Security-Policy (CSP) issues in Magento 2 is crucial for enhancing website security. By reviewing and modifying configuration files, adjusting CSP directives, and thoroughly testing changes, Magento 2 website owners can successfully resolve CSP issues and maintain a secure online presence.