1

Just upgraded my browser to Firefox 40 (released two days ago) and now I'm noticing that base64 CSS background images are no longer displaying. All other browsers, including older versions of Firefox load the images just fine.

In the console, I get the following error:

Content Security Policy: The page's settings blocked the loading of a resource at data:image/png;base64,iVBORw0KGgoAAAA ......... CuwAAAABJRU5ErkJggg== ("default-src *").

My CSS looks like this:

.image {
    background-image: url("data:image/svg+xml;base64,iVBORw0KGgoAAAA .....");
}

I am using Angular and had included the ng-csp directive on the html tag, though removing that makes no difference.

DecafJava
  • 479
  • 2
  • 7
  • 19
  • Did you forget `background`? Your current CSS isn't valid. – kba Aug 13 '15 at 22:49
  • Oops, yes, I forgot to include it here but added now. I do have background in my CSS but left out other properties and added ellipses as well for brevity. Also, removing the data quotes makes no difference. In the FF inspector, or by using the Open in new tab option, I am able to open the image; just doesn't show up on page. – DecafJava Aug 13 '15 at 22:52
  • sounds like a bug to me in FF. Create a demo – charlietfl Aug 13 '15 at 22:52
  • 1
    See http://stackoverflow.com/a/18449556/453331 – kba Aug 13 '15 at 22:53
  • With an isolated demo with simple markup, I am not able to replicate this and the test image load just fine. I suspect it is Angular ng-csp related, since other sections of my site I'm working on use the same base64 image and it loads fine there in FF40 and they don't have the ng-csp directive (which I already tried removing manually). – DecafJava Aug 13 '15 at 22:55

1 Answers1

1

The comment left by kba was the solution! Adding a Content-Security-Policy header with an img-src of "* data:" did the trick. The new Firefox does not include the data: protocol as a part of the *, so explicitly adding it was required.

DecafJava
  • 479
  • 2
  • 7
  • 19