Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting

Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting

Speakers: Leon Trampert, Sisba

Conference: NDSS Symposium

YouTube: https://www.youtube.com/watch?v=_9kWTudm52A

Overview

In "Cascading Spy Sheets," Leon Trampert from Sisba unveils a novel and potent method for user fingerprinting that leverages the intricate capabilities of modern CSS, effectively circumventing traditional JavaScript-based detection. This talk highlights how the seemingly innocuous Cascading Style Sheets, a fundamental component of web rendering, can be weaponized to extract a wealth of information about a user's browser, operating system, hardware, and even installed applications, even in environments where JavaScript execution is disabled or unavailable.

The research demonstrates that these sophisticated CSS techniques are particularly effective in contexts previously thought to be more private, such as the Tor Browser, environments with NoScript extensions, and crucially, within HTML email clients. The findings present a significant challenge to existing privacy and security paradigms, as they enable highly targeted and obfuscated phishing campaigns that can adapt their appearance based on the victim's unique fingerprint, making detection by automated systems or human analysts considerably more difficult. This work underscores the evolving landscape of client-side tracking and the need for a re-evaluation of security measures in light of CSS's often-underestimated power.

Background

▶ Watch: Introduction to CSS fingerprinting and problem statement (0:00)

Browser fingerprinting has long been a powerful technique for identifying and tracking users across different sessions, even in the absence of traditional cookies. The predominant methods for achieving this have historically relied heavily on JavaScript, utilizing its ability to query various aspects of the user's environment, such as screen resolution, installed fonts, browser plugins, and system configurations. By combining these unique attributes, a sufficiently distinct fingerprint can be constructed to re-identify individuals.

However, the reliance on JavaScript introduces significant limitations. Environments like the Tor Browser, designed for anonymity, often disable JavaScript by default or encourage its restriction. Similarly, privacy-conscious users frequently employ browser extensions like NoScript to prevent arbitrary JavaScript execution. Furthermore, a significant communication channel—email clients—often renders HTML content but explicitly disallows JavaScript for security reasons. These scenarios have traditionally been considered "JavaScript-less" zones, offering a degree of protection against advanced fingerprinting techniques.

The natural question arising from these limitations is whether fingerprinting is still possible in such contexts. The answer, as presented in this research, lies in CSS (Cascading Style Sheets). CSS is an omnipresent technology on the web, responsible for the visual presentation of HTML documents. It defines how elements are displayed, from colors and fonts to layout and responsiveness. While seemingly benign, modern CSS has evolved to include powerful features, such as dynamic calculations, conditional rules, and remote content loading, which, when combined ingeniously, can be repurposed for advanced information gathering, effectively filling the gap left by disabled JavaScript.

Key Findings

▶ Watch: Using container queries for precise width measurements (3:30)

The central discovery presented in "Cascading Spy Sheets" is that stylesheets alone can be utilized for highly advanced fingerprinting, capable of largely replicating and, in some cases, surpassing the capabilities traditionally associated with JavaScript-based methods. This finding is particularly impactful because it extends sophisticated tracking and identification to environments previously considered secure due to JavaScript restrictions.

The research meticulously details how a wide array of system, hardware, and user-specific information can be inferred solely through CSS. This includes, but is not limited to, the specific browser and operating system (and their respective versions), certain hardware characteristics (primarily screen-related, but also CPU architecture), user language settings, installed fonts (which can, in turn, reveal installed applications like Microsoft PowerPoint), and the presence of various browser plugins or extensions that modify web content.

Crucially, the study extends these capabilities to HTML email clients. Through an extensive analysis involving 21 different email clients, to each of which approximately 100 specially crafted test emails were sent and manually opened, the researchers categorized client behavior into two main types: "lenient" and "restrictive." Lenient clients, such as the Apple Mail suite, were found to permit arbitrary CSS fingerprinting, supporting almost all techniques. While restrictive clients might disable certain advanced features like container queries, almost all clients still allowed at least some fingerprinting techniques, often related to screen characteristics. The variability in feature support across different clients necessitates a tailored approach but does not eliminate the threat, confirming that email is a viable vector for sophisticated CSS-based attacks.

Technical Deep Dive

▶ Watch: Practical examples: language, OS, and font fingerprinting (4:20)

The technical ingenuity behind CSS-based fingerprinting lies in leveraging specific CSS features that allow for conditional styling and dynamic content loading, coupled with the ability to exfiltrate information by triggering remote requests.

At its core, CSS works by applying styles to elements based on selectors and properties. More advanced features include functions (like url() for remote content or calc() for dynamic calculations) and @rules, which act as conditionals. A simple example involves using @media rules to query the screen size. If a device has a width greater than 720 pixels, one remote image (e.g., large.jpg) can be fetched; otherwise, a different image (small.jpg) is loaded. By observing which image request arrives at the server, the attacker can infer the screen size.

