Security Patterns

XSS prevention, CSRF protection, Content Security Policy, and secure data handling.

Overview

Security is critical for protecting user data and preventing attacks.

Key Concepts

• XSS Prevention — Sanitize user input, avoid dangerouslySetInnerHTML
• CSRF Protection — Use tokens for form submissions
• CSP — Restrict resource loading origins
• Secure Storage — Never store sensitive data in localStorage
• Authentication — Secure token handling and session management

Code Examples

// Safe HTML rendering
import DOMPurify from 'dompurify';

function SafeHTML({ html }) {
  const cleanHtml = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href']
  });
  
  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
}

// CSRF token handling
function useCsrfToken() {
  const [token, setToken] = useState('');

  useEffect(() => {
    fetch('/api/csrf-token')
      .then(res => res.json())
      .then(data => setToken(data.token));
  }, []);

  return token;
}

function SecureForm({ onSubmit }) {
  const csrfToken = useCsrfToken();
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    formData.append('_csrf', csrfToken);
    
    await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="data" required />
      <button type="submit">Submit</button>
    </form>
  );
}

// CSP headers (next.config.js)
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'unsafe-inline'"
      }]
    }];
  }
};

Practice

Audit a React app for security vulnerabilities and implement fixes.