Skip to content
Table of Contents
Magento Security: CSP Error – Refused to Connect
While working with Content Security Policy (CSP) in Magento 2, you may sometimes notice API calls failing during checkout or payment processing.
A common console error appears like the following:
Refused to connect to ‘api.paymentgateway.com’
because it violates the following Content Security Policy directive:
“connect-src ‘self'”.
This Magento CSP connect error indicates that the browser has blocked a request because the domain being accessed is not allowed by the current CSP policy.
The Problem
CSP in Magento can run in two modes:
- Report-Only Mode
In this mode, the browser does not block the resource, but it logs Magento CSP connect error violations in the console. This allows developers to detect policy issues without affecting the functionality of the website. - Enforced Mode
In this mode, the browser actively blocks any resource that violates the CSP rules.
When debugging CSP issues, the first step is to check which CSP configuration your server is returning.
You can verify this by opening:
Chrome DevTools → Network → Headers
Look for one of the following response headers:
Content-Security-Policy
or
Content-Security-Policy-Report-Only
If the site is running in Report-Only mode, the browser console may show warnings such as:
Refused to connect to ‘api.paymentgateway.com’
because it violates the following Content Security Policy directive:
“connect-src ‘self'”.
Even though the resource may still load in this mode, the warning indicates that the domain is not currently allowed by the defined CSP policy.
Diagnostic
CSP allows API calls only from domains defined in the connect-src directive.
For example, a CSP policy may look like this:
connect-src ‘self’
This configuration allows connections only to the same origin as the website.
However, Magento may attempt to connect to an external API such as:
api.paymentgateway.com
Since this domain is not whitelisted in the CSP policy, the browser blocks the request , causing a Magento CSP connect error when CSP is enforced.
To quickly identify this issue, open:
Chrome DevTools → Console
The console typically shows:
- The blocked domain
- The violated directive
- The type of request that was blocked
This information helps quickly diagnose which CSP rule needs to be updated.
What This Can Impact
If the required API domain is not allowed in CSP, it can lead to several functional issues on the website, including:
- Payment gateway APIs not working
- Checkout requests failing
- Analytics or tracking APIs not sending data
These issues occur because the browser refuses to establish the connection with external services that are not explicitly allowed in the CSP configuration.
Action to Take
To resolve this issue, the required domain must be added to the CSP whitelist.
In Magento, this is done by updating the csp_whitelist.xml configuration file and allowing the domain under the connect-src policy.
Example configuration:
< policy id=”connect-src” >
< values >
< value id=”payment-api” type=”host” >
api.paymentgateway.com
< /value >
< /values >
< /policy >
Once the domain is added, Magento will include it in the CSP policy, allowing the browser to connect to the external API.
Pro Tip
A simple and effective way to debug CSP issues is to always start with the browser console.
Open:
Chrome DevTools → Console
In most cases, the console will clearly show:
- The blocked domain
- The violated CSP directive
- The type of rule required
This information makes diagnosing and fixing Magento CSP connect error issues much faster and more efficient.
