Content Security Policy blocks images loaded through url()

[silverwind]

Images loaded through an userstyle are subject to the CSP of the styled domain in Chrome. In contrast, Stylish for Firefox loads violating images just fine. I wonder if you could change the way the content is loaded in Chrome, or if this an issue I should bring up to the Chromium team.

In our case, we're loading images from github.io on github.com. Here' the CSP errror:

Refused to load the image 'https://stylishthemes.github.io/GitHub-Dark/images/octocat-spinner-smil.min.svg' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com".

Related issues:
StylishThemes/GitHub-Dark#164
StylishThemes/GitHub-Dark#166

[silverwind]

In case you missed it, @leoj3n posted this possible solution. It looks like it filters out the 'img-src' part of the CSP header, per domain. I think this could be done on sites with active styles.

[JasonBarnabe]

Not sure it's a good idea to be messing with security headers...

[silverwind]

Yes, it's a sensitive topic. I'll have to explore if this would just affect stylish or more.

Edit: Code for reference below.

---

Regarding https://github.com/StylishThemes/GitHub-Dark/wiki/Image, my solution for now is to put the following code in background.js of a Chrome Extension:

//
// Disable CSP on GitHub
//

chrome.webRequest.onHeadersReceived.addListener(function(details) {
    for (var i = 0; i < details.responseHeaders.length; i++) {
        if (details.responseHeaders[i].name.toUpperCase() === 'CONTENT-SECURITY-POLICY') {
            var begin = details.responseHeaders[i].value.split('img-src', 2);
            var end = begin[1].split(';', 2);
            details.responseHeaders[i].value = begin[0] + 'img-src \'self\' data: *;' + end[1];

            console.log('New CSP should be... ' + details.responseHeaders[i].value);
        }
    }
    return {
        responseHeaders: details.responseHeaders
    };
}, {
    urls: [ '*://*.github.com/*' ],
    types: [ 'main_frame', 'sub_frame', 'stylesheet', 'script', 'image', 'object', 'xmlhttprequest', 'other' ]
}, [ 'blocking', 'responseHeaders' ]);

console.log('background.js Event Page');

And in manifest.json:

{
    "permissions": [
        "webRequest",
        "webRequestBlocking"
    ]
}