How to Fix Cross-Site Request Forgery (CSRF) in Next.js
Learn how to prevent and fix Cross-Site Request Forgery (CSRF) vulnerabilities in Next.js applications. Step-by-step guide with code examples, security checklists, and best practices.
What Is Cross-Site Request Forgery (CSRF)?
Cross-Site Request Forgery (CSRF) is an attack that tricks an authenticated user into submitting a request they did not intend to make. The attack exploits the fact that browsers automatically include cookies (including session cookies) with every request to a domain, regardless of the request's origin.
An attacker crafts a malicious page or email containing a request to the target application. When an authenticated user visits the attacker's page, their browser automatically sends the request along with valid session cookies. The target application cannot distinguish this forged request from a legitimate one. CSRF attacks can change email addresses, transfer funds, modify account settings, or perform any action the authenticated user is authorized to do.
The attack is particularly effective because it does not require the attacker to steal the user's credentials -- it simply leverages the existing authenticated session. Modern single-page applications using token-based authentication (like JWT in headers) are naturally resistant to CSRF since custom headers are not automatically attached to cross-origin requests, but cookie-based authentication remains vulnerable without explicit protections.
Why It Matters
CSRF attacks can have serious consequences because they execute actions with the full authority of the victim user. In financial applications, CSRF can initiate unauthorized transfers. In administrative panels, it can create new admin accounts or change security settings. Because the requests come from the legitimate user's browser with valid authentication, they are difficult to detect and trace. CSRF attacks are also easy to execute at scale -- an attacker can embed the malicious request in a popular website, forum post, or advertising network, potentially affecting thousands of users simultaneously.
How to Fix It in Next.js
Implement anti-CSRF tokens: generate a unique, unpredictable token for each user session and include it in every state-changing request. The server validates this token before processing the request. Use the SameSite cookie attribute (set to "Lax" or "Strict") to prevent cookies from being sent with cross-origin requests. Verify the Origin and Referer headers on the server side. Require re-authentication for sensitive operations like changing passwords or email addresses. Use framework-provided CSRF protection (Next.js Server Actions have built-in CSRF protection, Django includes CSRF middleware, Express has csurf). For APIs, prefer token-based authentication sent via custom headers rather than cookies.
Next.js-Specific Advice
- Use Server Components for data fetching to keep secrets off the client bundle. Only `NEXT_PUBLIC_` prefixed env vars are exposed to the browser.
- Enable strict Content Security Policy headers in `next.config.js` using the `headers()` function. Block inline scripts and restrict allowed origins.
- Validate all Server Action inputs with Zod or a similar schema validator. Server Actions are public HTTP endpoints -- treat them like API routes.
- Use `next/headers` to access cookies securely in Server Components. Never parse cookies manually from request headers.
Code Examples
// app/api/transfer/route.ts
// DANGEROUS -- no CSRF protection on state-changing operation
export async function POST(request: Request) {
const { to, amount } = await request.json();
await transferFunds(to, amount);
return Response.json({ success: true });
}// Option 1: Server Action (has built-in CSRF protection)
"use server";
import { z } from "zod";
const TransferSchema = z.object({
to: z.string().uuid(),
amount: z.number().positive(),
});
export async function transferAction(formData: FormData) {
const parsed = TransferSchema.parse({
to: formData.get("to"),
amount: Number(formData.get("amount")),
});
await transferFunds(parsed.to, parsed.amount);
}
// Option 2: API route with Origin header validation
export async function POST(request: Request) {
const origin = request.headers.get("origin");
const host = request.headers.get("host");
if (!origin || new URL(origin).host !== host) {
return Response.json({ error: "Forbidden" }, { status: 403 });
}
// ... process request
}Next.js Security Checklist for Cross-Site Request Forgery (CSRF)
Next.js Security Best Practices
Use Server Components for data fetching to keep secrets off the client bundle. Only `NEXT_PUBLIC_` prefixed env vars are exposed to the browser.
Enable strict Content Security Policy headers in `next.config.js` using the `headers()` function. Block inline scripts and restrict allowed origins.
Validate all Server Action inputs with Zod or a similar schema validator. Server Actions are public HTTP endpoints -- treat them like API routes.
Use `next/headers` to access cookies securely in Server Components. Never parse cookies manually from request headers.
Configure `images.remotePatterns` in `next.config.js` to allowlist trusted image domains and prevent SSRF through the image optimization API.
Implement middleware-based authentication checks for protected routes using `NextResponse.redirect()` rather than client-side guards alone.
Use the built-in CSRF protection in Server Actions. For custom API routes, implement CSRF tokens manually or use the Origin header check.
Set `poweredByHeader: false` in `next.config.js` to remove the `X-Powered-By: Next.js` header that helps attackers fingerprint your stack.
Scan Your Next.js App with SafeVibe
Stop guessing if your Next.js app is vulnerable to Cross-Site Request Forgery (CSRF). Run an automated penetration test in minutes and get actionable results.
Start Free Scan