---

title: Fetch Metadata 请求元数据安全治理：Sec-Fetch 头与跨站威胁缓解实践

tags: [Fetch Metadata, Sec-Fetch-Site, Sec-Fetch-Mode, Sec-Fetch-Dest, CSRF]

description: 使用 Fetch Metadata 请求头在后端识别请求来源与意图，阻止跨站非预期访问与CSRF，提升接口与资源的安全性，附验证覆盖与误拦指标。

categories:

• 文章资讯
• 技术教程

---

背景与价值

• 浏览器在请求中附带 Sec-Fetch-* 头，表达来源与上下文；服务端据此识别与拦截潜在跨站风险。

后端治理（Node/Express 示例）

app.use((req, res, next) => {
  const site = String(req.headers['sec-fetch-site'] || 'same-origin');
  const mode = String(req.headers['sec-fetch-mode'] || 'navigate');
  const dest = String(req.headers['sec-fetch-dest'] || 'document');
  if (site === 'cross-site' && mode !== 'navigate') return res.status(403).end();
  next();
});

静态资源与嵌入防护

• 对脚本/样式/图片等资源，根据 dest 与 site 做白名单控制；不允许跨站脚本直接请求敏感资源。

指标验证（Chrome 128/Edge 130）

• 拦截覆盖率：跨站非导航请求拦截 ≥ 99%。
• 误拦率：≤ 0.5%（合理白名单与例外后）。

回退策略

• 不支持或代理剥离：结合 Origin/Referer 与 CSRF Token 双重校验。

测试清单

• 跨站脚本/iframe 发起的资源与接口请求被拦截；同站正常。