CODEWITHSUNDEEP
reactjscontent-security-policy
Arsene Wenger
Arsene Wenger

Reputation: 659

Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy

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?

Upvotes: 1

Views: 8036

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3465

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

Upvotes: 2

Related Questions