Moderne SVG-Clickjacking-Angriffe zum Täuschen von Nutzern und Umgehen von Warnhinweisen

• Eine neue auf SVG-Filtern basierende Clickjacking-Methode wurde vorgestellt und erweitert den bisherigen einfachen Clickjacking-Angriff zu komplexen interaktiven Angriffen.
• Es wurde bestätigt, dass SVG-Filterelemente wie feColorMatrix und feDisplacementMap auch auf Cross-Origin-iframes anwendbar sind, wodurch visuelle Manipulationen und Datenextraktion möglich werden.
• Mit Filterkombinationen sind Pixellesen, logische Operationen und bedingte UI-Steuerung möglich, wodurch mehrstufige Clickjacking- oder Eingabeaufforderungsangriffe umgesetzt werden können.
• Als reales Beispiel wurde ein Angriff über eine Google-Docs-Schwachstelle erfolgreich ausgeführt; der Forscher erhielt von Google VRP eine Belohnung von $3133.70.
• Diese Technik zeigt eine neue Angriffsfläche im Browser-Sicherheitsmodell auf und beweist, dass die logische Nutzung von SVG-Filtern zu einer Sicherheitsbedrohung werden kann.

---

Überblick über SVG-Clickjacking

• Klassisches Clickjacking ist ein einfaches Angriffsmuster, bei dem ein iframe überlagert wird, damit Nutzer unbeabsichtigt klicken.
• Das neue SVG-Clickjacking macht durch den Einsatz von SVG-Filtern komplexe Interaktionen und Datenabfluss möglich.
• Filter wie feColorMatrix und feDisplacementMap sind auf Cross-Origin-Dokumente anwendbar, sodass externer Inhalt visuell manipuliert werden kann.

Komponenten von SVG-Filtern

• Zu den zentralen Filterelementen gehören <feImage>, <feFlood>, <feOffset>, <feDisplacementMap>, <feGaussianBlur>, <feTile>, <feMorphology>, <feBlend>, <feComposite> und <feColorMatrix>.
• Sie kombinieren und transformieren Eingabebilder, um neue Bilder zu erzeugen und können als Kette verknüpft werden.
• Durch solche Kombinationen kann ein Angreifer visuelle Effekte, Maskierung und Farbanpassungen flexibel umsetzen.

Angriffsbeispiele

• Fake Captcha: Mit feDisplacementMap wird Text verzerrt, um Nutzer zur Eingabe sensibler Codes zu verleiten.
• Grey-Text-Hiding: feComposite und feMorphology entfernen Hinweise oder Fehlermeldungen in Eingabefeldern, damit Nutzer ein vom Angreifer vorgegebenes Passwort eingeben.
• Pixel Reading: Durch das Erkennen der Farbe bestimmter Pixel kann das Filterverhalten gesteuert werden; so werden dynamische reaktive Angriffe wie Erkennung von Button-Klicks, Hover-Status oder Eingabestatus realisiert.

Logische Operationen und kombinierte Angriffe

• Durch Kombination von feBlend und feComposite sind **AND-, OR-, XOR- und NOT-**Logikgatter implementierbar.
• So kann innerhalb der SVG-Filter eine vollständige Logikschaltung aufgebaut werden, wodurch mehrstufige Clickjacking-Szenarien automatisiert werden können.
• Im Beispiel des Securify-App-Angriffs wurde ein Ablauf umgesetzt, der das Öffnen von Dialogen, das Anklicken von Checkboxen und das Klicken auf Buttons durch mehrere Logikschritte hinweg steuert, um Nutzer zu täuschen.

Konkreter Fall: Google Docs-Schwachstelle

• Bei Google Docs wurde nach dem Klick auf „Generate Document“ das erscheinende Popup und das Eingabefeld durch SVG-Filter-basierte Logik erkannt und manipuliert.
• Fokusstatus des Eingabefelds, grauer Text und Ladebildschirme wurden in Echtzeit erkannt, um den Angriffsfluss zu steuern.
• Dieser Angriff wurde an Google gemeldet und mit einer Bug Bounty von $3133.70 belohnt.

QR-Code-Anwendungen

• Innerhalb von SVG-Filtern kann QR-Code-Generierung implementiert werden, sodass Pixeldaten in eine URL kodiert und als QR-Code ausgegeben werden.
• Wird der QR-Code gescannt, werden Daten an einen vom Angreifer kontrollierten Server übertragen.
• Mit feDisplacementMap und der Reed–Solomon-Fehlerkorrektur werden scannbare QR-Codes erzeugt.

Zusätzliche Angriffsmöglichkeiten

• Textlesen, click-basierter Datenabfluss, Einfügen eines Fake-Mauszeigers und weitere missbräuchliche Anwendungen sind möglich.
• Angriffe lassen sich auch ohne JavaScript nur mit CSS/SVG realisieren, wodurch eine Umgehung von CSP denkbar ist.

Wissenschaftliche Bedeutung

• Logikbasierte Clickjacking-Techniken mit SVG-Filtern sind ein neuer Angrifftyp, der in früheren Arbeiten nicht behandelt wurde.
• Frühere Forschungen erwähnten SVG nur als reines visuelles Maskierungsmittel; diese Studie zeigt jedoch logische Ausführung und Interaktionssteuerung.
• Der Forscher stellt dies als neue Schwachstellenklasse vor und betont, dass das Browser-Sicherheitsmodell neu bewertet werden muss.

Abschluss

• Diese Arbeit wird als erster Sicherheitsangriff eingestuft, der SVG-Filter wie eine Programmiersprache nutzt.
• Der Autor plant Präsentationen zu diesem Thema Ende 2025 auf 39c3 und Disobey 2026.
• Der Beitrag wurde mit nur 42kB HTML/CSS/SVG ohne Bilder oder JS erstellt und demonstriert die Kreativität experimenteller Sicherheitsforschung.

