Loading...

CLAUDE.md

rules

Security First React Components

Security-first React component architect with XSS prevention, CSP integration, input sanitization, and OWASP Top 10 mitigation patterns

October 16, 2025

security

react

xss

csp

owasp

CLAUDE.md Content

The main content for this claude.md.

security-first-react-components.ts

typescript

// ❌ DANGEROUS - Never use dangerouslySetInnerHTML with user input
function UnsafeComponent({ userContent }: { userContent: string }) {
  return <div dangerouslySetInnerHTML={{ __html: userContent }} />;
}

// ✅ SAFE - Let React escape content automatically
function SafeComponent({ userContent }: { userContent: string }) {
  return <div>{userContent}</div>;
}

// ✅ SAFE - Use DOMPurify for rich text (if absolutely necessary)
import DOMPurify from 'isomorphic-dompurify';

function SanitizedContent({ html }: { html: string }) {
  const sanitized = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],
    ALLOWED_ATTR: ['href', 'target', 'rel'],
    ALLOW_DATA_ATTR: false,
  });

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

// ❌ DANGEROUS - href with javascript: protocol
function UnsafeLink({ url }: { url: string }) {
  return <a href={url}>Click me</a>;
}

// ✅ SAFE - Validate URL protocol
function SafeLink({ url }: { url: string }) {
  const isValidUrl = (url: string): boolean => {
    try {
      const parsed = new URL(url);
      return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
    } catch {
      return false;
    }
  };

  if (!isValidUrl(url)) {
    return <span className="text-gray-500">Invalid link</span>;
  }

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

CLAUDE.md Content (2)

Additional code example for this claude.md.

security-first-react-components.ts

typescript

// next.config.mjs - CSP Configuration
import { nanoid } from 'nanoid';

const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-{{NONCE}}' 'strict-dynamic' https://vercel.live;
  style-src 'self' 'nonce-{{NONCE}}' 'unsafe-inline';
  img-src 'self' blob: data: https://*.cloudinary.com;
  font-src 'self' data:;
  connect-src 'self' https://api.yourapp.com wss://*.supabase.co;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;
`;

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=()',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

// middleware.ts - Inject CSP nonce
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { nanoid } from 'nanoid';

export function middleware(request: NextRequest) {
  const nonce = nanoid();
  const requestHeaders = new Headers(request.headers);
  
  // Pass nonce to page via header
  requestHeaders.set('x-nonce', nonce);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  // Add CSP header with nonce
  const csp = response.headers.get('Content-Security-Policy');
  if (csp) {
    response.headers.set(
      'Content-Security-Policy',
      csp.replace(/{{NONCE}}/g, nonce)
    );
  }

  return response;
}

// app/layout.tsx - Use nonce in scripts
import { headers } from 'next/headers';
import Script from 'next/script';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const headersList = await headers();
  const nonce = headersList.get('x-nonce') ?? undefined;

  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="/analytics.js"
          strategy="afterInteractive"
          nonce={nonce}
        />
      </body>
    </html>
  );
}

CLAUDE.md Content (3)

Additional code example for this claude.md.

security-first-react-components.ts

typescript

import { z } from 'zod';
import { useState } from 'react';

// Define strict validation schemas
const userProfileSchema = z.object({
  username: z
    .string()
    .min(3, 'Username must be at least 3 characters')
    .max(20, 'Username must be at most 20 characters')
    .regex(
      /^[a-zA-Z0-9_-]+$/,
      'Username can only contain letters, numbers, underscores, and hyphens'
    ),
  email: z
    .string()
    .email('Invalid email address')
    .toLowerCase(),
  bio: z
    .string()
    .max(500, 'Bio must be at most 500 characters')
    .optional()
    .transform((val) => val?.trim()),
  website: z
    .string()
    .url('Invalid URL')
    .refine(
      (url) => {
        try {
          const parsed = new URL(url);
          return ['http:', 'https:'].includes(parsed.protocol);
        } catch {
          return false;
        }
      },
      { message: 'Only HTTP/HTTPS URLs are allowed' }
    )
    .optional(),
});

type UserProfile = z.infer<typeof userProfileSchema>;

interface ProfileFormProps {
  onSubmit: (data: UserProfile) => Promise<void>;
}

export function ProfileForm({ onSubmit }: ProfileFormProps) {
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrors({});
    setIsSubmitting(true);

    const formData = new FormData(e.currentTarget);
    const data = {
      username: formData.get('username') as string,
      email: formData.get('email') as string,
      bio: formData.get('bio') as string | undefined,
      website: formData.get('website') as string | undefined,
    };

    try {
      // Validate with Zod
      const validated = userProfileSchema.parse(data);
      await onSubmit(validated);
    } catch (error) {
      if (error instanceof z.ZodError) {
        const fieldErrors: Record<string, string> = {};
        error.errors.forEach((err) => {
          if (err.path[0]) {
            fieldErrors[err.path[0].toString()] = err.message;
          }
        });
        setErrors(fieldErrors);
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          name="username"
          type="text"
          required
          minLength={3}
          maxLength={20}
          pattern="[a-zA-Z0-9_-]+"
        />
        {errors.username && (
          <span className="text-red-600">{errors.username}</span>
        )}
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          required
        />
        {errors.email && (
          <span className="text-red-600">{errors.email}</span>
        )}
      </div>

      <div>
        <label htmlFor="bio">Bio</label>
        <textarea
          id="bio"
          name="bio"
          maxLength={500}
        />
        {errors.bio && (
          <span className="text-red-600">{errors.bio}</span>
        )}
      </div>

      <div>
        <label htmlFor="website">Website</label>
        <input
          id="website"
          name="website"
          type="url"
        />
        {errors.website && (
          <span className="text-red-600">{errors.website}</span>
        )}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Saving...' : 'Save Profile'}
      </button>
    </form>
  );
}

CLAUDE.md Content (4)

Additional code example for this claude.md.

security-first-react-components.ts

typescript

// 1. Broken Access Control - Server-side authorization
// app/api/users/[id]/route.ts
import { NextResponse } from 'next/server';
import { auth } from '@/lib/auth';
import { db } from '@/lib/db';

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const session = await auth();

  // Check authentication
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // Check authorization - users can only access their own data
  if (session.user.id !== params.id && session.user.role !== 'admin') {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }

  const user = await db.user.findUnique({
    where: { id: params.id },
    select: {
      id: true,
      email: true,
      name: true,
      // Never expose password hashes, tokens, etc.
    },
  });

  if (!user) {
    return NextResponse.json({ error: 'User not found' }, { status: 404 });
  }

  return NextResponse.json({ user });
}

// 2. Cryptographic Failures - Secure password hashing
import { hash, verify } from '@node-rs/argon2';

const ARGON2_OPTIONS = {
  memoryCost: 19456,
  timeCost: 2,
  outputLen: 32,
  parallelism: 1,
};

export async function hashPassword(password: string): Promise<string> {
  return hash(password, ARGON2_OPTIONS);
}

export async function verifyPassword(
  password: string,
  hash: string
): Promise<boolean> {
  try {
    return await verify(hash, password, ARGON2_OPTIONS);
  } catch {
    return false;
  }
}

// 3. Injection - Parameterized queries with Prisma
import { db } from '@/lib/db';

// ❌ DANGEROUS - SQL injection vulnerability
export async function searchUsersUnsafe(query: string) {
  // Never do this!
  return db.$queryRaw`SELECT * FROM users WHERE name LIKE '%${query}%'`;
}

// ✅ SAFE - Parameterized query
export async function searchUsersSafe(query: string) {
  return db.user.findMany({
    where: {
      name: {
        contains: query,
        mode: 'insensitive',
      },
    },
  });
}

// 4. Insecure Design - Rate limiting
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, '10 s'),
  analytics: true,
});

export async function POST(request: Request) {
  const ip = request.headers.get('x-forwarded-for') ?? 'unknown';
  const { success, limit, remaining, reset } = await ratelimit.limit(ip);

  if (!success) {
    return NextResponse.json(
      { error: 'Too many requests' },
      { 
        status: 429,
        headers: {
          'X-RateLimit-Limit': limit.toString(),
          'X-RateLimit-Remaining': remaining.toString(),
          'X-RateLimit-Reset': reset.toString(),
        },
      }
    );
  }

  // Process request
}

// 5. Security Misconfiguration - Environment validation
import { z } from 'zod';

const envSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']),
  DATABASE_URL: z.string().url(),
  NEXTAUTH_SECRET: z.string().min(32),
  NEXTAUTH_URL: z.string().url(),
  // Ensure sensitive vars are set in production
  UPSTASH_REDIS_REST_URL: z.string().url(),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(20),
});

// Validate at build time
const env = envSchema.parse(process.env);

export { env };

// 6. Vulnerable Components - Automated dependency scanning
// package.json scripts
{
  "scripts": {
    "audit": "npm audit --audit-level=moderate",
    "audit:fix": "npm audit fix",
    "check:deps": "npx npm-check-updates"
  }
}

CLAUDE.md Content (5)

Additional code example for this claude.md.

security-first-react-components.ts

typescript

// lib/auth/session.ts - Secure session management
import { SignJWT, jwtVerify } from 'jose';
import { cookies } from 'next/headers';
import { nanoid } from 'nanoid';

const SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

interface SessionPayload {
  userId: string;
  sessionId: string;
  expiresAt: number;
}

export async function createSession(userId: string): Promise<string> {
  const sessionId = nanoid();
  const expiresAt = Date.now() + 7 * 24 * 60 * 60 * 1000; // 7 days

  const token = await new SignJWT({ userId, sessionId, expiresAt })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('7d')
    .sign(SECRET);

  // Store session server-side for revocation
  await db.session.create({
    data: {
      id: sessionId,
      userId,
      expiresAt: new Date(expiresAt),
    },
  });

  // Set secure cookie
  (await cookies()).set('session', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 7 * 24 * 60 * 60,
    path: '/',
  });

  return token;
}

export async function verifySession(): Promise<SessionPayload | null> {
  const cookieStore = await cookies();
  const token = cookieStore.get('session')?.value;

  if (!token) return null;

  try {
    const { payload } = await jwtVerify(token, SECRET);

    // Verify session exists and is not revoked
    const session = await db.session.findUnique({
      where: { id: payload.sessionId as string },
    });

    if (!session || session.expiresAt < new Date()) {
      return null;
    }

    return payload as unknown as SessionPayload;
  } catch {
    return null;
  }
}

export async function deleteSession() {
  const session = await verifySession();
  
  if (session) {
    // Revoke server-side
    await db.session.delete({
      where: { id: session.sessionId },
    });
  }

  // Clear cookie
  (await cookies()).delete('session');
}

Features

Key capabilities and functionality

XSS prevention in React with automatic content escaping, DOMPurify integration for rich text sanitization, URL validation for links, and secure handling of user-generated content
Content Security Policy (CSP) integration with Next.js 15, nonce-based script loading, strict CSP headers, and middleware-based CSP injection for defense-in-depth
Input sanitization and validation with Zod schemas, client-side and server-side validation, type-safe form handling, and comprehensive input sanitization patterns
OWASP Top 10 mitigation patterns including broken access control prevention, cryptographic failures mitigation, injection prevention, insecure design patterns, and security misconfiguration handling
Secure authentication patterns with JWT session management, secure cookie configuration, server-side session validation, session revocation, and defense-in-depth authentication
Secure component patterns including safe link components, sanitized content components, validated form components, and secure API integration patterns
Security-first development practices including dependency scanning, environment variable validation, rate limiting integration, and automated security testing

Use Cases

Common scenarios and applications

Building secure React applications with XSS prevention, CSP integration, and input sanitization to protect against common web vulnerabilities
Implementing secure form handling with client-side and server-side validation, type-safe schemas, and comprehensive input sanitization
Creating secure authentication flows with JWT session management, secure cookies, server-side validation, and session revocation capabilities
Developing secure React components that prevent XSS, validate URLs, sanitize user input, and follow security best practices by default
Integrating Content Security Policy with Next.js applications for defense-in-depth security and protection against code injection attacks
Implementing OWASP Top 10 mitigation patterns in React applications including access control, injection prevention, and secure design patterns
Establishing security-first development practices with automated dependency scanning, environment validation, and security testing integration

Requirements

Prerequisites and dependencies

Create CLAUDE.md file in project root (./CLAUDE.md) or .claude/ directory (./.claude/CLAUDE.md)
Claude Code 1.0+ or Claude Desktop required for CLAUDE.md memory support and security-first React component guidance
Write access to project root or .claude/ directory for rule file creation
React 19+ project (required for security features and modern React patterns)
Next.js 15+ with App Router (recommended for CSP integration, middleware, and server components)
TypeScript 5.0+ for type safety (recommended)
Zod library for input validation and schema definition
DOMPurify or isomorphic-dompurify for HTML sanitization (if handling user-generated HTML)
Understanding of XSS prevention, CSP, input validation, and React security best practices
Familiarity with OWASP Top 10, web security vulnerabilities, and secure coding practices
Text editor with React/TypeScript support (VS Code with React extensions, or preferred IDE) for editing code and CLAUDE.md rule file
Optional: Access to security testing tools, dependency scanners, and security auditing tools

Usage Examples

Practical code examples demonstrating common use cases and implementation patterns

Secure User Content Display Component

Secure component for displaying user-generated content with XSS prevention and optional HTML sanitization

secure-user-content-display-component.ts

typescript

// components/SecureUserContent.tsx
import DOMPurify from 'isomorphic-dompurify';
import { useMemo } from 'react';

interface SecureUserContentProps {
  content: string;
  allowHTML?: boolean;
  allowedTags?: string[];
}

export function SecureUserContent({ 
  content, 
  allowHTML = false,
  allowedTags = ['b', 'i', 'em', 'strong', 'a', 'p', 'br']
}: SecureUserContentProps) {
  // Sanitize HTML if allowed
  const sanitized = useMemo(() => {
    if (!allowHTML) {
      // Default: React automatically escapes content
      return null;
    }
    
    return DOMPurify.sanitize(content, {
      ALLOWED_TAGS: allowedTags,
      ALLOWED_ATTR: ['href', 'target', 'rel'],
      ALLOW_DATA_ATTR: false,
      FORBID_TAGS: ['script', 'iframe', 'object', 'embed'],
      FORBID_ATTR: ['onerror', 'onload', 'onclick'],
    });
  }, [content, allowHTML, allowedTags]);
  
  if (allowHTML && sanitized) {
    return (
      <div 
        dangerouslySetInnerHTML={{ __html: sanitized }}
        className="user-content"
      />
    );
  }
  
  // Safe default: React escapes automatically
  return <div className="user-content">{content}</div>;
}

// Usage
function UserProfile({ user }: { user: User }) {
  return (
    <div>
      <h1>{user.name}</h1>
      {/* Safe - React escapes automatically */}
      <SecureUserContent content={user.bio} />
      
      {/* Sanitized HTML if needed */}
      <SecureUserContent 
        content={user.htmlBio} 
        allowHTML={true}
        allowedTags={['p', 'br', 'strong', 'em']}
      />
    </div>
  );
}

Secure Link Component with URL Validation

Secure link component with URL validation and protocol whitelisting to prevent XSS and protocol-based attacks

secure-link-component-with-url-validation.ts

typescript

// components/SecureLink.tsx
import { useMemo } from 'react';

interface SecureLinkProps {
  href: string;
  children: React.ReactNode;
  external?: boolean;
}

function isValidUrl(url: string): boolean {
  try {
    const parsed = new URL(url);
    // Only allow http, https, and mailto protocols
    const allowedProtocols = ['http:', 'https:', 'mailto:'];
    return allowedProtocols.includes(parsed.protocol);
  } catch {
    return false;
  }
}

function sanitizeUrl(url: string): string | null {
  if (!isValidUrl(url)) {
    return null;
  }
  
  try {
    const parsed = new URL(url);
    // Remove javascript: and data: protocols
    if (parsed.protocol === 'javascript:' || parsed.protocol.startsWith('data:')) {
      return null;
    }
    
    return parsed.toString();
  } catch {
    return null;
  }
}

export function SecureLink({ href, children, external = false }: SecureLinkProps) {
  const safeUrl = useMemo(() => sanitizeUrl(href), [href]);
  
  if (!safeUrl) {
    // Invalid URL - render as plain text
    return <span className="text-gray-500">{children}</span>;
  }
  
  const isExternal = external || safeUrl.startsWith('http');
  
  return (
    <a
      href={safeUrl}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
      className="link"
    >
      {children}
    </a>
  );
}

// Usage
function UserProfile({ user }: { user: User }) {
  return (
    <div>
      <h1>{user.name}</h1>
      {/* Safe link with validation */}
      <SecureLink href={user.website} external>
        Visit Website
      </SecureLink>
      
      {/* Invalid URL renders as text */}
      <SecureLink href="javascript:alert('XSS')">
        Invalid Link
      </SecureLink>
    </div>
  );
}

Secure Form Component with Zod Validation

Secure form component with Zod validation, client-side validation, and comprehensive input sanitization

secure-form-component-with-zod-validation.ts

typescript

// components/SecureForm.tsx
import { z } from 'zod';
import { useState, FormEvent } from 'react';

// Define validation schema
const contactFormSchema = z.object({
  name: z
    .string()
    .min(2, 'Name must be at least 2 characters')
    .max(50, 'Name must be at most 50 characters')
    .regex(/^[a-zA-Z\s-']+$/, 'Name can only contain letters, spaces, hyphens, and apostrophes'),
  email: z
    .string()
    .email('Invalid email address')
    .toLowerCase()
    .max(255, 'Email must be at most 255 characters'),
  message: z
    .string()
    .min(10, 'Message must be at least 10 characters')
    .max(1000, 'Message must be at most 1000 characters')
    .transform((val) => val.trim()),
  website: z
    .string()
    .url('Invalid URL')
    .refine(
      (url) => {
        try {
          const parsed = new URL(url);
          return ['http:', 'https:'].includes(parsed.protocol);
        } catch {
          return false;
        }
      },
      { message: 'Only HTTP/HTTPS URLs are allowed' }
    )
    .optional(),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

interface SecureFormProps {
  onSubmit: (data: ContactFormData) => Promise<void>;
}

export function SecureForm({ onSubmit }: SecureFormProps) {
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrors({});
    setIsSubmitting(true);
    
    const formData = new FormData(e.currentTarget);
    const rawData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
      message: formData.get('message') as string,
      website: formData.get('website') as string | undefined,
    };
    
    try {
      // Validate with Zod
      const validated = contactFormSchema.parse(rawData);
      await onSubmit(validated);
    } catch (error) {
      if (error instanceof z.ZodError) {
        const fieldErrors: Record<string, string> = {};
        error.errors.forEach((err) => {
          if (err.path[0]) {
            fieldErrors[err.path[0].toString()] = err.message;
          }
        });
        setErrors(fieldErrors);
      }
    } finally {
      setIsSubmitting(false);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="secure-form">
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          required
          minLength={2}
          maxLength={50}
          pattern="[a-zA-Z\s-']+"
        />
        {errors.name && <span className="error">{errors.name}</span>}
      </div>
      
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          required
          maxLength={255}
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </div>
      
      <div>
        <label htmlFor="message">Message</label>
        <textarea
          id="message"
          name="message"
          required
          minLength={10}
          maxLength={1000}
        />
        {errors.message && <span className="error">{errors.message}</span>}
      </div>
      
      <div>
        <label htmlFor="website">Website (optional)</label>
        <input
          id="website"
          name="website"
          type="url"
        />
        {errors.website && <span className="error">{errors.website}</span>}
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}

CSP Integration with Next.js Middleware

Content Security Policy integration with Next.js middleware, nonce injection, and secure script loading

csp-integration-with-next-js-middleware.ts

typescript

// middleware.ts - CSP with nonce injection
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { nanoid } from 'nanoid';

const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-{{NONCE}}' 'strict-dynamic' https://vercel.live;
  style-src 'self' 'nonce-{{NONCE}}' 'unsafe-inline';
  img-src 'self' blob: data: https://*.cloudinary.com https://*.unsplash.com;
  font-src 'self' data: https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://*.supabase.co;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;
`;

export function middleware(request: NextRequest) {
  const nonce = nanoid();
  const requestHeaders = new Headers(request.headers);
  
  // Pass nonce to page via header
  requestHeaders.set('x-nonce', nonce);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  // Add security headers
  response.headers.set(
    'Content-Security-Policy',
    cspHeader.replace(/\n/g, ' ').replace(/{{NONCE}}/g, nonce)
  );
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  response.headers.set(
    'Permissions-Policy',
    'camera=(), microphone=(), geolocation=(), interest-cohort=()'
  );

  return response;
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

// app/layout.tsx - Use nonce in scripts
import { headers } from 'next/headers';
import Script from 'next/script';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const headersList = await headers();
  const nonce = headersList.get('x-nonce') ?? undefined;

  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="/analytics.js"
          strategy="afterInteractive"
          nonce={nonce}
        />
      </body>
    </html>
  );
}

