0

I display an image in my reactjs component by using an <img src="https://<site>" /> element. Running on localhost, all is fine, but when I deploy to my server (azure) I get the following error when I try and get the same image:

Refused to load https://<my-azure-blob-storage>/img because it does not appear in the img-src directive of the Content Security Policy.

Google says to implement meta Content Security Policy in the head tag in the index.html (for react), where I've tried adding the following: <meta http-equiv="Content-Security-Policy" content="img-src https://<my-azure-blob-storage>/">

I can't seem to find any more resources, and as a last option, I can retrieve the image via js and then show image as base64, but I would like to get this option to work

Carl-Johan
  • 77
  • 4
  • 11
  • 1
    You already has CSP published via [HTTP header](https://stackoverflow.com/questions/66418520/socket-io-blocked-by-content-security-policy/66450210#66450210), you can check this in the [Dev Tool](https://stackoverflow.com/questions/64060894/trouble-with-content-security-policy/64068629#64068629). Therefore you can't relax it via `` tag. Configure CSP in Helmet, or disable it (then you can use ``). – granty Mar 11 '21 at 05:58
  • YES - thank you. I was deploying my built reactjs site from a node server, where I'd implemented Helmet without allowing the correct img-src. – Carl-Johan Mar 11 '21 at 09:12
  • @Carl-JohanBeurling Please post what worked for you as an answer below so it helps others in the community as well. – Bhargavi Annadevara Apr 30 '21 at 20:19

0 Answers0