React Security Best Practices: XSS Prevention, Auth, and Data Protection

// Safe: React escapes the content
function UserComment({ comment }) {
  return <p>{comment}</p>;
}

// Even if comment contains:
// "<script>alert('XSS')</script>"
// React renders it as text, not HTML

// DANGEROUS: Renders HTML directly
function UnsafeComponent({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

import DOMPurify from 'dompurify';

function SaferHtmlComponent({ htmlContent }) {
  const sanitizedHtml = DOMPurify.sanitize(htmlContent, {
    ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a'],
    ALLOWED_ATTR: ['href'],
  });

  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
}

import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const userSchema = z.object({
  email: z.string().email('Invalid email'),
  name: z.string()
    .min(2, 'Name too short')
    .max(100, 'Name too long')
    .regex(/^[a-zA-Z\s]+$/, 'Name can only contain letters'),
  website: z.string().url().optional().or(z.literal('')),
});

function ProfileForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(userSchema),
  });

  const onSubmit = async (data) => {
    // Data is validated - safe to send to API
    await updateProfile(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <span>{errors.email.message}</span>}
      {/* ... */}
    </form>
  );
}

function SafeLink({ url, children }) {
  const isValidUrl = (urlString) => {
    try {
      const url = new URL(urlString);
      // Only allow http and https protocols
      return ['http:', 'https:'].includes(url.protocol);
    } catch {
      return false;
    }
  };

  if (!isValidUrl(url)) {
    return <span>{children}</span>; // Render as text if invalid
  }

  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
    >
      {children}
    </a>
  );
}

// WRONG: Storing token in localStorage (vulnerable to XSS)
localStorage.setItem('token', authToken);

// BETTER: Use HttpOnly cookies (set by server)
// The cookie is automatically sent with requests
// and cannot be accessed by JavaScript

// For API calls, let the browser handle cookies:
async function fetchUserData() {
  const response = await fetch('/api/user', {
    credentials: 'include', // Send cookies
  });
  return response.json();
}

// If you must use tokens in memory (SPA with separate API):
// Store in memory, not localStorage
const authStore = {
  token: null,
  setToken(token) { this.token = token; },
  getToken() { return this.token; },
  clearToken() { this.token = null; },
};

// Get CSRF token from meta tag or cookie
function getCsrfToken() {
  return document.querySelector('meta[name="csrf-token"]')?.content;
}

// Include in API calls
async function secureApiCall(endpoint, data) {
  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': getCsrfToken(),
    },
    credentials: 'include',
    body: JSON.stringify(data),
  });
  return response.json();
}

// In React (Create React App, Vite):
// All REACT_APP_ or VITE_ prefixed vars are bundled into the app

// SAFE: Public configuration
const apiUrl = import.meta.env.VITE_API_URL;
const publicKey = import.meta.env.VITE_STRIPE_PUBLIC_KEY;

// NEVER DO THIS: These would be exposed to users
// const apiSecret = import.meta.env.VITE_API_SECRET;  // WRONG!
// const dbPassword = import.meta.env.VITE_DB_PASS;    // WRONG!

// Keep secrets on your backend server, not in React

async function fetchData(endpoint) {
  try {
    const response = await fetch(endpoint, {
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (response.status === 401) {
      // Handle unauthorized - redirect to login
      window.location.href = '/login';
      return null;
    }

    if (!response.ok) {
      // Log error but don't expose details to user
      console.error('API error:', response.status);
      throw new Error('Request failed');
    }

    return await response.json();
  } catch (error) {
    // Generic error message for users
    // Log full error for debugging
    console.error('Fetch error:', error);
    throw new Error('Unable to load data. Please try again.');
  }
}