Site icon EcomPlugins Blog

Magento 2.4.8.x how to whitelist and ignore CSP errors on checkout page

Vipin Garg

In Magento 2.4.8.x the Content Security Policy (CSP) system is strict by default, and checkout pages often trigger CSP errors (Bootstrap, Google Fonts, payment iframe scripts, etc.).

To whitelist or ignore these CSP errors, you need to configure CSP policies in your module/theme via csp_whitelist.xml.

Steps to Whitelist CSP in Magento 2.4.8.x

  1. Locate or Create a CSP whitelist file
    In your custom module or theme, add:

    app/code/Vendor/Module/etc/csp_whitelist.xml

    or in theme:

    app/design/frontend/Vendor/theme/etc/csp_whitelist.xml

  2. Basic Example – Allow Bootstrap, Fonts, Inline

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

    <!-- Allow Google Fonts -->
    <policy id="style-src">
        <value id="google-fonts" type="host">fonts.googleapis.com</value>
    </policy>
    <policy id="font-src">
        <value id="google-fonts-gstatic" type="host">fonts.gstatic.com</value>
    </policy>

    <!-- Allow Bootstrap CDN -->
    <policy id="style-src">
        <value id="bootstrap" type="host">maxcdn.bootstrapcdn.com</value>
    </policy>
    <policy id="script-src">
        <value id="bootstrap-js" type="host">maxcdn.bootstrapcdn.com</value>
    </policy>

    <!-- Allow inline styles/scripts (⚠️ less secure) -->
    <policy id="style-src">
        <value id="unsafe-inline" type="keyword">'unsafe-inline'</value>
    </policy>
    <policy id="script-src">
        <value id="unsafe-inline" type="keyword">'unsafe-inline'</value>
    </policy>

    <!-- Allow payment iframe domains (example: Stripe, PayPal) -->
    <policy id="frame-src">
        <value id="stripe" type="host">js.stripe.com</value>
        <value id="paypal" type="host">www.paypal.com</value>
    </policy>
</csp_whitelist>
  3. Create app/code/Vendor/Module/etc/config.xml
    <?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_checkout_index_index>
                <report_only>1</report_only>
             </storefront_checkout_index_index>
          </mode>
          <policies>
             <storefront_checkout_index_index>
                <scripts>
                   <inline>0</inline>
                   <event_handlers>1</event_handlers>
                </scripts>
             </storefront_checkout_index_index>
          </policies>
       </csp>
    </default>
</config>

  4. Flush cache
    bin/magento cache:flush

👉 For checkout page specifically, you usually need:

Exit mobile version