What are the key security considerations when building React applications? How do you prevent common vulnerabilities?

What are the key security considerations when building React applications? How do you prevent common vulnerabilities?

React applications face various security challenges that developers must address.

XSS Prevention:

// 1. Sanitize user input
import DOMPurify from 'dompurify';

function UserComment({ comment }) {
  // ❌ Dangerous - can execute scripts
  // return <div dangerouslySetInnerHTML={{ __html: comment }} />;
  
  // ✅ Safe - sanitize HTML
  const cleanHTML = DOMPurify.sanitize(comment);
  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
}

// 2. Use textContent instead of innerHTML
function UserName({ name }) {
  // ✅ Safe - automatically escapes HTML
  return <div>{name}</div>;
  
  // ❌ Dangerous if name contains HTML
  // return <div dangerouslySetInnerHTML={{ __html: name }} />;
}

// 3. Validate and escape props
function Link({ href, children }) {
  // Validate URL to prevent javascript: protocol
  const isValidUrl = (url) => {
    try {
      const urlObj = new URL(url);
      return ['http:', 'https:'].includes(urlObj.protocol);
    } catch {
      return false;
    }
  };
  
  if (!isValidUrl(href)) {
    throw new Error('Invalid URL provided');
  }
  
  return <a href={href}>{children}</a>;
}

CSRF Protection:

// 1. Include CSRF tokens in requests
function useCSRFToken() {
  const [token, setToken] = useState(null);
  
  useEffect(() => {
    // Get CSRF token from meta tag or API
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    setToken(csrfToken);
  }, []);
  
  return token;
}

function UserForm() {
  const csrfToken = useCSRFToken();
  
  const handleSubmit = async (formData) => {
    await fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
      },
      body: JSON.stringify(formData)
    });
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
}

// 2. Use SameSite cookies
// Server-side: Set SameSite=Strict on cookies
// res.cookie('session', sessionId, { sameSite: 'strict' });

Authentication Security:

// 1. Secure token storage
class AuthService {
  static setToken(token) {
    // ✅ Store in httpOnly cookie (server-side)
    // ✅ Or use secure storage for client-side
    sessionStorage.setItem('token', token); // Temporary storage
  }
  
  static getToken() {
    return sessionStorage.getItem('token');
  }
  
  static removeToken() {
    sessionStorage.removeItem('token');
  }
  
  static isTokenExpired(token) {
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      return Date.now() >= payload.exp * 1000;
    } catch {
      return true;
    }
  }
}

// 2. Protected routes with token validation
function ProtectedRoute({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const token = AuthService.getToken();
    if (token && !AuthService.isTokenExpired(token)) {
      setIsAuthenticated(true);
    }
    setLoading(false);
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (!isAuthenticated) return <Navigate to="/login" />;
  
  return children;
}

Content Security Policy (CSP):

<!-- index.html -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' https://cdn.example.com; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:; 
               connect-src 'self' https://api.example.com;">

// 1. Nonce-based CSP
function App() {
  const nonce = useMemo(() => {
    return btoa(Math.random().toString()).substring(0, 16);
  }, []);
  
  useEffect(() => {
    // Add nonce to dynamically created scripts
    const script = document.createElement('script');
    script.nonce = nonce;
    script.src = '/dynamic-script.js';
    document.head.appendChild(script);
  }, [nonce]);
  
  return <div>App content</div>;
}

// 2. Report CSP violations
// Add to CSP header: report-uri /csp-report

Environment Security:

// 1. Secure environment variables
// ✅ Only expose necessary variables to client
const config = {
  apiUrl: process.env.REACT_APP_API_URL,
  // ❌ Never expose secrets
  // secretKey: process.env.SECRET_KEY // This would be undefined in client
};

// 2. Validate environment in production
function validateEnvironment() {
  const requiredVars = ['REACT_APP_API_URL'];
  
  for (const varName of requiredVars) {
    if (!process.env[varName]) {
      throw new Error(`Missing required environment variable: ${varName}`);
    }
  }
}

// 3. Use different configs for different environments
const getConfig = () => {
  switch (process.env.NODE_ENV) {
    case 'development':
      return { apiUrl: 'http://localhost:3001' };
    case 'production':
      return { apiUrl: 'https://api.myapp.com' };
    default:
      throw new Error('Unknown environment');
  }
};

Dependency Security:

# 1. Audit dependencies regularly
npm audit
npm audit fix

# 2. Use tools like Snyk
npm install -g snyk
snyk test
snyk monitor

# 3. Keep dependencies updated
npm update
npm outdated

Secure Development Practices:

// 1. Input validation
function validateEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function validatePassword(password) {
  return password.length >= 8 && 
         /[A-Z]/.test(password) && 
         /[a-z]/.test(password) && 
         /\d/.test(password);
}

// 2. Rate limiting on client side
class RateLimiter {
  constructor(maxRequests, windowMs) {
    this.maxRequests = maxRequests;
    this.windowMs = windowMs;
    this.requests = [];
  }
  
  isAllowed() {
    const now = Date.now();
    this.requests = this.requests.filter(time => now - time < this.windowMs);
    
    if (this.requests.length >= this.maxRequests) {
      return false;
    }
    
    this.requests.push(now);
    return true;
  }
}

const apiRateLimiter = new RateLimiter(10, 60000); // 10 requests per minute

async function makeAPICall() {
  if (!apiRateLimiter.isAllowed()) {
    throw new Error('Rate limit exceeded');
  }
  
  return fetch('/api/data');
}