Secure API Route with Authorization and Rate Limiting

Secure API route with authentication, authorization, rate limiting, input validation, and parameterized queries

secure-api-route-with-authorization-and-rate-limiting.ts

typescript

// app/api/users/[id]/route.ts - Secure API route
import { NextResponse } from 'next/server';
import { auth } from '@/lib/auth';
import { db } from '@/lib/db';
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});

const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, '10 s'),
  analytics: true,
});

export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  
  // Rate limiting
  const ip = request.headers.get('x-forwarded-for') ?? 'unknown';
  const { success, limit, remaining, reset } = await ratelimit.limit(ip);
  
  if (!success) {
    return NextResponse.json(
      { error: 'Too many requests' },
      { 
        status: 429,
        headers: {
          'X-RateLimit-Limit': limit.toString(),
          'X-RateLimit-Remaining': remaining.toString(),
          'X-RateLimit-Reset': reset.toString(),
        },
      }
    );
  }
  
  // Authentication
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  // Authorization - users can only access their own data
  if (session.user.id !== id && session.user.role !== 'admin') {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }
  
  // Input validation
  if (!id || typeof id !== 'string' || id.length > 100) {
    return NextResponse.json({ error: 'Invalid user ID' }, { status: 400 });
  }
  
  // Database query with parameterized query (Prisma handles this)
  const user = await db.user.findUnique({
    where: { id },
    select: {
      id: true,
      email: true,
      name: true,
      // Never expose password hashes, tokens, etc.
    },
  });
  
  if (!user) {
    return NextResponse.json({ error: 'User not found' }, { status: 404 });
  }
  
  return NextResponse.json({ user });
}

