Magento 2 CSP Reports: Fixing Content Security Policies Warnings

• What is Magento CSP Report?

• How Does CSP Improve Security?

• 2 Modes of Magento 2 CSP Reports

• Steps to Configure CSP for Magento 2

• Steps to Fix Content Security Policy Warnings in Magento 2

• CSP Codes & Their Descriptions

• FAQs

• Summary

What is Magento CSP Report?

CSP (Content Security Policy) is a security feature that prevents unwanted scripts from running on a webpage.

When a website has CSP set up, it sends a policy to the user's browser with each HTTP request. This policy tells the browser which content is allowed to load and which to block.

CSP covers various content types like images, scripts, iframes, and style sheets. Magento added CSP support in version 2.3.5. This feature boosts security for Magento applications. It protects against threats like:

• Cross-Site Scripting (XSS): Cross-Site Scripting (XSS) allows attackers to inject harmful scripts into web pages. These scripts run in the user's browser and can steal data or manipulate the site.

• Card skimmers: Card skimmers are harmful scripts that capture credit card information during online transactions. They steal sensitive data and send it to attackers.

• Session hijacking: Session hijacking occurs when an attacker takes over a user's session. The attacker can access and manipulate the user's account and data.

• Clickjacking: Clickjacking tricks users into clicking on something different from what they perceive. It can lead to unauthorized actions or the theft of sensitive information.

How Does CSP Improve Security?

Aspect	Explanation
Whitelisted Content	Only approved content loads in the browser. Content not on the whitelist is blocked. It ensures that only safe and verified scripts run. It reduces the risk of harmful code execution. By controlling what can be loaded, CSP strengthens website security. It acts as a filter for unwanted content.
CSP Errors	Errors appear in the console when unapproved content is blocked. It alerts developers to potential Magento security issues. It helps in identifying and fixing vulnerabilities. The errors provide specific details about what was blocked. This transparency aids in maintaining a secure environment. Developers can monitor and adjust CSP rules as needed.
Extra Layer of Security	CSP adds a security layer beyond traditional measures. Even if the Magento admin panel is compromised, CSP can block harmful scripts. It ensures that only pre-approved content runs. It limits the damage a hostile user can cause. It protects users from potential threats. CSP acts as a safeguard against unexpected vulnerabilities.
Prevents XSS Attacks	CSP effectively stops Cross-Site Scripting (XSS) attacks. It blocks unauthorized scripts from executing. This protection extends to related threats like card skimmers. It also guards against session hijacking and clickjacking. CSP ensures that scripts from untrusted sources do not run. It provides comprehensive protection against script-based attacks.
Built-in Browser Support	Browsers support CSP natively. This integration enhances security measures. Browsers block harmful scripts and styles based on CSP rules. It ensures consistent enforcement of security policies. This built-in support simplifies implementation for Magento developers. CSP leverages browser capabilities to maintain a secure environment.
Blocks Malicious Scripts	CSP prevents the loading of scripts from attacker websites. It ensures that only scripts from trusted sources run. It reduces the risk of harmful activities. By blocking hostile scripts, CSP protects user data. It also maintains the integrity of the website. This proactive measure safeguards against external threats.
Protects Credit Card Info	CSP stops harmful scripts from sending credit card data to attackers. It ensures that sensitive information remains secure. This protection is key for e-commerce sites. By blocking unauthorized scripts, CSP prevents data theft. It enhances user trust and confidence. CSP plays a key role in protecting financial transactions.
Blocks Malicious Styles	CSP prevents styles that trick users into clicking unintended elements. It blocks unauthorized styles from loading. It reduces the risk of phishing attacks. Harmful styles can alter the appearance of a page. CSP ensures that only approved styles are applied. It maintains the intended user experience and security.

2 Modes of Magento 2 CSP Reports

Steps to Configure CSP for Magento 2

1. Create a Custom Module

Build a new custom module named Vendor_Csp. Set up the required file structure for the module.

2. Configure XML Settings

Create a config.xml file. Ensure the file includes settings to block harmful scripts:

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

3. Set Up Whitelist Policies

Create a csp_whitelist.xml file. Add the following structure to define policies:

<policies>
    <policy id="font-src">
        <values>
        </values>
    </policy>
    <policy id="style-src">
        <values>
        </values>
    </policy>
    <policy id="img-src">
        <values>
        </values>
    </policy>
    <policy id="connect-src">
        <values>
        </values>
    </policy>
    <policy id="frame-src">
        <values>
        </values>
    </policy>
    <policy id="script-src">
        <values>
        </values>
    </policy>
</policies>

4. Inspect and Filter CSP Violations

Open Chrome and navigate to your website. Right-click and select Inspect to open developer tools.

Go to the Console tab and add a filter for "Refused." Browse different pages to identify CSP violations. Investigate each violation to determine necessary whitelist rules.

5. Whitelist Domains

Use wildcards or specific domains to whitelist content. Example of wildcard:

<policy id="script-src">
    <values>
        <value id="example" type="host">*.example.com</value>
    </values>
</policy>

Example of specific domain:

<policy id="script-src">
    <values>
        <value id="googleadservices" type="host">www.googleadservices.com</value>
    </values>
</policy>

