Search code examples
htmlnode.jsreactjsherokucontent-security-policy

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:

<meta
      http-equiv="Content-Security-Policy"
      content="connect-src https://api.themoviedb.org 'self'; default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' ; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
    />

However this is what I get in Chrome console:

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.

Why does it tell me that connect-src was not set, when I can see it in the index.html when I inspect the page?

Solution

  • 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.