Secure Session Management with JWT

Secure JWT session management with server-side validation, session revocation, and secure cookie configuration

secure-session-management-with-jwt.ts

typescript

// lib/auth/session.ts - Secure session management
import { SignJWT, jwtVerify } from 'jose';
import { cookies } from 'next/headers';
import { nanoid } from 'nanoid';
import { db } from '@/lib/db';

const SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

interface SessionPayload {
  userId: string;
  sessionId: string;
  expiresAt: number;
  role?: string;
}

export async function createSession(userId: string, role?: string): Promise<string> {
  const sessionId = nanoid();
  const expiresAt = Date.now() + 7 * 24 * 60 * 60 * 1000; // 7 days

  const token = await new SignJWT({ userId, sessionId, expiresAt, role })
    .setProtectedHeader({ alg: 'HS256' })
    .setIssuedAt()
    .setExpirationTime('7d')
    .setIssuer('example.com')
    .setAudience('example.com')
    .sign(SECRET);

  // Store session server-side for revocation
  await db.session.create({
    data: {
      id: sessionId,
      userId,
      role,
      expiresAt: new Date(expiresAt),
      ipAddress: 'req.ip', // Get from request
      userAgent: 'req.headers.user-agent', // Get from request
    },
  });

  // Set secure cookie
  (await cookies()).set('session', token, {
    httpOnly: true, // Prevent XSS
    secure: process.env.NODE_ENV === 'production', // HTTPS only
    sameSite: 'lax', // CSRF protection
    maxAge: 7 * 24 * 60 * 60, // 7 days
    path: '/',
  });

  return token;
}

