Cross-Site Scripting (XSS) Attacks
XSS attacks are one of the most common web vulnerabilities. Understanding how they work and how to prevent them is crucial for secure web development.
Quick Decision Guide
Quick Prevention Checklist:
Never do this: element.innerHTML = userInput - allows XSS injection.
Always do this: - Use element.textContent = userInput (escapes automatically) - Or sanitize: DOMPurify.sanitize(userInput) if you need HTML - React escapes by default: <div>{userInput}</div> is safe
Server-side: Validate and sanitize ALL user input. Use libraries like validator.js or framework sanitizers.
CSP Header: Add Content-Security-Policy: script-src 'self' to prevent inline script execution.
Common Vulnerabilities: - Comment forms without sanitization - URL parameters reflected in HTML - eval() or innerHTML with user data - Third-party widgets without CSP
Test: Try injecting <script>alert('XSS')</script> in forms - if it executes, you have a vulnerability.
Understanding XSS Attack Process
Overview of XSS Attacks
Cross-Site Scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts into web pages viewed by other users. These scripts execute in the victim's browser with the privileges of the website.
Types of XSS Attacks
Figure 1: XSS Attack Types Comparison
┌─────────────────────────────────────────────────────────┐
│ XSS Attack Types │
├─────────────────────────────────────────────────────────┤
│ │
│ Stored XSS (Persistent) │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Attacker│────>│ Database│────>│ Victim │ │
│ │ Input │ │ Stores │ │ Views │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ Script Script Script │
│ Injected Stored Executes │
│ │
│ Reflected XSS (Non-Persistent) │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Attacker│────>│ URL │────>│ Victim │ │
│ │ Sends │ │ Contains│ │ Clicks │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ Link Script Script │
│ Reflected Executes │
│ │
│ DOM-based XSS │
│ ┌─────────┐ ┌─────────┐ │
│ │ Attacker│────>│ Client │ │
│ │ Input │ │ DOM │ │
│ └─────────┘ └─────────┘ │
│ Script Script │
│ Injected Executes │
│ (No Server) │
│ │
└─────────────────────────────────────────────────────────┘Stored XSS Attack Flow
Figure 2: Stored XSS Attack Process
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Attacker │ │ Website │ │ Victim │
│ │ │ Server │ │ Browser │
└──────┬──────┘ └──────┬───────┘ └──────┬──────┘
│ │ │
│ 1. Submit Comment │ │
│ <script>alert() │ │
├───────────────────────> │
│ │ │
│ │ 2. Store in DB │
│ │ (No Sanitization) │
│ │ │
│ │ │
│ │ 3. Victim Requests │
│ │ Page │
│ │ <───────────────────────
│ │ │
│ │ 4. Return HTML │
│ │ (Script Included) │
│ ├─────────────────────────>
│ │ │
│ │ │ 5. Script
│ │ │ Executes
│ │ │Step-by-Step Process:
1. Attacker injects malicious script into user input (comment, profile, etc.)
- Example: <script>document.cookie</script>
- Script contains malicious JavaScript code
2. Website stores the input without sanitization
- Input saved to database as-is
- No HTML escaping or validation
3. Victim views the page containing the malicious script
- Page loads from database
- Malicious script included in HTML
4. Script executes in victim's browser
- Runs with website's privileges
- Can steal cookies, session tokens, or perform actions
Reflected XSS Attack Flow
Figure 3: Reflected XSS Attack Process
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Attacker │ │ Website │ │ Victim │
│ │ │ Server │ │ Browser │
└──────┬──────┘ └──────┬───────┘ └──────┬──────┘
│ │ │
│ 1. Create Malicious │ │
│ URL with Script │ │
│ example.com?q= │ │
│ <script>alert()</> │ │
│ │ │
│ 2. Send Link to │ │
│ Victim │ │
├─────────────────────────────────────────────────>
│ │ │
│ │ │ 3. Victim
│ │ │ Clicks
│ │ │ Link
│ │ <───────────────────────
│ │ │
│ │ 4. Return HTML │
│ │ (Script Reflected) │
│ ├─────────────────────────>
│ │ │
│ │ │ 5. Script
│ │ │ Executes
│ │ │DOM-based XSS Attack Flow
Figure 4: DOM-based XSS Attack Process
┌─────────────┐ ┌──────────────┐
│ Attacker │ │ Victim │
│ │ │ Browser │
└──────┬──────┘ └──────┬───────┘
│ │
│ 1. Create Malicious │
│ URL │
│ example.com# │
│ <script>alert()</> │
│ │
│ 2. Send Link │
├───────────────────────>
│ │
│ │ 3. JavaScript Reads
│ │ URL Fragment
│ │
│ │ 4. Injects into DOM
│ │ document.write()
│ │ innerHTML
│ │
│ │ 5. Script Executes
│ │XSS Prevention Strategies
Defense in Depth Approach
Multiple layers of protection:
1. Input validation and sanitization
2. Output encoding
3. Content Security Policy (CSP)
4. Framework protections
Figure 5: XSS Prevention Layers
┌─────────────────────────────────────────────────────────┐
│ User Input │
└───────────────────────┬─────────────────────────────────┘
│
▼
┌───────────────────────────────┐
│ Layer 1: Input Validation │
│ - Whitelist allowed chars │
│ - Reject suspicious input │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ Layer 2: Input Sanitization │
│ - Escape HTML entities │
│ - Remove script tags │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ Layer 3: Output Encoding │
│ - textContent (not innerHTML)│
│ - Framework auto-escaping │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ Layer 4: Content Security │
│ Policy (CSP) │
│ - Block inline scripts │
│ - Restrict script sources │
└───────────────┬───────────────┘
│
▼
┌───────────────────────────────┐
│ Safe Output │
└───────────────────────────────┘Input Sanitization
Escape HTML Entities
< to <> to >& to &" to "' to 'Example Implementation:
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}Use Text Content, Not innerHTML
Dangerous (Vulnerable to XSS):
// ❌ NEVER DO THIS
element.innerHTML = userInput;
document.write(userInput);
element.outerHTML = userInput;Safe Alternatives:
// ✅ SAFE
element.textContent = userInput;
element.innerText = userInput;
// ✅ React auto-escapes
<div>{userInput}</div>
// ✅ If HTML needed, sanitize first
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);Content Security Policy (CSP)
Restrict sources of executable scripts
Example CSP Header:
Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;XSS Prevention Methods Comparison
| Method | Effectiveness | Complexity | Performance Impact | Use Case |
|---|---|---|---|---|
| Input Sanitization | ⭐⭐⭐⭐ High | Medium | Low | Server-side validation |
| Output Encoding | ⭐⭐⭐⭐⭐ Highest | Low | None | Client-side rendering |
| CSP | ⭐⭐⭐⭐ High | Low | None | Defense in depth |
| Framework Protection | ⭐⭐⭐⭐⭐ Highest | Very Low | None | React, Vue, Angular |
Best Practices for Implementation
Server-Side Best Practices
1. Validate All Input
// Validate input type and format
if (typeof userInput !== 'string') {
throw new Error('Invalid input type');
}
// Whitelist approach (better than blacklist)
const allowedChars = /^[a-zA-Z0-9s.,!?-]+$/;
if (!allowedChars.test(userInput)) {
throw new Error('Invalid characters');
}2. Sanitize Before Storage
const validator = require('validator');
const sanitized = validator.escape(userInput);
// Store sanitized version in database3. Use Parameterized Queries
// ✅ SAFE - Parameterized query
db.query('SELECT * FROM users WHERE id = ?', [userId]);
// ❌ VULNERABLE - String concatenation
db.query('SELECT * FROM users WHERE id = ' + userId);Client-Side Best Practices
1. Use Framework Auto-Escaping
// ✅ React - Auto-escapes
function Comment({ text }) {
return <div>{text}</div>;
}
// ✅ Vue - Auto-escapes
<template>
<div>{{ userInput }}</div>
</template>2. Prefer textContent Over innerHTML
// ✅ SAFE
const div = document.createElement('div');
div.textContent = userInput;
document.body.appendChild(div);
// ❌ VULNERABLE
document.body.innerHTML = userInput;3. Sanitize If HTML Needed
import DOMPurify from 'dompurify';
// ✅ SAFE - Sanitize before using innerHTML
element.innerHTML = DOMPurify.sanitize(userInput, {
ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],
ALLOWED_ATTR: []
});Common Mistakes to Avoid
Mistake 1: Only sanitizing on client-side
Mistake 2: Using innerHTML with user data
element.innerHTML = userInputelement.textContent = userInputMistake 3: Not implementing CSP
Mistake 4: Allowing 'unsafe-inline' in CSP
script-src 'self' 'unsafe-inline'