Fetch Metadata请求门禁与跨站防护（Sec-Fetch-Site/Mode/Dest）最佳实践

背景与价值 Fetch Metadata提供请求上下文信息。基于站点关系与模式/目标，网关可精确拒绝跨站危险请求，补强CSRF与XS-Leaks防护。 统一规范 - 状态变更：仅允许 `same-origin/same-site` 发起，拒绝 `cross-site`。 - 资源类型：对 `navigate/form` 严格限制 `document`/`empty` 与受控来源。 - 兜底策略：未知或缺失头时按最小权限拒绝。 核心实现 门禁策略 ```ts type Req = { method: string; headers: Record } function h(req: Req, k: string): string { return (req.headers[k] || '').toLowerCase() } function siteOk(req: Req): boolean { const s = h(req, 'sec-fetch-site') if (['same-origin','same-site'].includes(s)) return true if (s === 'cross-site') return false return false } function modeOk(req: Req): boolean { const m = h(req, 'sec-fetch-mode') if (!m) return false return ['same-origin','cors','navigate'].includes(m) } function destOk(req: Req): boolean { const d = h(req, 'sec-fetch-dest') if (!d) return false return ['document','empty','script','style','image','fetch'].includes(d) } function isStateChanging(method: string): boolean { return ['post','put','patch','delete'].includes(method.toLowerCase()) } function gate(req: Req): boolean { if (!modeOk(req) || !destOk(req)) return false if (isStateChanging(req.method)) return siteOk(req) return true } ``` 落地建议 - 在网关对所有请求执行Fetch Metadata门禁，状态变更仅允许同源/同站请求。 - 对缺失或未知头按最小权限拒绝并记录审计以识别异常客户端。 验证清单 - `Sec-Fetch-*` 是否完整；跨站状态变更是否被拒绝；兜底策略是否生效。