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'
]);
...