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 层进行白名单治理，可有效降低跨站滥用与异常上下文的风险。