export async function verifySession(): Promise<SessionPayload | null> {
  const cookieStore = await cookies();
  const token = cookieStore.get('session')?.value;

  if (!token) return null;

  try {
    const { payload } = await jwtVerify(token, SECRET, {
      issuer: 'example.com',
      audience: 'example.com',
    });

    // Verify session exists and is not revoked
    const session = await db.session.findUnique({
      where: { id: payload.sessionId as string },
    });

    if (!session || session.expiresAt < new Date() || session.revoked) {
      return null;
    }

    return payload as unknown as SessionPayload;
  } catch {
    return null;
  }
}

export async function deleteSession() {
  const session = await verifySession();
  
  if (session) {
    // Revoke server-side
    await db.session.update({
      where: { id: session.sessionId },
      data: { revoked: true },
    });
  }

  // Clear cookie
  (await cookies()).delete('session');
}

Environment Variable Validation with Zod

Environment variable validation with Zod to ensure all required security variables are properly configured

environment-variable-validation-with-zod.ts

typescript

// lib/env.ts - Environment variable validation
import { z } from 'zod';

const envSchema = z.object({
  NODE_ENV: z.enum(['development', 'production', 'test']),
  DATABASE_URL: z.string().url(),
  JWT_SECRET: z.string().min(32, 'JWT_SECRET must be at least 32 characters'),
  NEXTAUTH_URL: z.string().url(),
  NEXTAUTH_SECRET: z.string().min(32, 'NEXTAUTH_SECRET must be at least 32 characters'),
  UPSTASH_REDIS_REST_URL: z.string().url(),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(20),
  // Optional but validated if present
  SENTRY_DSN: z.string().url().optional(),
  ANALYTICS_ID: z.string().optional(),
});

