Next.js 15 Fetch Metadata 防跨站请求滥用治理实践

正文浏览器在发起请求时会携带 Fetch Metadata（`Sec-Fetch-*`）头标识来源关系与目的。利用该信号可在边缘对跨站非导航的状态变更请求进行拒绝，降低 CSRF 与跨站滥用风险。一、中间件基于 Fetch Metadata 的拒绝策略import { NextRequest, NextResponse } from 'next/server' export function middleware(req: NextRequest) { const site = req.headers.get('sec-fetch-site') || '' const mode = req.headers.get('sec-fetch-mode') || '' const method = req.method const cross = site === 'cross-site' const stateChanging = method === 'POST' || method === 'PUT' || method === 'PATCH' || method === 'DELETE' const nonNavigate = mode !== 'navigate' if (cross && stateChanging && nonNavigate) { return new NextResponse('Forbidden', { status: 403 }) } const res = NextResponse.next() res.headers.set('Vary', 'Sec-Fetch-Site, Sec-Fetch-Mode, Sec-Fetch-Dest') return res } 二、治理要点阻断条件：跨站且为变更方法且非导航模式，拒绝为 403；同站或导航模式的正常访问不受影响。缓存维度：为响应设置 `Vary: Sec-Fetch-*`，避免不同来源模式下缓存污染导致的错误复用。与 CSRF 防护协同：此策略与 Token/双提交 Cookie 协同使用，可进一步降低跨站风险。三、验证与监控结合前述 Reporting API 与日志平台记录 403 命中率，分来源分析影响面；逐步微调规则以降低误杀。