Javascript bookmarklet on site with CSP in Firefox

Question

I have a simple Javascript bookmarklet that I put together to run the contents of an appropriate GitHub repository against an external tool:

javascript:(function(){ 
    var isApex = false;
    var sourceLangs = document.getElementsByClassName('lang');
        for (var i = 0; i < sourceLangs.length; ++i) {
        var l = sourceLangs[i]; 
        if(l.innerHTML == 'Apex') {
            isApex = true;
            // alert('This is an Apex repo');
        }
    }
    if(location.hostname != 'github.com' || isApex == false) {
        alert('This is not a GitHub Apex repository!');
    }
    else {
         window.open('https://githubsfdeploy.herokuapp.com/app/githubdeploy'+location.pathname);
    }

})();

When I run it in Chrome or IE (after running it through Daring Fireball's JS bookmarklet builder, it works fine. In Firefox, it generates Content Security Policy errors:

[15:33:19.318] Content Security Policy: Directive inline script base restriction violated @ https://github.com/Groundwire/Campaign-Combiner

I've read this SE question on the topic, and the github blog post about CSP, which acknowledges that CSP shouldn't interfere with bookmarklets, but at that time (April 2013), "none of the browsers get this correct." Is it currently the case that Firefox still gets this wrong, but Chrome & IE do?

I also found a blog post about user scripts & CSP, and there the author was able to deal with the issue by including the code from a github repo. I tried that, modifying my bookmarklet to:

javascript:document.body.appendChild(document.createElement("script")).src="https://raw.github.com/tet3/GitHubInstallerBookmarklet/master/GHIBkmarklet.js";void(0)

But unsurprisingly, that didn't work for a bookmarklet, as the calling code is still coming from the browser.

In short - any ideas on how to get this bookmarklet to work on Firefox?

Answer 1

I've looked at this issue as well, mostly in Firefox. I wasn't aware it would work in Chrome; that might be a recent change. Short of FF changing to recognize bookmarklets as being outside the policy (as it should!), there is no work around. The script won't run, full stop, you are dead in the water.

Alternatives:

1.) Create an addon; or utilize an existing addon like Greasemonkey to run a userscript.

2.) Run the code in the web console. In FF, CTRL+Shift+K gets you there in a jiffy.

3.) FF's developer scratch pad also works. If you save the code in a file, you can access it relatively quickly using Shift+F4 (open scratchpad) > File > Open Recent > select your file > CTRL+R (run).

Answer 2

As a workaround to CSP blocking bookmarklets, you can tell your bookmarklet to load an external CSS stylesheet with your JS code injected into it. This is how my Top News Feed bookmarklet does. See my other answer.

Answer 3

I have created a work-around "fix" for this issue using a Greasemonkey userscript (in Firefox). You can now have bookmarklets on all CSP and https:// sites, plus have your bookmarklets in a nice, easily-editable library file instead of being individually squished into a bookmark.

See: http://www.donnelly-house.net/programming/js/bookmarklets/bookmarklets.php