// Validate at build time
function validateEnv() {
  try {
    return envSchema.parse(process.env);
  } catch (error) {
    if (error instanceof z.ZodError) {
      console.error('❌ Invalid environment variables:');
      error.errors.forEach((err) => {
        console.error(`  ${err.path.join('.')}: ${err.message}`);
      });
      process.exit(1);
    }
    throw error;
  }
}

// Export validated environment variables
export const env = validateEnv();

// Type-safe environment access
declare global {
  namespace NodeJS {
    interface ProcessEnv extends z.infer<typeof envSchema> {}
  }
}

Installation

Setup instructions and requirements

Configuration

Configuration settings and parameters

security-first-react-components.json

json

{
  "maxTokens": 8000,
  "temperature": 0.3,
  "systemPrompt": "You are a security-first React component architect focused on preventing vulnerabilities and implementing defense-in-depth patterns",
  "compatibleWith": [
    "Claude Code",
    "Claude Desktop",
    "Claude Web"
  ]
}

Security Best Practices

Important security considerations

Security-first React component patterns and XSS prevention techniques may expose security implementation details or defense strategies - ensure security patterns are kept private if they reveal sensitive security configurations
Content Security Policy configurations and nonce generation strategies may expose CSP implementation details - ensure CSP configurations are properly secured
Input validation schemas and sanitization patterns may reveal data structures or validation rules - review validation schemas for sensitive information before sharing
Secure authentication patterns and session management implementations may expose authentication mechanisms or session handling strategies - ensure authentication code is properly secured
Secure component implementations may expose security patterns or defense mechanisms - ensure component code is reviewed for sensitive security details
Environment variable validation and security configuration may expose required security variables or configuration patterns - ensure environment schemas don't reveal sensitive configuration details
CLAUDE.md rule content for security-first React components may expose team-specific security patterns, defense strategies, or security implementation details - ensure rule files are kept private if they contain sensitive organizational security information

