1

I'm very new to programing and have zero knowledge on content security policy.

I have an image upload section. But after making some changes to allow external parties, Image upload section is not working for me.

Refused to load the image 'blob:https://localhost:3001/02b1b83e-ba1d-4881-86f5-f7b00847d7b0' because it violates the following Content Security Policy directive: "img-src 'self' data:".

backend : https://localhost:3000 frontend : https://localhost:3001


         http-equiv="Content-Security-Policy"
         content="img-src 'self' data:; 
         script-src * 'self' https://service.xyz.com  https://service.xyz.com' unsafe- 
         inline'; 
         connect-src  * 'self' https://service.xyz.com https://service.xyz.com  ; 
         frame-src * 'self'  https://service.xyz.com  https://service.xyz.com ; "

I'm building a widget that will be hosted on different websites and images will be accessed from different URLs.

Can someone help me with this issue?

Arsene Wenger
  • 587
  • 4
  • 21
  • Does this answer your question? [Refused to load the image 'blob:...' because it violates the following Content Security Policy](https://stackoverflow.com/questions/59484216/refused-to-load-the-image-blob-because-it-violates-the-following-content-s) – vighnesh153 Feb 01 '22 at 18:10

1 Answers1

2

You'll need to expand your img-src directive to "img-src 'self' data: blob:;"

Halvor Sakshaug
  • 2,583
  • 1
  • 6
  • 9