[GN⁺]

Hacker-News-Kommentare

• Wenn Entwickler den X-Frame-Options-Header korrekt setzen, lässt sich dieses Problem beheben
  Aber realistisch gesehen wird man wohl eher Sicherheitsprobleme jagen, indem man im Browser die Hälfte der SVG-Spezifikation entfernt

  • Vollständig gelöst ist es nicht. Einige Anwendungen, z. B. Google Docs, benötigen Framing
    Außerdem ist ein solcher Angriff auch auf Websites möglich, die statt Framing HTML-Injection erlauben
  • In SVG gibt es zu viele Sicherheitsminen. Vor allem bei nicht vertrauenswürdigen SVGs, etwa von Nutzern bereitgestellten, ist es am einfachsten, sie einfach zu deaktivieren

• Ich habe SVG aus Sicherheitsgründen bereits deaktiviert
  Inzwischen frage ich mich allerdings, ob man nicht sogar CSS deaktivieren sollte
  Es wäre schön gewesen, wenn CSS bei der reinen Textgestaltung geblieben wäre, aber inzwischen hat es sich in eine Art Programmiersprache verwandelt, die Hacker oder Werbetreibende leicht missbrauchen können

  • Ich kann dem „Es wäre schön gewesen, wenn CSS einfach geblieben wäre“ zustimmen, aber tatsächlich waren solche Angriffe Ende der 2000er viel leichter möglich
    Heute ist das fast unmöglich
  • Ich denke, statt den Browser zur Härtung kaputtzumachen, ist es besser, sensible Daten selbst außerhalb des Browsers zu halten
  • Der Kern des Problems ist nicht CSS, sondern das iFrame. Es ist seit den Anfängen des Browsers eine Quelle fortlaufender Sicherheitslücken
  • Ich frage mich, ob es außer dieser Demo noch andere Sicherheitsgründe gibt. Auf den meisten Plattformen funktioniert dieser Angriff nicht
  • Das ist eine überzogene Reaktion. Die Wahrscheinlichkeit, auf einen solchen Angriff hereinzufallen, ist sehr gering, und Sandboxing oder Session-Cookies lassen sich damit auch nicht aushebeln

• Beim Beispiel „Erkennen, ob ein Pixel reines Schwarz ist, um den Filter ein- oder auszuschalten“ war ich völlig verwirrt
  Ich verstehe nicht, warum HTML/CSS so komplex geworden ist
  Es gibt ein verstecktes <checkbox> und ein <label>; beim Klicken wird die Checkbox umgeschaltet, und nur mit CSS ändert sich der Stil je nach Zustand
  Das SVG zeichnet tatsächlich gar nichts, sondern definiert nur Filter
  Dass sogar zwei <feTile> verwendet werden, um den Kachelbereich und den Ausgabebereich getrennt zu definieren, wirkt ebenfalls seltsam
  Und was sind überhaupt Elemente wie <fake-frame> oder <art-frame>?

  • Ich finde diese Struktur eigentlich ziemlich cool. Damit kann man interaktive Inhalte ohne JavaScript erstellen
    Dass beim Klick auf ein <label> die Checkbox umgeschaltet wird, ist Standardverhalten von HTML
    Mit dem CSS-Selektor :has() wird der Zustand erkannt
    <feTile> ist ein einzelnes Filterelement, das zum Kacheln oder Zuschneiden eines Eingabebilds verwendet wird
    <fake-frame> und <art-frame> sind selbst definierte Custom Elements
    Ich habe das Thema in einem Blogbeitrag zusammengefasst
  • Tatsächlich sind die meisten dieser Funktionen weniger „modern“ als vielmehr seit den 90ern vorhanden
    Dass beim Klick auf ein <label> der Fokus wechselt, folgt der Tradition von Desktop-UIs
    Auch das Ändern des Stils je nach Checkbox-Zustand gab es schon zu Firefox-1-Zeiten
    SVG-Filter direkt in HTML einzubetten ist ebenfalls eine alte Funktion
    Das ist also weniger ein Problem von neuem HTML als vielmehr eine Kombination alter Funktionen

• Diese Demo hat mich an frühere Flash-Player-Hacks erinnert
  Das ist ähnlich wie damals, als Nutzer dazu verleitet wurden, Systemspeicher freizugeben
  Vektorgrafiken wirken wirklich wie etwas, das sich selbst nicht im Griff hat

• Der SVG adder ist wie ein Kunstwerk. Wirklich großartig

  • Das war eine sehr starke Demo. Ich habe heute zum ersten Mal gelernt, dass für Turing-Vollständigkeit nicht bloß funktionale Vollständigkeit reicht, sondern auch Speicher und wahlfreier Zugriff nötig sind
    Dazu habe ich auf einen Stack-Overflow-Beitrag verwiesen

• In meinem Android-Chrome, genauer gesagt im Kiwi-Browser, wirkt die Anzeige wegen des Dark Mode kaputt oder seltsam dargestellt
  Ich frage mich, ob andere dasselbe beobachten

  • In Firefox musste ich Dark Reader deaktivieren, damit das Beispiel korrekt angezeigt wurde
  • Wenn der Zoom nicht auf 100 % steht, ist das QR-Beispiel kaputt

• Dieser Artikel hat mich an die frühere CSS-Rechendemonstration erinnert

• Wirklich beeindruckende Arbeit. Ich weiß nicht, wie man das beheben sollte, aber das muss bald gefixt werden

• Das war ein großartiger Post. Ich hatte beim Lesen durchgehend Spaß