Server Actions CSRF Protection - Need Confirmation
Answered
American black bear posted this in #help-forum
American black bearOP
According to the Next.js security docs, Server Actions have built-in CSRF protection:
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
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?
"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
with
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 URL4 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
with
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 URLAnswer
American black bearOP
and by using /api/form, you also mean that I would have
and by using proper server action i don't have to worry about it, because nextjs handles it for me
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 !