Source:  Twitter logo

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?

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).
9 users liked answer #0dislike answer #09
granty profile pic
granty

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.

-5 users liked answer #1dislike answer #1-5
Shai Alon profile pic
Shai Alon

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).