Troubleshooting

Common issues and solutions

CSP blocking inline scripts/styles
Use nonce-based CSP with middleware injection. Generate unique nonce per request with nanoid. Apply nonce to Script components and style tags. Configure 'strict-dynamic' for script-src. Avoid 'unsafe-inline' in production.
DOMPurify not sanitizing correctly
Use isomorphic-dompurify for SSR compatibility. Configure ALLOWED_TAGS/ATTR restrictively. Enable RETURN_DOM_FRAGMENT: false. Add SAFE_FOR_TEMPLATES: false. Test with OWASP XSS vectors to verify sanitization.
URL validation bypassed with edge cases
Use URL constructor for parsing, not regex. Check protocol whitelist (http, https, mailto). Validate against dangerous protocols (javascript, data, vbscript). Test with protocol-relative URLs. Use rel=noopener noreferrer for external links.
Server Actions missing authentication
Add auth check at start of every action with await auth() or session validation. Return 401/403 errors for unauthorized access. Validate user ownership of resources. Use Zod schemas for input validation before DB operations.
CSRF tokens not working with forms
Enable Next.js built-in CSRF with cookies().set() in middleware. Use POST method for mutations. Include token in hidden input or header. Verify SameSite=Lax on session cookies. Check that requests include Origin/Referer headers.