logo

Database

Javascript Client Css Injection

Description

Detects JavaScript client-side CSS injection vulnerabilities where untrusted user input can be injected into CSS/style properties. This could allow attackers to execute malicious CSS code that modifies page styling or enables CSS-based attacks.

Weakness:

008 - Reflected cross-site scripting (XSS)

Category: Unexpected Injection

Detection Strategy

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

    Detects calls to style-modifying methods (like setAttribute) with user-controlled values

    Checks if style values originate from untrusted sources like user input, URL parameters, or DOM properties

    Verifies the style property or attribute being modified allows potentially dangerous CSS values

Vulnerable code example

// Demonstrates CSS injection vulnerability
const userColor = new URLSearchParams(window.location.search).get("color");

// VULNERABLE: Direct injection of user input into CSS style attribute
document.getElementById("box").setAttribute(
  "style", 
  "background-color: " + userColor  // Attacker can inject malicious CSS
);...

✅ Secure code example

// Secure CSS handling with input validation

// Define allowlist of permitted colors
const ALLOWED_COLORS = new Set([
  'red', 'blue', 'green', 'yellow', 'black', 'white',
  '#ff0000', '#00ff00', '#0000ff', '#000000', '#ffffff'
]);
...