Image replacement prevented by Content Security Policy

Valacar

I'm wondering why I'm not able to replace an image with a base64 encoded URI...specifically with an SVG vector image. It used to work but it was probably before the site added a Content Security Policy (CSP). The web site is Hacker News and this is the CSS code:

img[src="y18.gif"]
{
  display: block !important;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeT0iMjkxIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ5PSIwIiBmaWxsPSIjZTA4NzYxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTI5MSkiLz48cGF0aCBkPSJNNC43IDRMOCAxMHY0aDJ2LTRsMy40LTZoLTIuNkMxMC4yIDUuOCA5IDggOSA4UzcuOSA1LjggNy40IDR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+) 0 0 no-repeat !important;
  width: 0 !important;
  height: 18px !important;
  padding-left: 18px !important;
}

It replaced the very top left logo in the header with an SVG image that's pretty similar in looks (slightly different shade of orange). Any idea why it doesn't work? Any ways around it? I get an error in the developer console in both Chrome and Firefox that looks like this:

news.ycombinator.com/:1 Refused to load the image 'data:image/svg+xml;charset=utf-8;base64,...' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

anagrammar

No way around the CSP issue currently. It's a FF bug/feature, so this code works in Chromium, using Stylus anyway. Stylus may have added a Chromium workaround which isn't possible in FF. I don't recall.

There's a special API to inject CSS in pages, which I believe would be unaffected by CSP, but it's not fully functional in both browsers yet. It'll likely be a PITA to convert to using it, but Stylus probably will eventually when it's ready.

I know the new API will resolve some issues anyway, but I'm not positive it'll solve them all.

In this case, since you're only adjusting colors, you could use filters, like:

img[src="y18.gif"] {
    filter: saturate(.5)brightness(1.2);
}

I'm not adjusting till it's correct, but there's a bunch of values that can be combined, so you can pretty much achieve any color if you experiment.

Valacar

Okay, thanks for the info. I guess I'll have to wait and hope for this new API to become available for add-ons like Stylus.

I was previously using CSS filters to modify the image colors, so I'll go back to using that method again.