Content Security Policy for extensions and bookmarklets

Question

Github has the following Content Security Policy:

Content-Security-Policy:default-src *; script-src assets-cdn.github.com www.google-analytics.com collector-cdn.github.com; object-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com www.youtube.com player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com; connect-src 'self' ghconduit.com:25035 live.github.com uploads.github.com s3.amazonaws.com

We can clip/retrieve content from the web with browser extensions of services likes Evernote or Pocket.

I don't see any reference to Pocket or Evernote in this Github policy. Can someone please explain why the Pocket extension is able to retrieve content from Github, while the Evernote extension is not, having a CSP error)

Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load? If so, how Pocket does to be able make their extension work on any content?

We have this problem in our bookmarklets/extensions and I would like them to work as smooth as Pocket extension but I don't really know where to start... thanks

---

Edit: As people are asking for code in the comments, our bookmarklet is loaded with this javascript:

javascript: (function() {
    function loadScript(a, b) {
        var c = document.createElement('script');
        c.type = 'text/javascript';
        c.src = a;
        var d = document.getElementsByTagName('head')[0],
            done = false;
        c.onload = c.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                b()
            }
        };
        d.appendChild(c)
    }
    loadScript('http://localhostsss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js', function() {
        s.clipping.initClipping()
    })
})()

If I try to launch this bookmarklet in a Medium page, which have a CSP, I get the following error.

Refused to load the script 'http://localhostssss.com:9000/assets/js/backbone/views/clipping/clippinglocal.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'unsafe-inline' about: https://.akamaihd.net http://.baidu.com https://bitly.com https://.cloudfront.net https://.facebook.com https://.facebook.net https://getpocket.com https://.github.com https://.googleapis.com https://ssl.google-analytics.com https://app.greenhouse.io https://.medium.com https://myspace.com https://.pinterest.com https://www.readability.com https://thinkery.me https://this.cm https://.twitter.com https://use.typekit.net https://*.instapaper.com 'self'".

Can someone tell me how to make our bookmarklet loadable on websites like Medium or Github which have a CSP policy.

I can't talk so much about browser extensions yet because I didn't work on it yet and the person is not here atm. I just know that we have the same problem and our browser extensions are basically the same code as our bookmarklets except it's a little bit adapted to fit in a browser extension shell. If you can only answer for the bookmarklet case I'll be ok and accept the answer but any hint for browser extensions would be nice too :)

Answer 1

Can the CSP policy prevent a bookmarklet app or a browser extension app like a clipper to load?

It is very simple: The extension or bookmarklet will be blocked if it violates the CSP.

So, if the CSP blocks all inline script, no bookmarklet will work. Github does that with media-src because, by simply existing, the "media-src" directive blocks inline script by default. So no bookmarklet can work on Github.

(As a side note, even though all browsers work this way, this isn't what the standards says should happen. Bookmarklets should actually exempt from CSP, but unfortunately no browsers have bothered to permit that.)

Now, as for which extensions will work or will not work, that depends on how the extension itself works. Extensions can not be directly blocked by CSP, but, if the extension tries to do anything which does violates the CSP, it may fail. So, on Github, if the extension tries to add native script into the page's DOM, or tries to append an external script to the page's DOM from an unapproved location, or do any of the other restricted things described in the CSP, it may fail.

So, what part of the Evernote extension is causing a CSP error and how does Pocket do a similar job without causing an error? I don't know. That all depends on the very specific details of how those applications are written. Most likely it is quite simple to look at their code and try to figure it out. As far as I know, all Chrome extensions are written in JavaScript and packaged as a zip file - just with a different file extension. I believe that the same is true of Firefox addons also.