Refused To Connect To X Because It Violates The Following Content Security Policy Directive (connect-src)

I deployed a MERN app on heroku and I set these values for the CSP:

Solution 1:

Unfortunately the answer by Shai Alon, marked as "right answer" is copmpetely wrong and provides mislead information.

1. A <meta http-equiv="Content-Security-Policy> meta tag is not considered as legacy.
   In some cases, the meta tag is the only way to delivery the policy to the page.

2. best practice make the default-src you first directive.

Nonsense. Order of directives in CSP has no any meaning. Moreover, Google's strict CSP does not have a default-src directive at all.

3. The topicstarter's issue is that node.js includes Helmet middleware in dependencies. Helmet v4 publishes a default CSP HTTP header which does not have connect-src directive.
   That's why topicstarter observes below message:

Refused to connect to [URL] because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Note that it's not a CSP rules from meta tag, but a default CSP rules by Helmet middleware.

Mitigating that default CSP by adding a second CSP via meta tag does fail because of 2 CSPs do applied at the same time - all sources should pass through both CSP.

So there is has 2 opts:

1. Disable Helmet helmet.contentSecurityPolicy() and use meta tag to delivery CSP.
2. Remove meta tag CSP and add connect-src rules into helmet.contentSecurityPolicy(options).

Solution 2:

CSP has versions (or levels) with newly supported features extending the original spec. Serving the CSP through an html meta header is considered legacy and has some drawbacks. Try setting CSP via the HTTP headers of the request Also, as a best practice make the default-src you first directive.

Share