Content Security Policy: "img-src 'self' data:"

Question

I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.

But my app, keeps triggering this message:

Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: "img-src 'self' data:".

That's my meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src *;  img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;  style-src  'self' 'unsafe-inline' *"> 

I'm using html2Canvas within the app, and when I remove this: "img-src 'self' data:"

It fires this error:

html2canvas.js:3025 Refused to load the image 'data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates the following Content Security Policy directive: "default-src *".  Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. 

Along with a bunch of other errors.

Answer 1

Try replacing this part:

img-src * 'self' data: https:; 

So the complete tag:

<meta http-equiv="Content-Security-Policy" content="default-src *;    img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;    style-src  'self' 'unsafe-inline' *"> 

Content Security Policy Reference

Answer 2

img-src * 'self' data: https:; is not a good solution as it can make your app vulnerable against XSS attacks. The best solution here should be: img-src 'self' data:image/svg+xml. If it doesn't work try: img-src 'self' data:Consider changing it if you still have your directive as img-src * 'self' data: https:;