XSS (Cross-Site Scripting) in Vibe Coded Apps

What is Cross-Site Scripting (XSS)?

Cross-Site Scripting (XSS) is a vulnerability where attackers inject malicious JavaScript into web pages viewed by other users. When a user visits the page, the script runs in their browser and can steal cookies, capture keystrokes, or redirect to phishing sites.

There are three types of XSS. Stored XSS saves the malicious script in your database (comments, profiles, posts) and serves it to everyone. Reflected XSS bounces the script off your server through URL parameters. DOM-based XSS happens entirely in the browser when JavaScript processes untrusted data.

According to OWASP, injection attacks (including XSS) rank #3 in the Top 10 Web Application Security Risks. The PortSwigger XSS Guide provides comprehensive exploitation techniques and prevention strategies. Vibe coders are especially vulnerable when building features that display user content.

How do AI tools cause XSS?

AI tools cause XSS by generating code that bypasses framework escaping with dangerouslySetInnerHTML, v-html, or @html. When you ask to "render HTML content" or "display rich text," AI reaches for these escape hatches because they work, not because they're safe.

// React - AI generates this for "render user content as HTML"
function Comment({ content }) {
  return <div dangerouslySetInnerHTML={{ __html: content }} />
}

// Vue - AI generates this for "display markdown"
<template>
  <div v-html="userContent"></div>
</template>

// Svelte - AI generates this for "show formatted text"
{@html userInput}

Why this happens: When you prompt "display user-generated HTML" or "render markdown," the AI interprets this literally. It provides a working solution without considering that "user-generated" might include malicious scripts. The AI optimizes for functionality, not security.

All major AI coding tools (Cursor, Claude Code, Bolt, v0, and Copilot) can generate these patterns. Whether you're vibe coding a blog, comment system, or rich text editor, watch for these dangerous HTML rendering patterns in your AI-generated code.

What could happen if I have XSS?

XSS can result in session hijacking, credential theft, malware distribution, and complete account takeover for every user who visits the affected page.

• Session hijacking: Attackers steal session cookies and impersonate users, accessing their accounts without passwords
• Credential theft: Injected scripts capture login forms, sending usernames and passwords to attacker servers
• Malware distribution: XSS redirects users to malicious downloads or exploit kits
• Defacement: Attackers modify page content, displaying fake information or damaging your brand
• Keylogging: Scripts record everything users type, including credit cards, messages, and sensitive data

How do I detect XSS vulnerabilities?

Detect XSS vulnerabilities by searching for dangerouslySetInnerHTML, v-html, @html, innerHTML, and document.write in your codebase.

# React
dangerouslySetInnerHTML
__html

# Vue
v-html

# Svelte
{@html

# Angular
[innerHTML]
bypassSecurityTrust

# Vanilla JS
innerHTML =
outerHTML =
document.write(
insertAdjacentHTML

# jQuery
.html(
.append( (with user input)

# URL-based XSS
href={userInput}
src={userInput}
javascript:

Test for XSS: Try entering <script>alert('XSS')</script> or <img src=x onerror=alert('XSS')> in input fields. If an alert appears, you have an XSS vulnerability.

How do I fix XSS vulnerabilities?

Fix XSS by removing dangerous HTML rendering patterns and letting your framework escape content, or sanitize with DOMPurify if you must render HTML.

// React - Renders raw HTML, XSS possible
function Comment({ content }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: content }} />
  )
}

// Vue - Same problem
<div v-html="userContent"></div>

// Svelte - Same problem
{@html userInput}

// React - Let React escape content
function Comment({ content }) {
  return (
    <div>{content}</div>
  )
}

// Vue - Use text interpolation
<div>{{ userContent }}</div>

// Svelte - Use normal interpolation
{userInput}

import DOMPurify from 'dompurify';

// Sanitize before rendering
const cleanHTML = DOMPurify.sanitize(untrustedHTML);

// React
<div dangerouslySetInnerHTML={{ __html: cleanHTML }} />

// Vue
<div v-html="cleanHTML"></div>

// Svelte
{@html cleanHTML}

Frequently asked questions

Related content