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

// 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>;
}

// 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' });

// 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;
}

<!-- 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

// 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');
  }
};

# 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

// 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');
}