62

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.

3
  • 1
    Does it work properly with * on default-src? Nov 1, 2016 at 12:33
  • @DakshMehta it didn't.. i think it was because of the html2canvas. but the answer from manzapanza resolve the problem! Nov 1, 2016 at 13:16
  • Glad, it worked. but I didnt get how it worked with https when you using canvas, data should have worked. Nov 1, 2016 at 17:24

7 Answers 7

70

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

5
  • 42
    but isn't this defeating its purpose img-src * 'self' data: https: that is security?
    – setzamora
    Dec 7, 2017 at 1:49
  • 5
    you are invalidating the security allowing all, with *
    – francogp
    Oct 3, 2019 at 13:05
  • 17
    "I'm having a guest over while I'm at work and I'd like to let them into my house, how can I do this?" This answer is the "just rip the door off the hinges and let anyone in" equivalent. Don't do this. There is a reason those keys are called unsafe-.
    – msanford
    Jun 11, 2020 at 19:00
  • 1
    @msanford, It's more like, I am having a guest over, and someone down the road put a pad lock on my own door, yes just rip that pad lock off your door. No solution has been offered if you are to accept more than just svg's, say pngs, gifs, webp, and jpgs. Jan 29 at 22:35
  • I found the same issue as the OP but since mine is an API response I don't use any meta tags, it is a google chats incoming webhook. How can I resolve the issue in this scenario?
    – retrop5
    Sep 25 at 6:50
37

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:;

7
  • 30
    I would just like to add, to anyone reading this going forward, that adding anything after the port in data: does'nt work. I.e. you can't set data:image/svg+xml. It only allows to set data:.
    – confuse
    Mar 3, 2021 at 17:16
  • I am using helmet. Disabling the contentSecurityPolicy solved the issue for me.
    – A. Berta
    Nov 24, 2021 at 12:05
  • 6
    @A. Berta - Disabling the CSP does not solve the issue as it disables CSP. The question is not how to make the error go away. It is how to get the img to work with CSP enabled. Cheers! Jan 20, 2022 at 22:19
  • 1
    Are there any realistic scenarios where allowing data: in your img-src would open you up to a security issue? Feb 20, 2022 at 17:59
  • 2
    @Gilles that is specific to Firefox (Gecko) with 3% of internet users. But I found an SO answer saying Chromium does the same thing. I didn't find that documented anywhere though. Images used to have exploits regularly but I haven't seen one for a major format in years. I wonder if AVIF will experience some. Jul 28, 2022 at 22:16
4

For helmet users. Better practice instead of setting contentSecurityPolicy to false which should be the most last option. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)
2

In addition to what has been contributed above by @manzapanza, you need to make sure if the CSP hasn't been configured in your application's web config file because if the setting exists it will override your meta tag setting in your index file like in the example below:

Index meta 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' *">

Being overridden by a CSP setting in your web config file.

Web config setting:

<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />

In a case like this, consider having one set mostly in the system's web config file.

1

I was facing this same issue with my jspdf and html2canvas. I had used nginx too, and had configured "Content-Security-Policy" in my "conf/nginx-template.conf" file. Below changes fixed it for me:

add_header Content-Security-Policy <...>; img-src 'self' data: https:; frame-src 'self' data:;
0

If img-src 'self' data: is not working for you because you manipulate image with JavaScript, try also adding blob objects with img-src * 'self' data: blob: ;

-2

This simply solves the problem:

img-src 'self' data:

But ensure multiple directives are separated using a semicolon (;)

1
  • this is a rather incomplete answer to the question.
    – Glstunna
    Dec 9, 2021 at 1:34

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.