Next.js Discord

Discord Forum

Server Actions CSRF Protection - Need Confirmation

Answered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
According to the Next.js security docs, Server Actions have built-in CSRF protection:

"Server Actions are always implemented using POST and only this HTTP method is allowed to invoke them. This alone prevents most CSRF vulnerabilities in modern browsers, particularly due to Same-Site cookies being the default.
As an additional protection Server Actions in Next.js 14 also compares the Origin header to the Host header (or X-Forwarded-Host). If they don't match, the Action will be rejected."

https://nextjs.org/blog/security-nextjs-server-components-actions

My architecture:

- Next.js 14 App Router (public facing)
- Separate backend in a private network (cannot be reached from the internet)
- Session-based auth using encrypted cookies
All backend communication through Server Actions

Flow:

1. User submits login form → Server Action → Private Backend
2. Backend validates and returns encrypted session cookie
3. Next.js sets this cookie in the browser
4. Future requests: Server Action reads cookie and forwards to backend



// All mutations go through Server Actions like this
export async function updateProfile(formData: FormData) {
  const sessionCookie = cookies().get('session');
  
  await fetch('http://private-backend/api/profile', {
    method: 'PUT',
    headers: { 'Cookie': `session=${sessionCookie.value}` },
    body: formData
  });
}

Question: Given that:

1. Backend is not publicly accessible (private network)
2. All mutations use Server Actions (no custom route.tsx)
3. Cookies are httpOnly + SameSite=Lax

Am I correct that Next.js's built-in CSRF protection (Origin/Host check) is sufficient? Or do I need additional CSRF tokens in this architecture?
Answered by joulev
nextjs provides built in csrf protections, you dont need to do anything regarding csrf yourself

the only time you need to worry about csrf in nextjs is if you do something like this
<form action="/api/form" method="post">

with action being a string pointing to a URL
View full answer

4 Replies

@American black bear According to the Next.js security docs, Server Actions have built-in CSRF protection: > "Server Actions are always implemented using POST and only this HTTP method is allowed to invoke them. This alone prevents most CSRF vulnerabilities in modern browsers, particularly due to Same-Site cookies being the default. > As an additional protection Server Actions in Next.js 14 also compares the Origin header to the Host header (or X-Forwarded-Host). If they don't match, the Action will be rejected." https://nextjs.org/blog/security-nextjs-server-components-actions My architecture: - Next.js 14 App Router (public facing) - Separate backend in a private network (cannot be reached from the internet) - Session-based auth using encrypted cookies All backend communication through Server Actions Flow: 1. User submits login form → Server Action → Private Backend 2. Backend validates and returns encrypted session cookie 3. Next.js sets this cookie in the browser 4. Future requests: Server Action reads cookie and forwards to backend typescript // All mutations go through Server Actions like this export async function updateProfile(formData: FormData) { const sessionCookie = cookies().get('session'); await fetch('http://private-backend/api/profile', { method: 'PUT', headers: { 'Cookie': `session=${sessionCookie.value}` }, body: formData }); } Question: Given that: 1. Backend is not publicly accessible (private network) 2. All mutations use Server Actions (no custom route.tsx) 3. Cookies are httpOnly + SameSite=Lax Am I correct that Next.js's built-in CSRF protection (Origin/Host check) is sufficient? Or do I need additional CSRF tokens in this architecture?
nextjs provides built in csrf protections, you dont need to do anything regarding csrf yourself

the only time you need to worry about csrf in nextjs is if you do something like this
<form action="/api/form" method="post">

with action being a string pointing to a URL
Answer
American black bearOP
and by using /api/form, you also mean that I would have api route e.g. a route.tsx which would then be vulnerable right?
and by using proper server action i don't have to worry about it, because nextjs handles it for me
yeah correct. so there is nothing you need to do
American black bearOP
Great thank you !