Web Security & Performance Best Practices in Modern React Apps

Web application security is no longer an optional add-on—it is a core engineering requirement. As cyber threats become more sophisticated and privacy regulations strictly enforced worldwide, full-stack developers must design secure software by default. This article details practical security implementations for protecting modern React and Next.js applications against unauthorized access, data leaks, and compliance violations.

1. Implementing DPDP Act 2023 Privacy Controls

India's Digital Personal Data Protection Act, 2023 (DPDP Act) imposes legal obligations on websites handling user data. Key engineering requirements include:

• Notice at Point of Collection: Providing clear data processing notices prior to user submission.
• Easy Consent Withdrawal: Providing a accessible mechanism (such as a persistent footer trigger) for users to withdraw non-essential tracking consent.
• Designated Grievance Redressal Officer: Publishing clear contact information and adhering to a statutory 30-day grievance resolution timeline.
• Data Minimization: Processing only personal data essential for the specified purpose and deleting data upon request.

2. Preventing Cross-Site Scripting (XSS) & Setting Strict CSP Headers

Cross-Site Scripting (XSS) occurs when malicious third-party scripts execute inside a user's browser context. While React automatically escapes string values in JSX, injecting un-sanitized HTML via dangerouslySetInnerHTML creates severe vulnerabilities. Enforcing a strict Content Security Policy (CSP) header blocks unauthorized script execution.

// Next.js Security Headers Configuration in next.config.mjs
const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  },
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;"
  }
];

3. Secure Authentication: HTTP-Only Cookies vs LocalStorage

Storing JSON Web Tokens (JWTs) or sensitive session tokens inside browser LocalStorage is dangerous because any XSS vulnerability can expose those tokens to attacker-controlled scripts. The gold standard for token security is storing authentication credentials inside HTTP-Only, SameSite=Strict cookies.

// Secure Cookie Setting in Node.js / Next.js API Route
import { serialize } from 'cookie';

export default async function handler(req, res) {
  const token = generateAuthToken(user);

  const cookieHeader = serialize('auth_token', token, {
    httpOnly: true, // Prevents JavaScript access via document.cookie
    secure: process.env.NODE_ENV === 'production', // Requires HTTPS
    sameSite: 'strict', // Prevents Cross-Site Request Forgery (CSRF)
    maxAge: 60 * 60 * 24 * 7, // 7 days
    path: '/',
  });

  res.setHeader('Set-Cookie', cookieHeader);
  return res.status(200).json({ success: true });
}

4. Security & Hardening Checklist

• Input Validation & Sanitization: Validate all incoming form inputs using Zod or Joi schemas on the server.
• Rate Limiting: Apply IP-based rate limiting on sensitive API endpoints (e.g. login, password reset, contact submissions).
• CORS Strict Origin Rules: Restrict Cross-Origin Resource Sharing (CORS) to trusted domain origins.
• Dependency Audit: Run npm audit regularly to patch vulnerability advisories in third-party packages.