Magento Security: CSP Error – Refused to Load the Script

While working with Content Security Policy (CSP) in Magento 2, you may encounter a common Magento CSP Script Error in the console error similar to the following:
Refused to load the script ‘…/ajax/libs/jquery/3.6.0/jquery.min.js’
because it violates the following Content Security Policy directive:
“script-src ‘self'”.
This Magento CSP Script Error indicates that the browser blocked or reported a script because it does not comply with the CSP rules defined by the website.

Problem

If your site is running in CSP Report-Only mode, the browser will not block the script, but it will log violations in the console.

The first step is to verify the CSP configuration being returned by the server.

You can check this in:

Chrome DevTools → Network → Headers

Look for either of these headers:

Content-Security-Policy
Content-Security-Policy-Report-Only

Report-Only Mode

If the site is running in Report-Only mode, you may see Magento CSP Script Error warnings stating that a script violates the policy. In this mode:

The resource is not blocked
The browser reports the violation

This allows developers to monitor policy violations without affecting the website functionality.

Enforced Mode

If CSP is running in Enforced mode, the browser will block resources that do not match the defined policy.

This can lead to issues such as:

Tracking scripts not loading
Third-party integrations failing
Checkout scripts not functioning correctly

Because the browser strictly follows the CSP rules defined by the website.

Why It Happens

Content Security Policy allows scripts only from trusted domains listed in the script-src directive.

For example:

script-src ‘self’

This means scripts are allowed only from the same domain as the website.

However, if the script is being loaded from an external source such as:

https://developers.google.com/speed/libraries

that domain is not included in the policy.

Because of this, the browser either:

Reports a violation (in Report-Only mode), or
Blocks the script completely (in Enforced mode).

How to Identify the Issue

To identify CSP issues:

Open Chrome DevTools
Go to the Console tab
Look for CSP error messages

These messages typically contain:

The URL of the blocked resource
The directive that was violated (for example script-src)
The policy expected by the browser

This information helps determine which domain needs to be allowed in the CSP configuration.

Action to Take

If the script is required for the website to function, the domain must be allowed in the Magento CSP whitelist.

This can be done by adding the domain to the csp_whitelist.xml file.

Example configuration:
< policy id=”script-src” >
< values >
< value id=”ajax-googleapis” type=”host” >
https://developers.google.com/speed/libraries
< /value >
< /values >
< /policy >
This configuration explicitly allows scripts from the specified host.