Search code examples
reactjsgoogle-chromecreate-react-appfaviconcontent-security-policy

Image violates the following Content Security Policy directive - Create React App

I'm getting the following Content Security Policy error in chrome when running my React app. I tried googling this for a long time, but I couldn't find enough information about how to fix this when using create-react-app. I would appreciate any help very much.

enter image description here

Solution

  • After a bit search about your issue, I ended up here in MDN. I will shortly define what the problem is but for more information I strongly suggest you read the provided link.

    So what is happening here exactly?

    This is because the website is configured to use Content Security Policy(CSP) to protect against someone maliciously loading code from a third party. 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.

    How to solve this then?

    According to the MDN link that I provided, we should solve this by adding the following meta tag to our index.html.

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

    NOTE: *.trusted.com should be the trusted site or list of them.

    Then what should it happen on your own localhost?

    I have faced several issues like yours and then found out when this error has shown up on your console, this is not necessarily showing you have this exact problem on your project, and the other problems in your main code could cause such an error. I just found some similar issues that will share below:

    So what you have to do?

    First of all, please check all your existing codes and paths in your project and make sure there are no errors in neither of them. When you get rid of all your errors this should be gone as usual, but if the problem insists to exist please make sure to disable all your extensions in your browser (you can safely test it on incognito without disabling anything) and then run the project and see if the error is gone or not.

    So there is two-step at all to get rid of that:

    1. Get rid of all your project and pathing errors
    2. Make sure all your extensions are disabled