Securing Next.js Applications Against OWASP Top 10 Vulnerabilities

As web applications transition to full-stack React frameworks like Next.js, traditional security boundaries between server and client undergo significant evolution.

Features such as React Server Components, Server Actions, Route Handlers, and Edge Middleware offer immense productivity, but they also introduce unique security vectors if mishandled.

This guide details concrete defensive practices for securing Next.js applications against common OWASP vulnerabilities.

1. Preventing Cross-Site Scripting (XSS) and Injection

React automatically escapes variables rendered in JSX templates. However, XSS risks re-emerge when using dangerouslySetInnerHTML, user-controlled URLs, or unvalidated rich text content.

Dangerous Pattern

// ❌ Vulnerable to DOM-based XSS via javascript: URLs
function UserLink({ profileUrl, name }: { profileUrl: string; name: string }) {
  return <a href={profileUrl}>{name}</a> // If profileUrl is "javascript:stealCookies()"
}

Secure Sanitization Pattern

// ✅ Secure Pattern: Protocol Validation & Sanitization
export function isValidHttpUrl(url: string): boolean {
  try {
    const parsed = new URL(url, "https://example.com")
    return parsed.protocol === "http:" || parsed.protocol === "https:"
  } catch {
    return false
  }
}

function UserLink({ profileUrl, name }: { profileUrl: string; name: string }) {
  const safeUrl = isValidHttpUrl(profileUrl) ? profileUrl : "#"
  return <a href={safeUrl} rel="noopener noreferrer">{name}</a>
}

2. Hardening Content Security Policy (CSP) Headers

A robust Content Security Policy (CSP) is your application's primary defense against malicious third-party script injection and inline script execution.

Configure HTTP security headers in next.config.mjs:

const securityHeaders = [
  {
    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=()',
  },
]

3. Securing Next.js Server Actions

Server Actions are public HTTP endpoints (POST requests) exposed by Next.js under the hood. Never assume a Server Action can only be invoked by your frontend components.

Vulnerable Server Action

// ❌ Dangerous: Trusting client input without authentication or authorization checks
"use server"

export async function deleteDocument(documentId: string) {
  // Vulnerable to IDOR! Anyone can post any documentId
  await db.document.delete({ where: { id: documentId } })
}

Hardened Server Action

// ✅ Secure: Strict Authentication, Authorization, and Zod Validation
"use server"

import { z } from "zod"
import { getSession } from "@/lib/auth"

const deleteSchema = z.object({
  documentId: z.string().uuid(),
})

export async function deleteDocument(input: { documentId: string }) {
  const session = await getSession()
  if (!session || !session.user) {
    throw new Error("Unauthorized")
  }

  const { documentId } = deleteSchema.parse(input)

  // Verify ownership before executing deletion
  const doc = await db.document.findUnique({ where: { id: documentId } })
  if (!doc || doc.ownerId !== session.user.id) {
    throw new Error("Forbidden")
  }

  await db.document.delete({ where: { id: documentId } })
  return { success: true }
}

4. Environment Variable Leak Prevention

In Next.js, any environment variable prefixed with NEXT_PUBLIC_ is bundled into client JavaScript visible to the browser.

Always audit bundle outputs to verify that private secrets (*_SECRET_*, DATABASE_URL, API_KEYS) are never prefixed with NEXT_PUBLIC_.

Next.js Security Hardening Checklist

• Verify security headers (X-Frame-Options, X-Content-Type-Options, CSP) in production response.
• Validate and authenticate all Next.js Server Actions and Route Handlers.
• Sanitize external URLs and user HTML inputs using DOMPurify or Zod schema constraints.
• Audit .env variables to ensure private secrets lack NEXT_PUBLIC_ prefixes.
• Use npm audit or pnpm audit in CI/CD pipelines to detect vulnerable dependencies.

Final Thoughts

Security is an ongoing architectural commitment. By combining CSP security headers, strict input validation with Zod, session validation on Server Actions, and environment secret discipline, engineering teams protect application infrastructure against enterprise security threats.