417

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

1

3 Answers 3

799

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:;
9
  • 60
    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 6, 2013 at 10:46
  • 1
    I think URLs are a bit awkward to parse in general.
    – user824425
    Nov 6, 2013 at 11:43
  • 13
    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, 2016 at 11:07
  • 33
    It's useful to note that you shouldn't just add this without considering the security implications. See this security stack exchange question Apr 20, 2017 at 10:50
  • 9
    I'd really like to see an example showcasing that using img-src data: has security implications.
    – Abdull
    Feb 18, 2021 at 18:39
1

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

default-src 'self'; ... -> default-src 'self' data:; ...
-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=
1
  • 4
    I don't think its possible to include a type after the protocol. Only "data:" is valid.
    – rameezk
    Feb 12, 2020 at 13:08

Your Answer

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.