Content Security Policy blocking images

[silverwind]

Looks like Chrome enforces CSP for userstyles, white Firefox doesn't. Github only allows these domains to server images:

assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com

I see a few ways to solve this:

1. Inline all our images. This would bump our size above the limit for userstyles.org
2. Open an issue at Stylish for Chrome
3. Serve images from raw.githubusercontent.com
4. Ask GitHub to include github.io in above list

[Mottie]

I do notice the issue when I try to use the default background image in the style, but I usually install my style from userstyles, and that same default image is saved as a uri so no policy issue shows up.

I find it really odd that the main background image I usually use is hosted at githubusercontent.com domain and I haven't had any issues. Basically I copied the url from an attachment from an issue, like this one:

Click on that image, then copy the url and paste it into the stylish editor... it always seems to work, and I don't see an error in Chrome.

As a last resort, we could just create an account at photobucket or just use tinypic.com to save the images.

[ddavison]

i wonder what the possibility is for # 2... i'm sure that we aren't the only ones experiencing this.. I say it couldn't hurt to ask stylish to do something about this :)

[silverwind]

Alright, opened an issue. As CSP is a pretty new thing, we might be the first to run into this issue, given that the host domain has to specifiy it.

[Mottie]

I just added a wiki page on how to add a background image to the style.

[silverwind]

Thanks for contacting GitHub, it something I should have done earlier.

[Mottie]

From GitHub:

Hi Rob,

is there something we can do to work around this limitation

Thanks for the question. We don't have plans to change the current CSP, so you're limited to referencing images hosted on hostnames we have listed in the image-src section of our CSP. Currently, those are:

assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com

You could either use data URIs to embed base64-encoded binary data, or you could host the images by uploading them in an issue/comment. Those are our recommended approaches to solving this.

Hope that helps.

Thanks,
James

I don't remember if I asked if they would include github.io...

[silverwind]

Hmm, my stance was always to inline everything for performance, so I'm fine with that. With minfied code, we have a bit leeway regarding to style size.

A issue I see is with custom backgrounds. Maybe we should point users to a Data-URI generator instead of asking for an URL.

[silverwind]

By the way: What happens when a user uploads an image on us.org? Does it get embedded as Data-URI?

[silverwind]

@Mottie maybe ask them concisely to include github.io in their CSP. It's their own domain after all and should be on a same trust level as githubusercontent.com in my opinion.

[Mottie]

Yeah, userstyles.org does encode the image into a data-URI.

I did send a followup email asking that specifically. I'm just waiting for a response.

[Mottie]

would it be possible to include *.github.io in that list?

We don't have plans to add this to the list currently.

Thanks,
James

[silverwind]

Eh, they should at least explain on why they won't include it 😢.

Anyways, I think we may have to remove that URL background option for Chrome users, unless Jason comes up with a way to subvert CSP in Chrome, if that is even possible.