Blog | G5 Cyber Security

HTML/CSS Browser Exploits: A Simple Guide

G5 Cyber Security

TL;DR

This guide shows how attackers can use clever HTML and CSS to trick your browser into doing things it shouldn’t, even without JavaScript. We’ll cover common techniques and how to protect yourself.

Understanding the Threat

Historically, browser exploits relied heavily on JavaScript vulnerabilities. However, attackers have found ways to exploit weaknesses in how browsers interpret HTML and CSS. These attacks are often called ‘render-based’ or ‘layout-based’ attacks because they manipulate the way a webpage is displayed.

Common Exploitation Techniques

  1. CSS Injection: An attacker injects malicious CSS into your page (e.g., through a compromised server, forum post, or user input field). This CSS can alter the appearance and behaviour of elements.
    • Example: Changing the visibility of important buttons or forms to hide them from the user.
  2. Property Manipulation: Exploiting how browsers handle specific CSS properties, especially those related to layout and positioning.
    • Example: Using position: absolute combined with negative margins to move elements outside of their intended containers.
  3. Timing Attacks: Exploiting differences in rendering speed between browsers or even on the same browser based on hardware.
    • Example: Measuring how long it takes for a specific element to render, which can reveal information about the underlying system.
  4. Overflow Exploits: Using CSS properties like width and height to create overflows that can affect adjacent elements.
    • Example: Creating an overflow that pushes a button into an unintended location, potentially triggering a malicious action.
  5. Font Exploits: Using specially crafted fonts (e.g., OpenType features) to execute arbitrary code.
    • Example: Embedding a font file containing malicious instructions that are executed when the font is loaded and rendered.

How Attacks Work – A Simple Example

Let’s look at a simplified example of CSS injection. Imagine a website with a login form:

<form id="login-form" action="/login" method="post">
  Username: <input type="text" name="username"> 
  Password: <input type="password" name="password"> 
  <button type="submit">Login</button>
</form>

An attacker could inject the following CSS:

#login-form button { display: none !important; }

This would hide the login button, preventing users from submitting the form. While simple, this demonstrates how easily malicious CSS can disrupt a webpage.

Protecting Yourself

  1. Content Security Policy (CSP): Implement a strong CSP to control which resources your website is allowed to load.
    • Example: Restricting the sources of CSS files.
    • Content-Security-Policy: default-src 'self'

      This allows only resources from the same domain as the webpage itself.

  2. Input Validation and Sanitization: Carefully validate and sanitize all user input to prevent CSS injection.
    • Example: Removing or escaping potentially malicious characters from user-provided strings before displaying them on the page.
  3. Subresource Integrity (SRI): Use SRI to verify that external resources (like CSS files) haven’t been tampered with.
    • Example: Adding a hash attribute to your <link> tag.
    • <link rel="stylesheet" href="style.css" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous">
  4. Regularly Update Your Browser: Keep your browser up to date with the latest security patches.
  5. Use a Security Scanner: Employ automated tools to scan your website for vulnerabilities, including CSS injection flaws.
  6. Limit User-Provided Stylesheets: Avoid allowing users to upload or specify custom stylesheets unless absolutely necessary. If you must allow them, apply strict CSP rules and sanitization.

Further Resources

Exit mobile version