Tampermonkey: Bypassing CSP on Github?

[SonOfDiablo]

I'm trying to write a simple script that will replace elements on Github pages.

Expected Behavior

The element I target would be replaced and the JavaScript I'm trying to inject would be executed.

Actual Behavior

Getting a Refused to load the script...because it violates the following Content Security Policy directive error message in the console.

Full error message

Refused to load the script 'https://asciinema.org/a/14.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Specifications

• Chromium: 79.0.3945.130
• TM: 4.9
• OS: Windows 10 Home Verson: 1909 Build: 18363

Script

// ==UserScript==
// @name         Asciinema Embedder
// @namespace    SOD-Scripts
// @version      0.1
// @description  Replaces image links to asciinema with an embedded player.
// @author       Son_Of_Diablo
// @match        https://github.com/*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const IMAGES = document.querySelectorAll('article.markdown-body img');

    for (const image of IMAGES) {
        if (!(image.hasAttribute('data-canonical-src'))) {
            continue;
        }

        const imageSrc = new URL(image.dataset.canonicalSrc);

        if (imageSrc.hostname !== 'asciinema.org') {
            continue;
        }

        const imageAnchorEl = image.parentNode;
        const castId = imageSrc.pathname.split('/a/')[1].split('.')[0];

        const playerScript = document.createElement('script');
        playerScript.setAttribute('src', "https://asciinema.org/a/14.js");
        playerScript.setAttribute('id', "asciicast-14");
        playerScript.setAttribute('async', true);

        imageAnchorEl.parentNode.replaceChild(playerScript, imageAnchorEl);
    }
})();

Tested in this repo: https://github.com/mingrammer/awesome-finder

[Owyn]

same on google images

btw, it doesn't happen without https everywhere in strict https only mode

Firefox: 73.0.1 (64bit)
TM: v4.10.6105
OS: Windows 10 Home Verson: 1903 Build: 18363

[SonOfDiablo]

@Owyn I just tried installing HTTPS Everywhere and it didn't change anything.
Might be a difference between Chrome and Firefox? or the fact that you are using another version of TM than me. The Chrome version is still at 4.9

[Owyn]

Perhaps Firefox with HTTPS Everywhere behaves like Chrome without it cuz Chrome already has its functionality or something 🤔

[derjanb]

@SonOfDiablo TM BETA 4.10.6112 adds a new experimental API called GM_addScript, which can be used this way:

// @grant GM_addScript
[...]
let script_tag = GM_addScript('alert("works!");');

@Owyn
I'm linking the HTTPS Everywhere issue for reference: https://github.com/EFForg/https-everywhere/issues/19008

[Owyn]

We could already do GM_addScript functionality before via adding <script> element into the page (same as with GM_AddStyle)

Plus won't that bring many troubles for the script including being unable to execute GM_ functions from the scope of the page?

but anyway... since scripts don't run at all due to CSP - neither will GM_addScript get the chance to ever run, no?

From testing - CSP issue isn't there after you just install TamperMonkey for the first time without restarting the browser and appears only after you restart the firefox, maybe investigating this could help fix it?

[SonOfDiablo]

GM_addScript seems to just exactly as is described which is wonderful!
Thank you @derjanb for the heads up ^^

Though, I'm now running into the exact same CSP issue when trying to inject an iFrame.
Refused to frame 'https://asciinema.org/' because it violates the following Content Security Policy directive: "frame-src render.githubusercontent.com".

Is there already functionality for this in Tampermonkey or would that need to be added as well? (If you are interested in having that functionality of course)

[Owyn]

TM just got updated and I saw this fix in the changelist... and as I've thought there is just no chance to run GM_addScript or any other script code (even console.log) because of CSP

but right after TM new version got installed - it was working fine untill I restarted the browser

[SonOfDiablo]

Works fine for me, even after browser restart.
@Owyn Is the github page you are testing on the first page that opens when you start your browser? Maybe there is some kind of race condition?

[Owyn]

@SonOfDiablo I'm on Firefox, you're on Chromium
Perhaps our situations are a bit different. But I've tested it on this page and all others including google images and navigating github for a while.

[derjanb]

Though, I'm now running into the exact same CSP issue when trying to inject an iFrame.

Maybe GM_addElement would be a more generic solution. 🤔

[Owyn]

some more info: quickly disabling and enabling TM on Firefox's extension page makes it possible to run TM & scripts on github and other CSP sites (until browser restart as always), so no need to reinstall anything to reproduce this short-lived "fix"

[prenagha]

Would be great to get the Safari Mac App Store version updated with this feature. Thanks @derjanb

[derjanb]

GM_addElement is part of TM BETA 4.11.6113.

Usage:

GM_addElement('script', { textContent: 'window.foo = "bar";' });

or

GM_addElement(shadowDOM, 'style', { textContent: 'div { color: black; };' });

[Owyn]

v6114 seems to have fixed CSP things quite a bit but... issue with https everywhere extension not allowing TM to run on CSP sites is still there

[strafe]

@derjanb will this be a workaround to #296 as well?

[derjanb]

@derjanb will this be a workaround to #296 as well?

Unfortunately, no.