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

# 背景与价值 - 浏览器在请求中附带 `Sec-Fetch-*` 头，表达来源与上下文；服务端据此识别与拦截潜在跨站风险。 # 后端治理（Node/Express 示例） ```ts 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 发起的资源与接口请求被拦截；同站正常。