React JS Refuse to load the image because it violates the following Content Security Policy directive

Question

I faced this problem when I try to reload my react application web page. Note: In the development phase there was no issue with this kind of thing, but when I deploy it to production I faced this issue. Thank you.

Refused to load the image 'http://104.248.153.121:8080/favicon.ico' 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.

Here is an error image log: Error Log Refuse to load image

Answer 1

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.

Sample that says content="default-src 'self'" means this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

1. How to allow multiple sources?

You can simply list your sources after a directive as a space separated list:

content="default-src 'self' https://example.com/js/"

Note that there are no quotes around parameters other than the special ones, like 'self'. Also, there's no colon (:) after the directive. Just the directive, then a space-separated list of parameters.