React Security Best Practices: 12 Things Every Developer Should Do

// Safe — React escapes the value
const userInput = '<script>alert("xss")</script>';
return <div>{userInput}</div>;
// Renders as text: <script>alert("xss")</script>

// VULNERABLE — unsanitized user input rendered as HTML
return <div dangerouslySetInnerHTML={{ __html: userComment }} />;

// VULNERABLE — javascript: protocol executes code
const userUrl = 'javascript:alert(document.cookie)';
return <a href={userUrl}>Click here</a>;

// VULNERABLE — executing user-controlled strings
eval(userInput);
new Function(userInput)();
setTimeout(userInput, 0); // string form

import DOMPurify from 'dompurify';

function SafeHtml({ html }) {
  const sanitized = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br', 'ul', 'ol', 'li', 'h2', 'h3', 'code', 'pre'],
    ALLOWED_ATTR: ['href', 'target', 'rel'],
  });

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

// next.config.js — Next.js CSP with nonce
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: `
              default-src 'self';
              script-src 'self' 'nonce-{NONCE}';
              style-src 'self' 'unsafe-inline';
              img-src 'self' data: https:;
              font-src 'self';
              connect-src 'self' https://api.example.com;
            `.replace(/\n/g, ' ').trim(),
          },
        ],
      },
    ];
  },
};

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

function SafeLink({ url, children }) {
  const isValidUrl = (url) => {
    try {
      const parsed = new URL(url);
      return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
    } catch {
      return false;
    }
  };

  if (!isValidUrl(url)) {
    return <span>{children}</span>;
  }

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

// DANGEROUS — user controls which props are set
const userProps = getUserProps(); // { onError: 'alert(1)', style: '...' }
return <div {...userProps} />;

// SAFE — explicitly pick allowed props
const { title, className } = getUserProps();
return <div title={title} className={className} />;

// BAD — accessible via XSS
localStorage.setItem('token', jwt);

// BETTER — httpOnly cookie (set by server)
// The token is never accessible to JavaScript
// Server sets: Set-Cookie: token=jwt; HttpOnly; Secure; SameSite=Strict

function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;

  return children;
}

function useSessionTimeout(timeoutMs = 30 * 60 * 1000) {
  useEffect(() => {
    let timer;
    const resetTimer = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        logout();
        navigate('/login?reason=timeout');
      }, timeoutMs);
    };

    window.addEventListener('mousemove', resetTimer);
    window.addEventListener('keypress', resetTimer);
    resetTimer();

    return () => {
      clearTimeout(timer);
      window.removeEventListener('mousemove', resetTimer);
      window.removeEventListener('keypress', resetTimer);
    };
  }, [timeoutMs]);
}

// WRONG — visible in browser source
const API_KEY = 'sk_live_abc123';
fetch(`https://api.stripe.com/v1/charges`, {
  headers: { Authorization: `Bearer ${API_KEY}` }
});

// RIGHT — proxy through your backend
fetch('/api/create-charge', {
  method: 'POST',
  body: JSON.stringify({ amount: 1000 }),
});

# .env — NOT committed to git
NEXT_PUBLIC_API_URL=https://api.example.com  # OK — public
STRIPE_SECRET_KEY=sk_live_xxx                # Server-only

# .gitignore
.env
.env.local
.env.production

# Check for known vulnerabilities
npm audit

# Auto-fix where possible
npm audit fix

# See detailed report
npm audit --json

# GitHub Actions
- name: Security audit
  run: npm audit --audit-level=high
  # Fails the build if high or critical vulnerabilities exist

// Backend (Express) — strict CORS configuration
const cors = require('cors');
app.use(cors({
  origin: ['https://your-app.com'],  // NOT '*' in production
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
}));

function ContactForm() {
  const validateEmail = (email) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  };

  const sanitizeInput = (input) => {
    return input.trim().slice(0, 1000); // Limit length
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const email = sanitizeInput(e.target.email.value);
    const message = sanitizeInput(e.target.message.value);

    if (!validateEmail(email)) {
      setError('Invalid email');
      return;
    }
    // Send to backend — backend validates again
  };
}

// Instead of importing all of lodash (71KB)
import _ from 'lodash';

// Import only what you need
import debounce from 'lodash/debounce';

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8w"
  crossorigin="anonymous"
></script>

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

// VULNERABLE — user data in serialized state
<script
  dangerouslySetInnerHTML={{
    __html: `window.__INITIAL_STATE__ = ${JSON.stringify(state)}`
  }}
/>

// SAFE — use a serialization library that escapes HTML
import serialize from 'serialize-javascript';
<script
  dangerouslySetInnerHTML={{
    __html: `window.__INITIAL_STATE__ = ${serialize(state, { isJSON: true })}`
  }}
/>

// getServerSideProps — runs on server only
export async function getServerSideProps() {
  const data = await fetch(process.env.INTERNAL_API_URL, {
    headers: { Authorization: `Bearer ${process.env.API_SECRET}` }
  });

  // Only pass sanitized data to the client
  return { props: { items: data.items } };
  // NOT: return { props: { items: data.items, apiSecret: process.env.API_SECRET } }
}

# .github/workflows/security.yml
name: Security Checks
on: [push, pull_request]

jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install dependencies
        run: npm ci

      - name: Dependency audit
        run: npm audit --audit-level=high

      - name: Lint for security issues
        run: npx eslint . --plugin security

      - name: Build
        run: npm run build

      - name: Check bundle for secrets
        run: npx secretlint "build/**/*.js"