Next.js 15 Fetch Metadata 防护 Sec-Fetch-Site-Mode-Dest 治理实践

核心价值使用浏览器自动附带的 Fetch Metadata 头识别请求上下文，从源头阻断跨站攻击面。对 `site`、`mode`、`dest` 进行白名单治理，提升入口的可预期性与安全性。Middleware 实现import { NextResponse, NextRequest } from 'next/server' const ALLOW_SITE = new Set(['same-origin', 'same-site']) const ALLOW_MODE = new Set(['navigate', 'cors', 'same-origin']) const ALLOW_DEST = new Set(['document', 'empty', 'image', 'style', 'script']) export function middleware(req: NextRequest) { const site = req.headers.get('sec-fetch-site') || '' const mode = req.headers.get('sec-fetch-mode') || '' const dest = req.headers.get('sec-fetch-dest') || '' if (!ALLOW_SITE.has(site)) { return new NextResponse('Forbidden', { status: 403 }) } if (mode && !ALLOW_MODE.has(mode)) { return new NextResponse('Forbidden', { status: 403 }) } if (dest && !ALLOW_DEST.has(dest)) { return new NextResponse('Forbidden', { status: 403 }) } return NextResponse.next() } export const config = { matcher: ['/((?!_next|api/public).*)'] } 治理建议对 API 子路径可放宽 `mode` 白名单，但保留 `site` 限制；对敏感路由可仅接受 `same-origin`。与 CSRF、防 XSS 的 CSP/Trusted Types 合作，形成全链路防护。结论Fetch Metadata 是现代浏览器提供的低成本入口防护机制。在 Middleware 层进行白名单治理，可有效降低跨站滥用与异常上下文的风险。