Next.js 15 CSRF 防护 SameSite Double Submit 与 Server Actions 校验实践

概览CSRF 防护通过限制第三方上下文的 Cookie 携带与验证请求中的防伪 Token 来实现可信提交。结合 SameSite 与 Double Submit，可在不依赖状态存储的情况下实现稳健校验。生成 Token 与设置 Cookieapp/login/page.tsximport { cookies } from 'next/headers'

export default async function Login() {

const token = crypto.randomUUID()

cookies().set('csrf', token, { httpOnly: true, sameSite: 'lax', path: '/' })

return (

<form action={action}>

<input name="email" />

<input type="hidden" name="csrf" value={token} />

<button>提交</button>

</form>

)

}

async function action(formData: FormData) {

'use server'

const cookie = cookies().get('csrf')?.value

const token = String(formData.get('csrf') || '')

if (!cookie || cookie !== token) {

throw new Error('Invalid CSRF')

}

return { ok: true }

}

治理要点设置 Cookie `SameSite=lax`，避免跨站上下文自动携带；对敏感场景使用 `strict` 并配合跳转策略。Double Submit 不依赖服务端会话存储；对高安全场景可采用会话存储或一次性 Token。与 HTTPS、CSP、Trusted Types 等协同，形成系统性防护。验证与指标浏览器：现代浏览器；Next.js：15.0+跨站提交被拦截；可信来源提交通过，错误场景反馈清晰