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

---

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

keywords:

• Fetch Metadata
• Sec-Fetch-Site
• Sec-Fetch-Mode
• Sec-Fetch-Dest
• 跨站防护

description: 通过统一的Fetch Metadata门禁策略，基于Sec-Fetch-Site/Mode/Dest判断并拒绝跨站危险请求，降低CSRF与XS-Leaks风险。

categories:

• 文章资讯
• 编程技术

---

背景与价值

Fetch Metadata提供请求上下文信息。基于站点关系与模式/目标，网关可精确拒绝跨站危险请求，补强CSRF与XS-Leaks防护。

统一规范

• 状态变更：仅允许 same-origin/same-site 发起，拒绝 cross-site。
• 资源类型：对 navigate/form 严格限制 document/empty 与受控来源。
• 兜底策略：未知或缺失头时按最小权限拒绝。

核心实现

门禁策略

type Req = { method: string; headers: Record<string, string | undefined> }

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-* 是否完整；跨站状态变更是否被拒绝；兜底策略是否生效。