Content Security Policy (CSP) Conflict When Using Content Constructor CMS

[tingyeeh]

Title

Content Security Policy (CSP) Conflict When Using Content Constructor CMS

Description

While using the Content Constructor CMS, we encountered a Content Security Policy (CSP) issue. The problem arises when trying to load an external script from cdnjs.cloudflare.com, resulting in a CSP violation reported by the browser.

Reproduction Steps

1. Configure the Nginx server with the following security headers:

   # security headers
   add_header X-XSS-Protection        "1; mode=block" always;
   add_header X-Content-Type-Options  "nosniff" always;
   add_header Referrer-Policy         "strict-origin-when-cross-origin" always;
   add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob; frame-ancestors 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';" always;

2. Use the Content Constructor CMS and attempt to load the script https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.js.

Expected Behavior

The script should load without any CSP violation errors, allowing the CMS to function correctly.

Actual Behavior

The browser reports a CSP violation error with the following message:

[Report Only] Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.js' because it violates the following Content Security Policy directive: "script-src assets.adobedtm.com *.adobe.com www.googleadservices.com www.google-analytics.com googleads.g.doubleclick.net analytics.google.com www.googletagmanager.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com *.newrelic.com *.nr-data.net www.paypal.com www.sandbox.paypal.com www.paypalobjects.com t.paypal.com s.ytimg.com www.googleapis.com vimeo.com www.vimeo.com *.vimeocdn.com *.youtube.com https://www.gstatic.com/recaptcha/ https://www.google.com/recaptcha/ js.braintreegateway.com assets.braintreegateway.com c.paypal.com pay.google.com api.braintreegateway.com api.sandbox.braintreegateway.com client-analytics.braintreegateway.com client-analytics.sandbox.braintreegateway.com *.paypal.com songbirdstag.cardinalcommerce.com *.hsforms.net *.hsforms.com *.google.com *.gstatic.com *.aptrinsic.com 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Environment

• Nginx version: [Specify version]
• Operating system: [Specify operating system]
• Browser: [Specify browser and version]

Additional Information

• Confirmed that nginxconfig.io/security.conf and other included files do not set additional CSP headers.
• Cleared browser and server caches, but the issue persists.
• The issue specifically occurs when using the Content Constructor CMS.

By submitting this issue, we hope to get insights into the potential conflict causing the CSP violation and possible resolutions. Thank you for your assistance.

[tingyeeh]

Solution:

Initially, modifying Nginx's CSP settings did not resolve the issue because Magento manages CSP internally. The correct approach was to add the external script's source to Magento's CSP whitelist by modifying the csp_whitelist.xml file. Here is the configuration we added:

<?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">https://cdnjs.cloudflare.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

After adding this configuration, we cleaned the cache and redeployed the static content:

bin/magento cache:clean
bin/magento setup:static-content:deploy -f

This resolved the CSP violation issue.