6. Apply CSP Whitelist

Run bin/magento setup:upgrade to apply the whitelist. Navigate the site and whitelist as many violations as possible. Switch back to report_only=0 for comprehensive testing and adjustments.

Steps to Fix Content Security Policy Warnings in Magento 2

1. Create a csp_whitelist.xml File

Create a csp_whitelist.xml file in Vendor\Extension\etc. Define policies to whitelist specific domains. Example for script-src:

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

Use a unique ID for each value and add the domain mentioned in the warning.

2. Create a config.xml File

Create a config.xml file in Vendor\Extension\etc. Set report_only to 0 to enforce policies:

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

It ensures Magento acts on any policy violations.

3. Inspect and Filter CSP Warnings

Open Chrome and navigate to your website. Right-click and select Inspect to open developer tools. Go to the Console tab and add a filter for "Refused."

It will show only CSP violations. Investigate each warning and identify necessary whitelist rules.

4. Whitelist Domains by Policy

Add domains to the whitelist for different policies such as style-src, frame-src, connect-src, img-src, and font-src. Example for 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>

Use the same method for other policies as needed.

5. Apply Changes

Run bin/magento setup:upgrade to apply the whitelist changes. Navigate the site and whitelist any remaining violations.

Make sure to set report_only to 0 for final testing and adjustments. It ensures all policies are correctly enforced and the site remains secure.

CSP Codes & Their Descriptions

CSP Code	Description
default-src	The default policy serves as a fallback for all content types. It applies if no other directive matches a resource type. It ensures there is always a policy for every content type. It helps prevent unintentional Magento security gaps.
base-url	Controls which URLs can appear in a page’s element. It manages the base URL for relative URLs in the document. It ensures that only trusted URLs are used. It prevents harmful base URL modifications.
child-src	Specifies sources for workers and embedded frame contents. It restricts where child resources can be loaded from. It helps prevent malicious scripts in workers and frames. Ensures only trusted sources are used for these elements.
connect-src	Manages sources that can be loaded using script interfaces like XMLHttpRequest, WebSocket, and EventSource. It restricts the URLs scripts can connect to. It prevents connections to malicious servers. Ensures only trusted connections.
font-src	Controls sources that can serve fonts. Ensures only trusted font sources are used. Helps prevent the use of malicious or compromised fonts. Enhances overall website security.
form-action	Specifies valid endpoints for form submissions. Restricts where form data can be sent. Ensures forms only submit data to trusted endpoints. Prevents data submission to malicious servers.
frame-ancestors	Manages sources that can embed the current page. Restricts embedding of the page using frames. Prevents clickjacking attacks. Ensures only trusted sources can embed the page.
img-src	Controls sources from which images can be loaded. Ensures only images from trusted sources are used. Helps prevent the loading of corrupt images. Enhances content security in Magento.
manifest-src	Manages allowable contents of web app manifests. The application can use controls that manifest files. Ensures only trusted manifest files are allowed. Maintains integrity of web app manifests.
media-src	Specifies sources from which media can be loaded, including audio and video elements. Restricts media from trusted sources. Prevents the use of harmful media content. Ensures secure media loading.
object-src	Controls sources for object, embed, and applet elements. Restricts these elements from trusted sources. Helps prevent the execution of malicious objects. Enhances overall security.
script-src	Manages sources for JavaScript elements. Ensures only scripts from trusted sources are executed. Helps prevent Cross-Site Scripting (XSS) attacks. Important for enhancing security.
style-src	Specifies sources for stylesheets. Ensures only styles from trusted sources are applied. Helps prevent the use of malicious or compromised styles. Enhances website security.

FAQs

1. What is CSP mode in Magento 2?

CSP mode in Magento 2 controls how Content Security Policy rules are enforced. Report-only mode logs violations without blocking content. Restrict mode enforces policies and blocks unauthorized content.

2. How does CSP mode improve security on the storefront?

CSP mode adds a layer of security to the Magento storefront by blocking malicious scripts. This protects against related attacks like XSS and clickjacking. It, with dedicated Magento hosting, ensures only whitelisted content runs.

3. Can I use the CSP reports extension with Magento Open Source?

Yes, the CSP reports extension is compatible with Magento Open Source. It helps identify and fix policy violations. Developers can monitor and adjust CSP rules.

4. What is the report-only mode in CSP?

Report-only mode logs CSP violations without blocking content. It allows developers to test and debug CSP policies. Violations are shown in the browser console for review.

5. How does the CSP header protect Adobe Commerce sites?

The CSP header specifies which content is allowed to load on Adobe Commerce sites. It blocks malicious scripts and styles. This protects against related attacks like card skimmers and session hijacking.

Summary

Implementing Magento CSP reports enhances the security of your Magento storefront. Here are the key benefits covered in this tutorial:

• Whitelisted Content: Only approved scripts and content can load.

• CSP Errors: Identifies and logs potential security issues.

• Extra Layer of Security: Adds protection beyond traditional security measures.

• Prevents XSS Attacks: Blocks unauthorized scripts and related threats.

• Built-in Browser Support: Ensures consistent enforcement of security policies.

Secure your e-commerce platform with managed Magento hosting for optimal performance and protection.