Web Security Essentials for Modern Applications

Security is crucial for modern web applications. Let’s explore essential practices and implementations.

Cross-Site Scripting (XSS) Prevention

// React's built-in XSS prevention
function SafeComponent({ userInput }: { userInput: string }) {
  return <div>{userInput}</div>; // React escapes this automatically
}

// Manual escaping when needed
function escapeHtml(unsafe: string) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

CSRF Protection

// Express middleware example
app.use(csrf());

// React form with CSRF token
function Form() {
  return (
    <form method="POST">
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* form fields */}
    </form>
  );
}

Content Security Policy

// Express CSP middleware
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
  },
}));

Essential Security Measures:

1. Input validation and sanitization
2. Secure session management
3. HTTPS everywhere
4. Regular security audits
5. Dependency vulnerability scanning