🔒

Advanced

6 min read

Web Security

XSS, CSRF, authentication, and security best practices

Web Security Interview Questions

Master security concepts and best practices for web applications.

1. Cross-Site Scripting (XSS)

// Vulnerable code
element.innerHTML = userInput;  // ❌ Dangerous

// Safe alternatives
element.textContent = userInput;  // ✅ Escapes HTML
element.innerText = userInput;    // ✅ Escapes HTML

// React automatically escapes
return <div>{userInput}</div>;  // ✅ Safe

// DOMPurify for sanitization
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(dirtyHTML);

2. Cross-Site Request Forgery (CSRF)

// CSRF Token in forms
<form method="POST" action="/api/transfer">
  <input type="hidden" name="csrf_token" value="{token}">
  <!-- form fields -->
</form>

// SameSite cookies
Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly

3. Authentication & Authorization

// JWT Authentication
const token = localStorage.getItem('token');
fetch('/api/data', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

// OAuth 2.0 Flow
// 1. Redirect to OAuth provider
// 2. User authorizes
// 3. Receive authorization code
// 4. Exchange for access token
// 5. Use token for API requests

4. CORS

// Server-side CORS headers
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true

Key Takeaways:

Never trust user input - always sanitize
Use HTTPS for all production apps
Implement CSRF protection
Store tokens securely (HttpOnly cookies)
Validate and sanitize on both client and server
Use Content Security Policy (CSP)

Learn More

State Management

Design Patterns