Content Security Policy data not working for base64 Images in Chrome 28

Question

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     lt html gt   lt head gt   lt meta http-equiv  Content-Security-Policy  content           default-src  none           style-src  self   unsafe-inline           img-src  self  data              gt       lt style gt           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                 lt  style gt   lt  head gt   lt body gt   lt h1 gt CSP lt  h1 gt       lt div id  helloCSP  gt  lt  div gt   lt  body gt   lt  html gt    You can also open this example here  https   dl dropboxusercontent com u 638360 ps csp html

User · Answer

Try this   data to load     lt svg xmlns  http   www w3 org 2000 svg  viewBox  0 0 4 5  gt  lt path fill   343a40  d  M2 0L0 2h4zm0 5L0 3h4z   gt  lt  svg gt    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

User · Answer

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

[content-security-policy] Content Security Policy "data" not working for base64 Images in Chrome 28

Examples related to content-security-policy