CODEWITHSUNDEEP
htmlnode.jsreactjsherokucontent-security-policy
SimeriaIonut
SimeriaIonut

Reputation: 576

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?

Upvotes: 10

Views: 64410

Answers (3)

Jenish Mor
Jenish Mor

Reputation: 41

Try this...

If you are using a server-side framework, such as Express.js, you can add the Content-Security-Policy header to the HTTP response using the helmet middleware. Here's an example of how to add the CSP header with connect-src set to allow connections to 'self' and http://127.0.0.1:8000 as well as ws://localhost:42877/:

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      connectSrc: ["'self'", 'http://127.0.0.1:8000', 'ws://localhost:42877/']
    }
  }
}));

Upvotes: 4

granty
granty

Reputation: 8496

Unfortunately, the answer marked as "right answer", is completely wrong and provides misleading 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 question author'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 the question author 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 are two options:

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

Upvotes: 26

Shazz
Shazz

Reputation: 1

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.

Upvotes: -15

Related Questions