A more sophisticated technique revolves around Container Queries, a relatively recent addition to CSS that allows styles to be applied based on the size of a parent container element, rather than the viewport. This is typically used for responsive design, enabling components to adapt their layout independently. The researchers demonstrate how container queries can be exploited for precise width measurements, which are surprisingly informative:

• Client Language Inference: Elements like the default "file picker" dialog exhibit different intrinsic widths depending on the client's language settings. For instance, the German translation for certain phrases is more verbose than English, resulting in a wider element. By setting up container queries that trigger specific remote resource loads based on these minute width differences, the client's language can be inferred.
• Browser and Operating System Distinction: Browser engines often attempt to match the native look and feel of the underlying operating system. This adaptation can lead to subtle variations in the default rendering of elements, including their widths and heights. By carefully crafting CSS to detect these platform-specific rendering quirks, attackers can distinguish between different browser-OS combinations and even their versions.
• Font Fingerprinting: Perhaps one of the most powerful applications of width measurement is font fingerprinting. Different fonts, even when rendered at the same size with the same text, occupy distinct horizontal and vertical spaces. By measuring the width of a text string rendered in a specific font (e.g., "Impact" vs. "Monzara"), an attacker can determine if that font is installed on the system. This, in turn, serves as a proxy for identifying installed applications, as many applications (e.g., Microsoft PowerPoint) ship with unique fonts that would otherwise not be present on a user's system.

Beyond width measurements, the research explores the exploitation of the calc() function, which allows for mathematical expressions within CSS property values. The surprising finding here is that floating-point arithmetic within calc() can yield different results across various browser engines, their versions, and even different hardware architectures (e.g., Intel vs. ARM). The example pi*pi+pi was shown to produce 13 on Intel-based Chrome but a different value on ARM-based Chrome. These subtle discrepancies arise from implementation differences in floating-point precision and calculation order. The researchers used fuzzing techniques to discover complex calc() expressions that exploit these corner cases, enabling precise fingerprinting of the underlying CPU architecture and browser version.

Finally, the paper details how browser plugins and extensions can be detected. Many extensions modify the content of a webpage to perform their function. For example, the Google Translate plugin operates by replacing strings in the HTML. If a page contains the term "cyber security" (13 characters wide in English), and Google Translate converts it to German ("Cybersicherheit," 15 characters wide), this change in width can be detected using CSS container queries or other layout-dependent techniques. This not only reveals the presence of the translation plugin but can also infer the target language, as different translations will result in different widths. Ad blockers and other content-modifying extensions can be detected similarly.

The collective capabilities derived from these CSS techniques allow for the compilation of a comprehensive fingerprint, encompassing system information (browser, OS, versions), hardware information (screen dimensions, architecture), user information (language, installed applications via fonts), and installed plugins. This makes CSS a formidable tool for client-side reconnaissance, even in the absence of JavaScript.

Demo / Proof of Concept

▶ Watch: calc() function exploits architecture and browser differences (5:30)

While the talk did not feature a live, interactive demo in the traditional sense, Leon Trampert outlined several compelling Proof-of-Concept (PoC) scenarios that illustrate the practical application and severe implications of CSS-based fingerprinting, especially within the context of email. The core idea is that an attacker can embed specially crafted CSS within an HTML email, which, upon rendering by the recipient's email client, triggers conditional remote resource loads, thereby exfiltrating fingerprinting data back to the attacker's server.

One primary application is the creation of obfuscated phishing emails. Imagine a phishing email designed to look innocuous to a typical security analyst or an automated email scanner. However, when rendered by the target victim's unique email client and browser environment, the CSS adjusts the email's appearance to reveal the malicious payload or a more convincing spoof. For example, the email could dynamically hide certain elements from a known security tool's fingerprint while displaying them to the actual target. This allows the attacker to evade detection while maximizing the effectiveness of their attack on the intended victim.

Another straightforward PoC is general tracking. By embedding fingerprinting CSS, an attacker can gain a wealth of information about anyone who opens their email. This could include their operating system (e.g., iOS, Windows, macOS), their specific email client (e.g., Apple Mail, Thunderbird, Gmail web interface), the browser engine it uses, and even details like their preferred language or installed applications. This data can then be used for profiling or to refine future attacks.

The most potent PoC highlighted is spear-phishing. With CSS fingerprinting, attackers can craft highly targeted emails. For instance, if an attacker wants to target individuals who use Microsoft PowerPoint (common in corporate environments), they can embed CSS that checks for PowerPoint's unique fonts. If the font is detected, the email could dynamically render a more convincing, PowerPoint-themed phishing lure. If the font is not present, a generic or less aggressive lure might be displayed, or the email might even appear completely benign, again aiding in evasion. The talk presented a simple "Bob and Alice" scenario, where Bob sends an email to Alice with embedded fingerprinting code. If an unauthorized third party (Eve) opens the email, Bob receives a notification via the fingerprint, indicating that the email has been accessed by someone other than Alice.

