Committing CSS Crimes for fun and profit - Lyra Rebane

Committing CSS Crimes for fun and profit - Lyra Rebane

Speakers: Lyra Rebane, Security Researcher

Conference: Disobey

YouTube: https://www.youtube.com/watch?v=ncB7PM70-Qo

Overview

In her engaging Disobey talk, "Committing CSS Crimes for fun and profit," Lyra Rebane, also known as Ray Bane, takes the audience on a journey from playful web styling exploits to discovering high-impact security vulnerabilities. The presentation explores the often-underestimated power of CSS, demonstrating how seemingly innocuous styling capabilities can be weaponized for UI spoofing, data exfiltration, and complex clickjacking attacks. Rebane challenges the conventional view of CSS, asserting its potential as a "programming language" when wielded creatively by attackers.

The talk meticulously details several real-world vulnerabilities discovered by Rebane in prominent webmail services like Son's Webmail, Proton Mail, iCloud Mail, and Fastmail. These vulnerabilities, stemming from inadequate CSS sanitization, allowed for bypasses ranging from simple position manipulation to sophisticated regex flaws. Beyond traditional CSS injection, Rebane unveils a groundbreaking class of attacks leveraging SVG filters to execute intricate logic, detect user interactions, and even generate QR codes for data exfiltration directly within a cross-origin iframe or a JavaScript-less HTML injection context.

This article delves into the technical intricacies of these "CSS crimes" and their evolution into significant security threats. It highlights the critical importance of robust sanitization practices, comprehensive Content Security Policies (CSPs), and a deep understanding of browser rendering mechanisms to defend against these sophisticated client-side attacks. Rebane's work underscores that even seemingly visual web technologies can harbor potent attack vectors, pushing the boundaries of what's considered possible in web exploitation.

Background

▶ Watch: Introduction to CSS Crimes and Cohost (0:00)

The genesis of "CSS crimes" lies in the creative exploration of web styling capabilities on platforms like Cohost, a social media website that permitted users to apply inline HTML and CSS styling to their posts. Initially, users leveraged these features to create visually striking and interactive content, such as posts mimicking other websites, animated text, or even full-fledged interactive experiences. Examples included a functional "operating system" (Cohost 22), a point-and-click adventure game, and a top-down adventure game, all constructed purely with HTML and inline CSS.

These early "crimes" were made possible by exploiting standard HTML elements and CSS properties in unexpected ways. A key enabler was the <summary> element, which, when clicked, toggles the visibility of its associated <details> content. By styling the summary as an icon and the details as a window, coupled with position: absolute for layout control, users could create interactive UI elements. A more significant development was the discovery that position: fixed could allow elements to break out of their parent containers, even when the parent had overflow: clip or other containment properties designed to prevent such escapes. This was famously demonstrated by a fictional post where a user's logo changed to "One World Story" when viewing the post, an effect achieved by applying position: fixed to a CSS style on the logo. The fix for this particular issue involved using the contain: paint CSS property, a newer feature designed to explicitly prevent content from being drawn outside its containing block.

The transition from "fun" CSS crimes to "profit" began when Lyra Rebane recognized that these visual and interactive manipulation techniques could be applied to more sensitive contexts, particularly webmail clients. The core idea was to leverage CSS injection to alter the appearance or behavior of a legitimate website, tricking users into revealing information or performing unintended actions. This often involved bypassing the sanitization mechanisms implemented by web applications, which are designed to strip out malicious or unsafe CSS. The problem exists because many web applications, especially those displaying user-supplied content like emails, must balance functionality (allowing some styling) with security (preventing arbitrary code execution or UI manipulation). The challenge lies in creating sanitizers that are comprehensive enough to block all malicious CSS while still permitting benign styling.

Key Findings

▶ Watch: Cross-site CSS crime: 'One World Story' logo change (4:30)

Lyra Rebane's research uncovered a range of vulnerabilities, demonstrating how seemingly minor CSS features or sanitizer flaws could be leveraged for significant security impact:

1. UI Spoofing via position: fixed (Son's Webmail): By bypassing email sanitization, Rebane was able to inject CSS with position: fixed, allowing her to overlay malicious UI elements (e.g., fake download buttons, spoofed sender information) over legitimate webmail interfaces. This effectively turned a visual design flaw into a phishing vector.

1. CSS Escape Bypass for Tracker Pixels (Proton Mail, iCloud Mail): Rebane found that both Proton Mail and iCloud Mail, despite their privacy-focused claims, were vulnerable to email tracker pixel bypasses. Proton Mail's regex for sanitizing URLs in CSS background-image properties failed to account for CSS escapes containing newline characters (\A), allowing external image loads and thus IP address and browser header exfiltration. iCloud Mail exhibited a similar vulnerability where it would remove only the first URL in a background-image property, leaving subsequent malicious URLs intact.

1. Context-Aware Regex Flaws in Parser-Based Sanitizers (Fastmail): Even Fastmail, which employs a more robust parser-based CSS sanitizer, was found vulnerable. Its regex for URL removal failed to consider the context of quotes, allowing an attacker to prematurely close a legitimate URL string with a different quote type and inject arbitrary CSS. Furthermore, a subsequent fix introduced another regex flaw where it would remove URL-like strings even within CSS comments, leading to further CSS injection.

1. Selector Injection via Sanitizer Logic Flaws (Fastmail): Fastmail's parser-based sanitizer also had a subtle bug in its logic for splitting CSS selectors. A regex intended to handle escaped characters within selectors contained an index + 1 error instead of index + 2 when dealing with backslashes, allowing attackers to inject arbitrary selectors. This could potentially bypass scoping mechanisms and affect the entire page, or be used for attribute exfiltration.

1. Novel SVG Filter Attacks for Complex Clickjacking (Google Docs): Rebane introduced a entirely new class of attack leveraging SVG filters, specifically feDisplacementMap and feTile. By applying these filters to iframes, she demonstrated the ability to detect pixel color changes (e.g., on hover), recreate arbitrary logic gates within the SVG filter chain, and perform highly sophisticated, multi-step clickjacking attacks. A demo showed an attacker stealing Google Docs documents by tricking a user into navigating through a fake signup process.

1. Data Exfiltration via SVG Filters and User Interaction (Google Pay): Expanding on SVG filter capabilities, Rebane demonstrated how these filters could be used to exfiltrate small amounts of data. By generating a dynamic visual (e.g., a capture puzzle) based on sensitive data (e.g., credit card digits) directly within an SVG filter, and then having the user "solve" the puzzle by clicking on specific areas, the attacker could infer the underlying data. This was demonstrated against Google Pay's old UI to exfiltrate credit card digits.

1. Mass Data Exfiltration via QR Codes in SVG Filters: The most advanced SVG filter attack involved exfiltrating hundreds of bytes of data from a cross-origin iframe or JavaScript-less injection. This technique uses SVG filters to encode arbitrary data into Reed-Solomon error correction codes, which are then rendered as a QR code entirely within the SVG filter. The victim scans the QR code (often unknowingly, as part of a seemingly innocuous interaction), and the data is exfiltrated to an attacker-controlled website.

These findings collectively highlight the often-overlooked attack surface presented by CSS and SVG filters, demonstrating their capability to transcend mere visual manipulation and become potent tools for sophisticated client-side exploitation.

Technical Deep Dive

▶ Watch: Applying CSS crimes for profit in Son's webmail (6:20)

The technical core of Lyra Rebane's talk revolves around two main areas: sophisticated CSS injection techniques and novel attacks leveraging SVG filters.

CSS Injection and Sanitization Bypasses

The initial "CSS crimes" on platforms like Cohost highlighted the interactive power of CSS combined with specific HTML elements. The <details> and <summary> elements were instrumental. When a user clicks the <summary>, the <details> content is revealed. By applying CSS like position: absolute to the <details> content, it could be detached from the <summary> (styled as an icon), creating interactive, movable "windows" within a post. The most significant early bypass was the use of position: fixed. While platforms attempted to contain user-generated content using overflow: clip or position: relative, position: fixed elements are positioned relative to the viewport, effectively ignoring these parent container constraints. This allowed content to "break out" of a post and overlay other parts of the website, as demonstrated with the "One World Story" logo spoof. The eventual fix for this specific issue involved the contain: paint CSS property, which explicitly prevents content from rendering outside its bounding box.

The transition to "profit" involved applying these concepts to webmail clients, necessitating bypasses of their CSS sanitizers.

• Son's Webmail: This service was vulnerable to position: fixed injection, allowing Rebane to create UI spoofing attacks. By adding hover and click effects using CSS, she could craft emails that appeared legitimate but, upon interaction, would trick users into actions like downloading malicious executables or believing the email originated from a different sender. The bounty for these vulnerabilities was $1,500.

• Proton Mail: A privacy-focused webmail provider, Proton Mail aimed to block tracker pixels by sanitizing image URLs. Its sanitizer used a regex to detect and remove URLs in CSS properties like background-image. However, Rebane discovered a flaw in this regex: it only accounted for standard spaces ( ) as valid whitespace after a CSS escape sequence (\XXXXXX). According to the CSS spec, whitespace can also include newlines (\A) and tabs (\t). By injecting a newline character within a CSS escape (e.g., url(\00000ahttps://attacker.com/tracker.png)), she bypassed the regex. The browser's CSS parser correctly interpreted this as a valid URL, leading to the loading of an external image and the exfiltration of the user's IP address and browser headers. Proton Mail fixed this in three business days and awarded $200.

• iCloud Mail: Similar to Proton Mail, iCloud Mail also removed background-image URLs. However, its sanitizer had a simpler flaw: if multiple url() functions were present in a single background-image property (e.g., background-image: url(legit.png), url(malicious.png)), it would only remove the first one, leaving subsequent malicious URLs to be processed by the browser. This also led to IP and header exfiltration. Apple took seven weeks to fix this but paid a significantly higher bounty.

• Fastmail: This provider utilized a more advanced parser-based sanitizer, similar to DOMPurify for HTML. Instead of string manipulation, it parsed the CSS using the browser, then iterated through the rules, sanitizing properties and selectors.
• URL Removal Bypass: Despite being parser-based, Fastmail's URL removal still relied on a regex applied to property values. This regex failed to account for different quote types. An attacker could use a double quote to close a single-quoted URL (e.g., url('https://attacker.com/image.png") { / injected CSS / }), leading to CSS injection. A subsequent fix for this introduced a new regex flaw: it removed URL-like strings even within CSS comments, again leading to injection.
• Selector Injection: Fastmail's sanitizer aimed to scope selectors to the email content by splitting them by commas, but only outside of quotes. The logic to handle escaped characters within strings (e.g., selector[attr="value\,with\,comma"]) contained an error: it incremented the index by +1 instead of +2 after an escape character. This meant it skipped only the backslash, not the character it escaped, leading to misinterpretation of string boundaries and allowing arbitrary selector injection. This could be used to extract attributes from the DOM, although Fastmail's comprehensive Content Security Policy (CSP) (blocking external fonts and styles) prevented direct data exfiltration via @import rules. Fastmail's response was commendable, fixing the first vulnerability in 36 hours and the subsequent two in 35 hours, awarding $2,500.

Novel SVG Filter Attacks

Rebane introduced a groundbreaking new attack surface: SVG filters applied to iframes.

• Filter Application to Iframes: The discovery began when Rebane applied a "liquid glass" effect (using an feDisplacementMap SVG filter) to an iframe. Surprisingly, the filter affected the content inside the iframe, even though web security principles dictate that external elements should not influence iframe content. feDisplacementMap moves pixels based on a "displacement map" image, while feTile allows tiling of an image.

• Pixel Color Detection and Logic Gates: Rebane realized that by carefully positioning and tiling these filters, she could detect subtle pixel color changes within the iframe, such as a button darkening on hover. While this data was "inside" the SVG filter, it couldn't be directly read by JavaScript. The breakthrough was to perform the attack logic within the SVG filter itself. SVG filters, through their compositing and blending capabilities, can effectively simulate all fundamental logic gates (AND, OR, NOT). This allowed for complex conditional actions based on pixel changes.

• Complex Clickjacking (Google Docs): This capability enabled highly sophisticated clickjacking. Instead of simple overlays, the SVG filter could guide a user through multiple steps, detecting clicks and hovers at each stage, and dynamically presenting the next "legitimate" UI element. Rebane demonstrated this against Google Docs, where a user filling out a fake signup form was secretly tricked into clicking "Generate Document," then tagging and sending a personal document to the attacker. This bug earned $3,000 from Google.

• Data Exfiltration via User Input (Google Pay): For small amounts of data, SVG filters could exfiltrate information by encoding it into a visual puzzle. For example, recreating all possible two-digit combinations for a credit card, comparing them to a number on a Google Pay button (from an older UI), and then generating a specific captcha challenge based on the matching number. When the user "solved" the capture, the interaction data was sent to JavaScript, revealing the credit card digits.

• Mass Data Exfiltration with QR Codes: The ultimate SVG filter attack involves exfiltrating hundreds of bytes of data without JavaScript. The process:

1. Sensitive data from a cross-origin iframe or JavaScript-less injection is encoded into bits using SVG filters.
2. These bits are then processed using Reed-Solomon error correction algorithms, entirely within the SVG filter chain.
3. The error-corrected data is then rendered as a QR code, still within the SVG filter.
4. The user, unknowingly, scans this QR code (e.g., as part of a fake authentication flow), and the data is exfiltrated to an attacker-controlled website via the QR code's embedded URL. This demonstrates a novel, offline-capable, and JavaScript-less method for exfiltrating significant amounts of data.

These SVG filter attacks represent a paradigm shift, proving that even visual rendering pipelines can be repurposed to execute complex logic and bypass traditional security boundaries.

Demo / Proof of Concept

▶ Watch: Attempting to bypass Proton Mail's email tracker blocker (8:05)

Lyra Rebane showcased a compelling series of demonstrations, illustrating the progression from aesthetic "CSS crimes" to high-impact security vulnerabilities.

The initial examples on Cohost highlighted the creative power of inline CSS. Viewers saw interactive posts mimicking a desktop operating system (Cohost 22) where icons could be clicked to reveal "windows," a point-and-click adventure game with inventory management, and a top-down adventure game—all purely functional within a social media post using details and summary elements styled with CSS. The "One World Story" demonstration visually proved the position: fixed bypass, where a post's CSS could change the website's main logo, illustrating how content could break out of its intended container.

Moving into the "profit" phase, Rebane demonstrated the Son's Webmail UI spoofing. An email, when opened, caused the legitimate webmail logo to change to "One World Story" (similar to the Cohost example), and presented a fake UI with interactive hover and click effects, designed to trick users into downloading an .exe file or believing the email came from a different sender.

For the Proton Mail and iCloud Mail vulnerabilities, the demo showed a malicious background-image URL payload in an email. Upon opening, the external image was immediately loaded, with the request originating from the attacker's IP address (not the webmail provider's proxy), confirming the successful bypass of tracker pixel blocking.

The Fastmail CSS injection was dramatically illustrated by a simulated file theft scenario. An email, when opened, displayed a series of "next" buttons. Unbeknownst to the user, clicking "next" secretly triggered clicks on the legitimate "reply," "attach file," "pick a file," and "send" buttons in the background, ultimately exfiltrating files to the attacker. This showcased the power of CSS injection to manipulate the DOM and user interactions.

The SVG filter attacks were particularly impactful. For Google Docs, Rebane presented a fake signup page for an AI tool. The user clicked "next" through several steps, including typing a CAPTCHA in a fully functional text box. The "submit" button, however, secretly triggered a complex clickjacking sequence orchestrated by the SVG filter, resulting in the user's Google Docs document being stolen. A debug visualization revealed the underlying clicks on "generate document" and "tagging a document" within the actual Google Docs interface.

The Google Pay exfiltration demo involved a psychedelic CAPTCHA. The user was instructed to click on "dogs" within the CAPTCHA. Secretly, the SVG filter had encoded credit card digits (from the older Google Pay button UI) into the CAPTCHA, and the user's clicks, when sent to JavaScript, revealed these digits to the attacker.

Finally, Rebane presented the ultimate SVG filter demo: QR code data exfiltration. This complex proof-of-concept showed data being transformed into bits, then into Reed-Solomon error correction codes, and finally rendered as a fully functional QR code, all within an SVG filter. The implication was clear: a user scanning this seemingly innocuous QR code would unknowingly exfiltrate sensitive data from a cross-origin iframe or a JavaScript-less injection.

These demonstrations, ranging from visual mischief to sophisticated data theft, powerfully underscored the often-underestimated attack surface presented by CSS and SVG filters.

Defensive Implications

▶ Watch: Analyzing Proton Mail's CSS sanitization regex (9:00)

Lyra Rebane's talk provides crucial insights for web defenders, emphasizing that robust security requires a deep understanding of browser rendering and parsing, not just traditional scripting vulnerabilities.

1. Abandon String-Based Sanitization for Complex Content: The failures of Proton Mail and iCloud Mail's string-based (regex-driven) sanitizers highlight their inherent fragility. Regexes are often context-unaware and struggle with the nuances of CSS syntax, including various whitespace characters, escape sequences, and quote handling. For any application that allows user-supplied CSS, especially in security-sensitive contexts like webmail, string-based sanitizers are insufficient and prone to bypasses.

1. Adopt Robust Parser-Based Sanitizers: Fastmail's approach of using a parser-based sanitizer, conceptually similar to DOMPurify for HTML, is the recommended path. This involves allowing the browser to parse the CSS into an Abstract Syntax Tree (AST) or a CSS Object Model (CSSOM), then iterating through the parsed rules to identify and remove unsafe properties, selectors, and at-rules. While even parser-based sanitizers can have subtle logic flaws (as seen with Fastmail's regex for URLs and selector splitting logic), they offer a significantly stronger foundation than string manipulation. Developers should prioritize using well-vetted, open-source CSS sanitization libraries where available.

1. Implement Comprehensive Content Security Policies (CSPs): Fastmail's strong CSP, which blocked external fonts and styles, was crucial in mitigating the impact of its CSS injection vulnerabilities, preventing direct data exfiltration via @import rules. CSPs are a critical layer of defense against client-side injection attacks. They should be configured to restrict external resource loading (images, scripts, styles, fonts), frame-ancestors, and plugin types. Specifically, a CSP preventing img-src 'self', style-src 'self', and font-src 'self' would block many of the tracker pixel and @import exfiltration methods demonstrated.

1. Be Wary of position: fixed and contain: paint: Developers creating user-generated content platforms must understand the implications of position: fixed for UI spoofing. While overflow: hidden or clip are often used for containment, position: fixed bypasses these. The contain: paint CSS property is a more effective solution for preventing content from rendering outside its bounding box, but it requires careful implementation and browser support considerations.

1. Understand the Security Implications of SVG Filters: The most significant defensive implication is the emergence of SVG filters as a potent attack vector. Developers must acknowledge that these filters can perform complex logic, detect pixel changes, and facilitate advanced clickjacking and data exfiltration, even from cross-origin iframes.

• Isolate User-Generated SVGs: If an application allows user-generated SVG content, strict sanitization is required, particularly for <filter> elements and their sub-elements (feDisplacementMap, feTile, etc.).
• Review Iframe Policies: The ability of SVG filters to affect iframe content challenges traditional iframe isolation assumptions. While the browser's Same-Origin Policy still holds, visual manipulation and pixel-level interaction detection can create new attack pathways. Developers should consider sandbox attributes for iframes to further restrict their capabilities.
• Monitor for Novel Attack Techniques: The QR code exfiltration using Reed-Solomon error correction entirely within SVG filters demonstrates a highly novel and complex attack. Defenders need to stay abreast of research into obscure browser features and their potential for exploitation.

1. Thorough Regex Review and Testing: As demonstrated by Proton Mail and Fastmail, even carefully crafted regexes can have subtle flaws. Regexes used in security contexts must be rigorously reviewed, ideally by multiple experts, and tested against a wide range of edge cases, including all valid CSS escape sequences, different whitespace characters, and quote variations.

In summary, defending against "CSS crimes" requires moving beyond basic HTML sanitization to a holistic approach that includes robust parser-based CSS sanitization, a strong CSP, careful consideration of CSS layout properties, and an awareness of the powerful, often-overlooked capabilities of SVG filters.

Key Takeaways

• CSS is a powerful, often underestimated, attack surface: Beyond visual styling, CSS and HTML elements like details/summary can enable complex interactive UI manipulation, leading to UI spoofing and phishing attacks.
• String-based CSS sanitization is inherently flawed: Regex-based sanitizers are easily bypassed by subtle variations in CSS syntax, such as newline characters in escape sequences or context-unaware quote handling, making them inadequate for security-sensitive applications like webmail.
• Parser-based sanitizers are superior but not foolproof: While more robust, even parser-based sanitizers can contain logic flaws (e.g., incorrect index handling in selector parsing) or rely on regexes that miss edge cases, requiring continuous vigilance and thorough testing.
• SVG filters introduce a novel and potent attack vector: SVG filters can execute complex logic, detect pixel-level changes, and facilitate advanced clickjacking and data exfiltration (even via QR codes) from cross-origin iframes or JavaScript-less injection contexts, challenging traditional security assumptions.
• Comprehensive Content Security Policies (CSPs) are crucial: A strong CSP that restricts external resource loading (images, styles, fonts) is an essential defense layer, capable of mitigating the impact of many CSS injection and SVG filter exfiltration techniques.
• Stay informed about obscure browser features and their security implications: Attackers will continue to find creative ways to weaponize seemingly innocuous or niche browser features. Defenders must keep up with research and understand the full capabilities and potential misuse of web technologies.

About the Speaker(s)

Lyra Rebane, who also goes by the alias Ray Bane, is a security researcher with a passion for exploring the intricacies of the web and web browsers. Her work focuses on identifying vulnerabilities and pushing the boundaries of what's considered possible in web exploitation. Rebane's presentations, including this talk, often highlight her unique ability to transform creative web development techniques, like "CSS crimes," into impactful security findings. She is known for her in-depth technical analysis and her successful discovery and responsible disclosure of vulnerabilities in major platforms, earning her recognition and bounties from companies like Google, Proton Mail, iCloud Mail, and Fastmail.