406

In this simple example, I'm trying to set a CSP header with the meta http-equiv header. I included a base64 image and I'm trying to make Chrome load the image.

I thought the data keyword should do that, but somehow it's not working.

I just get the following error in Developer Tools:

Refused to load the image 'data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7…nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7' because it violates the following Content Security Policy directive: "img-src 'self' data".

The example code (JSFiddle is not working for this example because I cannot set meta header there):

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
        default-src 'none';
        style-src 'self' 'unsafe-inline';
        img-src 'self' data;
        " />
    <style>
        #helloCSP {
            width: 50px;
            height: 50px;
            background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h1>CSP</h1>
    <div id="helloCSP"></div>
</body>
</html>

You can also open this example here:
https://dl.dropboxusercontent.com/u/638360/ps/csp.html

Pang
  • 9,564
  • 146
  • 81
  • 122
fwebdev
  • 4,291
  • 2
  • 15
  • 9

3 Answers3

782

According to the grammar in the CSP spec, you need to specify schemes as scheme:, not just scheme. So, you need to change the image source directive to:

img-src 'self' data:;
Pang
  • 9,564
  • 146
  • 81
  • 122
  • 58
    The reason for this awkwardness is that it's otherwise difficult to distinguish between the 'data' scheme, and a host named 'data'. – Mike West Nov 06 '13 at 10:46
  • 1
    I think URLs are a bit awkward to parse in general. –  Nov 06 '13 at 11:43
  • 12
    I had my data: in quotes - 'data:' - that also fails to work - and your answer also alerted me to that as a problem – kris Sep 12 '16 at 11:07
  • 30
    It's useful to note that you shouldn't just add this without considering the security implications. See [this security stack exchange question](https://security.stackexchange.com/a/95011/7090) – Matthijs Wessels Apr 20 '17 at 10:50
  • 1
    Security scanners find data: as insecure element – Sajithd Mar 06 '20 at 09:51
  • A problem we've run into (with not adding the insecure `data:`), is that html5 `video` elements trip the CSP when it tries to add a data:image/svg of like the pause icon, and play icons etc (nothing we have on our end, its entirely the browser doing it). Its random, and may be a Chrome issue, but its annoying like hell. – IncredibleHat Apr 23 '20 at 21:00
  • 8
    I'd really like to see an example showcasing that using `img-src data:` has security implications. – Abdull Feb 18 '21 at 18:39
  • 1
    In my case - "connect-src 'self' data: - seems to work – FloodGames Apr 10 '23 at 00:30
  • @MatthijsWessels @Abdull my understanding is that `img-src data:` would not introduce a cross-site-scripting vulnerability, since a script in an img tag won't run. Allowing data urls for `default-src` or other would be risky tho. – maurice Aug 04 '23 at 23:12
1

For me, I needed to include also "data:" to the "default-src 'self'" element:

default-src 'self'; ... -> default-src 'self' data:; ...
Guillaume Blanchet
  • 461
  • 5
  • 11
-3

Try this

data to load: 

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>

get a utf8 to base64 convertor and convert the "svg" string to:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=

and the CSP is 

img-src data: image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUn
PjxwYXRoIGZpbGw9JyMzNDNhNDAnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=
JamesH
  • 11
  • 3