Description

Client-Side CSS Injection occurs when untrusted user input is used to manipulate CSS style properties or methods in JavaScript, potentially leading to visual defacement or information theft through malicious style injection. This vulnerability can allow attackers to override existing styles or inject malicious CSS that affects the page's appearance and behavior.

Detection Strategy

• Identifies direct assignments to element.style properties where the value comes from user-controllable input

• Detects calls to CSS manipulation methods (like setAttribute) when used with style-related attributes and user-controlled values

• Checks for unsafe expressions or values being used in style property assignments

• Validates if the style-related properties or methods are being manipulated with data that could originate from user input

• Examines both direct style property access and method-based style modifications for potential injection points

Vulnerable code example

const box = document.getElementById("box");

// VULNERABLE: Direct injection of user input into style attribute
box?.setAttribute(
    "style",
    "background-color: " + (new URLSearchParams(window.location.search).get("color") ?? "")
); // Allows CSS injection via URL parameter

✅ Secure code example

const box = document.getElementById("box");
const params = new URLSearchParams(window.location.search);

// SECURE: Define allowlist of permitted colors to prevent CSS injection
const allowedColors = ["red", "blue", "green", "yellow", "black", "white"];
const userColor = params.get("color");

if (box && userColor && allowedColors.includes(userColor)) {...