Article Details

Novel clickjacking attack relies on CSS and SVG. Who needs JavaScript?. Security researcher Lyra Rebane has devised a novel clickjacking attack that relies on Scalable Vector Graphics (SVG) and Cascading Style Sheets (CSS). Rebane demonstrated the technique at BSides Tallinn in October and has now published a summary of her approach. The attack, which has yet to be fully mitigated, relies on the fact that SVG filters can leak information across origins, in violation of the web's same-origin policy. Clickjacking refers to various ways of tricking the user of an application or website into taking unintended action. Also known as a user-interface redress attack, it commonly involves manipulating interface elements so that user input can be redirected for nefarious purposes. The term was coined in 2008 by security researchers Jeremiah Grossman and Robert Hansen to describe a way to hijack mouse click events so they can be applied as desired by the attacker (e.g. to make the victim click a web page submit button). Since then, various mitigations have been developed to reinforce the web's fundamental security model. These involve limiting how different origins (often in the form of web domains) can interact with one another.  As detailed by OWASP, common defenses include: preventing browsers from loading pages in a frame using X-Frame-Options or Content Security Policy (frame-ancestors) HTTP headers; preventing session cookies from being included when a page gets loaded in a frame; and using JavaScript to prevent pages from being loaded in a frame. Nonetheless, new variations keep cropping up, such as last year's cross-window forgery. Rebane discovered her attack technique after trying to replicate Apple's Liquid Glass visual distortion effect using SVG and CSS. Having succeeded in doing so, she found that her SVG/CSS recreation of the liquid glass effect, when placed in an iframe, had access to the pixels in the underlying main webpage. Rebane told The Register that people have used SVG in the past for cross-origin attacks, citing Paul Stone's Perfect Pixel Timing Attacks With HTML [PDF] and Ron Masas's The Human Side Channel attack.  "I don't think anyone else has run logic on cross-origin data the way I have," said Rebane. Rebane's post goes into detail about how she used SVG filters to create logic gates to process web page pixels using arbitrary compute functions, in order to implement a clickjacking attack that would be too complicated using other means. "By using feBlend and feComposite, we can recreate all logic gates and make SVG filters functionally complete," her post explains. "This means that we can program anything we want, as long as it is not timing-based and doesn't take up too many resources." Rebane demonstrated the application of her technique by creating a proof-of-concept attack for exfiltrating Google Docs text. The attack involves a "Generate Document" button placed on a popup interface window. When pressed, the underlying code detects the popup and presents a CAPTCHA textbox for user input. The CAPTCHA submission button adds a suggested Docs file to a hidden textbox. Screenshot of Lyra Rebane's BSides presentation on SVG clickjacking - Click to enlarge Normally, this might be blocked by setting the X-Frame-Options header. But Google Docs allows framing. Rebane said that this is relatively common for applications that need to be usable on third-party websites. "Think video embeds (YouTube, Vimeo), social media embeds, map applications, payment providers, comments, ads etc," she explained. "There are also many applications that are not intended to be frameable, but are missing the required headers to prevent that – this is often the case for API endpoints, for example." What's more, Rebane said, the attack can be run on a non-frame target using HTML injection. "There's a vulnerability class known as XSS which involves injecting HTML on websites through various means to execute malicious JavaScript," Rebane explained. "An attacker being able to inject HTML on your site used to mean immediate game over, but these days more and more sites have started using CSPs, which allow website owners to make sure that no unsafe JavaScript runs on the page, thus preventing XSS attacks." An attacker who finds such a site, said Rebane, has to figure out how to exploit the injection without using JavaScript. "CSS is the next best thing to use, and it can be used for many kinds of interesting attacks," Rebane said, arguing that CSS qualifies as a programming language. "SVG clickjacking is one of the many attacks that could be used there." SVG clickjacking doesn't dramatically change the web security landscape but it simplifies the challenge of creating complicated attack chains. Rebane says Google awarded a bug bounty of $3133.70 for reporting the vulnerability. "This attack has not been fixed, but it is also unclear at the moment whether it is a browser bug or not, and FWIW it affects other browsers too (e.g. Firefox)," she said. There are ways for developers to defended against SVG clickjacking. Rebane in her presentation cited the Intersection Observer v2 API as a way to detect when an SVG filter is covering an iframe. Google did not immediately respond to a request for comment.  A related Chromium bug posted in March that, according to Rebane, dates back to the Perfect Pixel Timing Attacks and its successors, has been marked "won't fix."