The feasibility of these PoCs in email clients stems from the observation that email clients are essentially "browsers without JavaScript." Whether it's a webmail client using the user's browser, a desktop client like Thunderbird shipping with its own rendering engine (e.g., Firefox's engine), or a mobile client using a webview, they all rely on a browser engine to render HTML and CSS. The critical component for exfiltration is remote content loading, which is widely supported by email clients. Even when users or clients enable "disable remote images" features, the researchers found that these often function as proxies, simply obscuring the user's IP address and user agent. Crucially, the conditional fetching of resources based on CSS rules still occurs, allowing the fingerprinting information to be transmitted to the attacker's server, albeit through a proxy. This renders many common email security mitigations ineffective against this class of attack.

Defensive Implications

▶ Watch: Detecting and identifying browser extensions and their actions (6:30)

The revelations from "Cascading Spy Sheets" present a significant challenge for privacy and security practitioners, as they expose a new, subtle, and widely applicable vector for client-side fingerprinting. Traditional defenses, largely focused on JavaScript, are insufficient against these CSS-based techniques.

For individual users, the primary implication is an increased awareness that merely disabling JavaScript or using privacy-focused browsers like Tor does not entirely eliminate the risk of being fingerprinted. While these measures remain crucial, CSS-based attacks demonstrate that even fundamental styling mechanisms can be abused. Users should be cautious about opening emails from unknown senders, as even previewing an HTML email can trigger fingerprinting. However, practical advice beyond this becomes difficult, as CSS is essential for modern web content rendering.

For email client developers and web browser vendors, the findings necessitate a re-evaluation of how CSS is parsed, rendered, and how remote content requests are handled. The current approach of proxying remote content requests, while protecting IP addresses, fails to prevent the exfiltration of fingerprinting data derived from conditional CSS. Stricter sandboxing of CSS, particularly disabling or severely restricting advanced features like container queries or complex calc() functions within email contexts, might be necessary. Furthermore, the conditional loading of url() resources based on dynamic CSS properties should be scrutinized and potentially blocked if it does not originate from a trusted domain or if it's triggered by user-specific characteristics. The varying feature sets supported by different email clients also highlight a need for standardization or a more cautious, "deny-by-default" approach to advanced CSS features in security-sensitive contexts like email.

For organizations and email security providers, the implications are substantial. Existing email security gateways and anti-phishing solutions primarily focus on detecting malicious JavaScript, suspicious links, or known phishing templates. They often lack the capability to analyze complex CSS for embedded fingerprinting logic. Security teams must now consider the sophisticated nature of obfuscated phishing that adapts its appearance based on the victim's environment, making it harder for both automated systems and human analysts to identify. Implementing advanced static and dynamic analysis of CSS within incoming emails to detect patterns indicative of fingerprinting (e.g., multiple conditional remote loads based on diverse system properties) will become increasingly important. Furthermore, user education must evolve to explain that even seemingly static or "safe" HTML emails, without any JavaScript, can still be malicious and gather information.

Ultimately, mitigating "Cascading Spy Sheets" requires a multi-layered approach involving stricter browser and email client policies regarding CSS capabilities, advanced threat detection at the gateway, and a heightened awareness among end-users.

Key Takeaways

• CSS is a Potent Fingerprinting Vector: Modern CSS features, including container queries and the calc() function, can be exploited to gather extensive information about a user's system, hardware, and software environment, comparable to JavaScript-based fingerprinting.
• Effective in JS-Restricted Environments: These CSS techniques work effectively in contexts where JavaScript is disabled, such as the Tor Browser, environments with NoScript extensions, and crucially, within HTML email clients.
• Wide Range of Identifiable Information: Attackers can infer browser and OS versions, CPU architecture, screen characteristics, client language, installed fonts (revealing installed applications like PowerPoint), and the presence of various browser plugins.
• Email Clients are Highly Vulnerable: An analysis of 21 email clients showed that while support for specific CSS features varies, most clients are susceptible to some form of CSS-based fingerprinting, with "lenient" clients (e.g., Apple Mail) allowing arbitrary techniques.
• Enables Sophisticated Attacks: This capability facilitates advanced, targeted attacks such as obfuscated phishing emails that adapt their appearance based on the victim's fingerprint, and highly effective spear-phishing campaigns tailored to specific user characteristics (e.g., installed applications).
• Current Defenses are Insufficient: Common email security measures, such as disabling remote images, are often ineffective against CSS-based exfiltration, as conditional resource fetches can still occur, albeit sometimes through proxies.

About the Speaker(s)

Leon Trampert is affiliated with Sisba, where he conducts research in the field of cybersecurity. His work, as demonstrated in "Cascading Spy Sheets," focuses on uncovering novel vulnerabilities and exploitation techniques, particularly concerning the often-overlooked complexities of web technologies like CSS in security contexts.