Full Report
Clickjacking is a classic attack in which an iframe is embedded within another website's content, transparently, to trick the user into interacting with that website. This article describes a variant of it they are dubbing SVG clickjacking. They drew inspiration for this from Apple's liquid glass design. Being a CSS, HTML, and SVG wizard, they also got it working in SVGs. They were surprised this worked on SVGs on top of an iframe; this was done via using feColorMatrix and feDisplacementMap. to change the color/location of pixels. There are many SVG elements with the typing. They take in one or more input images, apply operations to them, and output a new image. Some can load an image file. Others can move stuff around. Others can move pixels, blur, crop, expand, blend, and more. With this, it's a great list of utilities to make clickjacking more viable. Their first example was inline a "secret code" from another website and turning it into a captcha via the feDisplacementMap flag to add blur. You ask the user to type in the code, and it looks somewhat realistic as a CAPTCHA. This isn't very useful because secret code pages like this shouldn't be iframable anyway. The following strategy is around grey text hiding. Sometimes, there are textboxes with information that needs to be inputted. By using tricks with SVGs, the text box can be reskinned. For instance, instead of saying "set a new password," it can now say "enter your email". This is very confusing but still requires user interaction in order to do. SVGs are Turing-complete if you get tricky with them based on the data. In practice, this means you can read pixels from the iframe to perform actions on it. Now, the SVG has this data and not the web page itself. This really means interactive, responsive clickjacking. They used this attack on Google Docs to link content with many steps. This would have been impossible before this technique. They have a quote that I find interesting at the end: "I don’t think me discovering this technique was just luck though. I have a history of seeing things such as CSS as programming languages to exploit and be creative with. It wasn’t a stretch for me to see SVG filters as a programming language either. That, and my overlap between security research and creative projects - I often blur the lines between the two, which is what Antonymph was born out of." They were experts in CSS and SVG prior to this. They had exploited client-side bugs in the past. With all of this knowledge in their head, this research was bound to be figured out by them at some point. I agree with their statement: it wasn't luck; it was a history of dedication that led them to this point. Great article!
Analysis Summary
# Tool/Technique: SVG Clickjacking
## Overview
SVG Clickjacking is a sophisticated evolution of the traditional clickjacking attack. While classic clickjacking relies on transparent iframes to trick users into clicking hidden buttons, SVG Clickjacking leverages SVG filters (applied via CSS `backdrop-filter` or SVG `<filter>` elements) to programmatically manipulate, mask, and "read" the visual content of a cross-origin iframe. This allows an attacker to create interactive, responsive overlays that change based on the state of the target website, effectively bypassing some of the limitations of static clickjacking.
## Technical Details
- **Type:** Technique (Client-Side Exploitation)
- **Platform:** Web Browsers (Targeting Chromium, Firefox; partially Safari)
- **Capabilities:** Pixel manipulation, automated UI reskinning, responsive "CAPTCHA" generation, and logic-based UI triggers.
- **First Seen:** Publicly detailed December 2024 / January 2025.
## MITRE ATT&CK Mapping
- **[TA0001 - Initial Access]**
- **[T1189 - Drive-by Compromise]**
- **[TA0007 - Discovery]**
- **[T1213 - Data from Information Repositories]** (In the context of extracting visual data via UI manipulation)
- **[TA0011 - Command and Control]**
- **[T1204.001 - User Execution: Malicious Link]**
## Functionality
### Core Capabilities
* **Visual Transformation:** Uses `feColorMatrix` and `feDisplacementMap` to move and recolor pixels from a cross-origin iframe without violating the Same-Origin Policy (SOP).
* **Dynamic Reskinning:** Masking original text (e.g., "Set a New Password") and replacing it with attacker-controlled text (e.g., "Enter Your Email") while maintaining the underlying interactive input field.
* **Pseudo-OCR/CAPTCHA:** Isynchronizing specific "secret" text from an iframe and applying blur/distortion to present it as a CAPTCHA, tricking the user into re-typing sensitive information into an attacker-controlled field.
### Advanced Features
* **Turing-Completeness:** By chaining SVG filter elements (`feComposite`, `feBlend`, `feMorphology`), the researcher demonstrated that SVGs can perform logic operations (OR, AND, XOR) on pixel data.
* **Interactive Response:** The attack can "read" pixels to determine the state of the iframe (e.g., if a checkbox is checked) and update the overlay in real-time.
* **Multi-Step Exploitation:** Used to automate complex interactions, such as linking Google Docs content through a series of automated "clicks" disguised as a game or a different interface.
## Indicators of Compromise
* **File Names:** Usage of `.svg` files with unusually complex `<filter>` definitions.
* **Behavioral Indicators:**
* Webpages containing iframes with `pointer-events: none` applied to the overlay.
* Heavy use of CSS `backdrop-filter: url(#id)` targeting cross-origin frames.
* Significant client-side CPU usage during page idle (due to the constant-time rendering of complex SVG filters).
## Associated Threat Actors
* **Independent Researchers:** Primarily documented by Lyra Rebane (researcher). No known active exploitation by APT groups is currently public, though it follows patterns seen in advanced phishing kits.
## Detection Methods
* **Signature-based:** Detect the specific use of `feDisplacementMap` or `feColorMatrix` in conjunction with `backdrop-filter` inside web application firewalls or browser security extensions.
* **Behavioral:** Monitor for high-frequency rendering of complex SVG filters over cross-origin elements.
* **Heuristics:** Identifying iframes that are excessively manipulated by CSS filters that shift pixel coordinates (displacement) or swap color channels.
## Mitigation Strategies
* **Content Security Policy (CSP):** Implement `frame-ancestors 'none'` or `'self'` to prevent the site from being embedded in an iframe.
* **X-Frame-Options:** Set headers to `DENY` or `SAMEORIGIN`.
* **Clear UI Design:** Use the `Samesite=Lax` or `Strict` attribute on cookies to ensure session-authenticated actions cannot be easily triggered via an external iframe.
* **Browser-Level Fix:** Browser vendors are investigating restricting the application of certain SVG filters (like `feDisplacementMap`) to cross-origin content within `backdrop-filter`.
## Related Tools/Techniques
* **Classic Clickjacking:** The foundational technique.
* **CSS Stepping/Exfiltration:** Using CSS selectors to exfiltrate data.
* **Antonymph:** The creative project/framework from which this technique was born.