reactjs - Refused to load the image because it violates the following Content Security Policy directive: "default-src 'none'"

Question

Refused to load the image because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

The site gets loaded at first but after doing a refresh it gives the above error. I have built my site using React.js in front-end and back-end is of Node.js. My site is deployed on heroku.

Edit 1:

Also getting below this in issues

Content Security Policy of your site blocks some resources because their origin is not included in the content security policy header The Content Security Policy (CSP) improves the security of your site by defining a list of trusted sources and instructs the browser to only execute or render resources from this list. Some resources on your site can't be accessed because their origin is not listed in the CSP.

To solve this, carefully check that all of the blocked resources listed below are trustworthy; if they are, include their sources in the content security policy of your site. You can set a policy as a HTTP header (recommended), or via an HTML tag.

?? Never add a source you don't trust to your site's Content Security Policy. If you don't trust the source, consider hosting resources on your own site instead.

1 directive Resource Status Directive Source code https://xxxx.herokuapp.com/favicon.ico blocked img-src

Edit 2:

Response Header

HTTP/1.1 500 Internal Server Error Server: Cowboy Connection: keep-alive X-Powered-By: Express Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Origin, X-Requested-With, Content-type, Accept, Authorization Content-Security-Policy: default-src 'none' X-Content-Type-Options: nosniff Content-Type: text/html; charset=utf-8 Content-Length: 148 Date: Sat, 09 Jan 2021 18:23:41 GMT Via: 1.1 vegur

Edit 3:

For me, I forgot to declare

const path = require("path");

in my server.js and that was causing the above problem

question from:https://stackoverflow.com/questions/65645925/refused-to-load-the-image-because-it-violates-the-following-content-security-pol

Answer 1

You have status code 500 Internal Server Error Server, but not 200 OK. In this case NodeJS runs the finalhandler which publish the default CSP: Content-Security-Policy: default-src 'none' for security reasons.
default-src 'none' blocks all resourses include images.

I guess you have /favicon.ico blocked, browsers loads it by default from the web pages root /, here is a similar issue was solved.

You need to fix 500 Internal Server Error Server.