Cross-Site Scripting (XSS)

// DANGEROUS: Rendering user input as HTML
function UserComment({ comment }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: comment.text }} />
  );
}

// Attack: comment.text = "<img src=x onerror='alert(document.cookie)'>"
// Steals user's session cookie!

// SAFE: React automatically escapes text content
function UserComment({ comment }) {
  return <div>{comment.text}</div>;
}

// Or if you need HTML, use a sanitization library
import DOMPurify from 'dompurify';
import { APP_ROUTES } from '@/lib/config'

function UserComment({ comment }) {
  const sanitized = DOMPurify.sanitize(comment.text);
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}

// DANGEROUS: Using innerHTML with user input
const params = new URLSearchParams(window.location.search);
const username = params.get('name');

document.getElementById('welcome').innerHTML = 'Welcome, ' + username;

// Attack URL: ?name=<script>alert('XSS')</script>
// Script executes in user's browser

// SAFE: Using textContent instead of innerHTML
const params = new URLSearchParams(window.location.search);
const username = params.get('name');

document.getElementById('welcome').textContent = 'Welcome, ' + username;

// Or create text node
const welcomeEl = document.getElementById('welcome');
welcomeEl.appendChild(document.createTextNode('Welcome, ' + username));

// Script tags are rendered as text, not executed

// DANGEROUS: User input in href attribute
const redirectUrl = new URLSearchParams(window.location.search).get('redirect');

const link = document.createElement('a');
link.href = redirectUrl;  // No validation
link.textContent = 'Click here';

// Attack: ?redirect=javascript:alert(document.cookie)
// Clicking link executes JavaScript

// SAFE: Validate and whitelist URLs
const redirectUrl = new URLSearchParams(window.location.search).get('redirect');

function isSafeUrl(url) {
  try {
    const parsed = new URL(url, window.location.origin);
    // Only allow http(s) protocols and same origin or whitelisted domains
    return (
      (parsed.protocol === 'http:' || parsed.protocol === 'https:') &&
      (parsed.origin === window.location.origin ||
       allowedDomains.includes(parsed.hostname))
    );
  } catch {
    return false;
  }
}

if (isSafeUrl(redirectUrl)) {
  const link = document.createElement('a');
  link.href = redirectUrl;
  link.textContent = 'Click here';
} else {
  console.error('Invalid redirect URL');
}