Web Security Fundamentals: XSS Prevention

Introduction

Cross-Site Scripting (XSS) remains one of the most common web security vulnerabilities. This guide explores different types of XSS attacks and provides practical prevention strategies for modern web applications.

Understanding XSS

Types of XSS Attacks

1. Reflected XSS
2. Stored XSS
3. DOM-based XSS

Vulnerable Code Examples

Reflected XSS Example

// ❌ Vulnerable Code
app.get('/search', (req, res) => {
  const query = req.query.q;
  res.send(`
    <h1>Search Results for: ${query}</h1>
    <div id="results">...</div>
  `);
});

Stored XSS Example

// ❌ Vulnerable Code
app.post('/comments', (req, res) => {
  const comment = req.body.comment;
  db.comments.save({
    text: comment,
    userId: req.user.id
  });
});

app.get('/comments', (req, res) => {
  const comments = db.comments.getAll();
  res.send(`
    <div class="comments">
      ${comments.map(c => `<div>${c.text}</div>`).join('')}
    </div>
  `);
});

DOM-based XSS Example

// ❌ Vulnerable Code
const hash = window.location.hash.substring(1);
document.getElementById('output').innerHTML = decodeURIComponent(hash);

Prevention Strategies

1. Input Validation and Sanitization

// ✅ Secure Code
import { sanitize } from 'dompurify';

function validateAndSanitizeInput(input: string): string {
  // Remove any non-alphanumeric characters
  const alphanumeric = input.replace(/[^a-zA-Z0-9]/g, '');
  
  // Sanitize HTML content
  return sanitize(alphanumeric);
}

app.post('/comments', (req, res) => {
  const sanitizedComment = validateAndSanitizeInput(req.body.comment);
  db.comments.save({
    text: sanitizedComment,
    userId: req.user.id
  });
});

2. Output Encoding

// ✅ Secure Code
function encodeHTML(str: string): string {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

app.get('/search', (req, res) => {
  const query = encodeHTML(req.query.q);
  res.send(`
    <h1>Search Results for: ${query}</h1>
    <div id="results">...</div>
  `);
});

3. Content Security Policy (CSP)

// ✅ Secure Code
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic'; " +
    "style-src 'self' 'unsafe-inline'; " +
    "img-src 'self' data: https:; " +
    "font-src 'self';"
  );
  next();
});

4. Framework-specific Protection

React Example:

// ✅ Secure Code
function SafeComponent({ userContent }: { userContent: string }) {
  // React automatically escapes content
  return <div>{userContent}</div>;
  
  // ❌ Dangerous: Don't use dangerouslySetInnerHTML unless necessary
  // return <div dangerouslySetInnerHTML={{ __html: userContent }} />;
}

Vue Example:

<!-- ✅ Secure Code -->
<template>
  <div>
    {{ userContent }} <!-- Auto-escaped -->
    
    <!-- ❌ Dangerous: Avoid v-html with untrusted content -->
    <!-- <div v-html="userContent"></div> -->
  </div>
</template>

Security Headers

Implementation Example

import helmet from 'helmet';

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'nonce-{RANDOM}'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
      connectSrc: ["'self'"],
      fontSrc: ["'self'"],
      objectSrc: ["'none'"],
      mediaSrc: ["'self'"],
      frameSrc: ["'none'"],
    },
  },
  xssFilter: true,
  noSniff: true,
  referrerPolicy: { policy: 'same-origin' },
}));

Testing for XSS Vulnerabilities

Automated Testing Example

describe('XSS Prevention Tests', () => {
  const xssPayloads = [
    '<script>alert("xss")</script>',
    'javascript:alert("xss")',
    '<img src="x" onerror="alert('xss')">',
    '<svg/onload=alert("xss")>',
  ];

  test.each(xssPayloads)('should sanitize XSS payload: %s', async (payload) => {
    const response = await request(app)
      .post('/api/comments')
      .send({ content: payload });
    
    expect(response.status).toBe(200);
    const savedComment = await db.comments.findLatest();
    expect(savedComment.content).not.toContain(payload);
  });
});

Best Practices Checklist

1. ✅ Validate and sanitize all user input
2. ✅ Implement proper output encoding
3. ✅ Use Content Security Policy
4. ✅ Enable security headers
5. ✅ Use framework-provided protections
6. ✅ Regularly update dependencies
7. ✅ Implement automated security testing
8. ✅ Conduct regular security audits

Conclusion

XSS prevention requires a multi-layered approach combining input validation, output encoding, and proper security headers. Always stay updated with the latest security best practices and regularly audit your application's security measures.

---

Created with WebInk - Demonstrating security documentation capabilities