"Fetch Metadata 请求头：Sec-Fetch-Site/Mode/Dest 的安全防护"

概述Fetch Metadata 是浏览器为每个请求附带的额外头，用于指示请求的来源关系（`Sec-Fetch-Site`）、模式（`Sec-Fetch-Mode`）与目标（`Sec-Fetch-Dest`）。站点可据此在服务端实施白名单与拒绝策略，降低跨站请求风险并保护敏感端点。示例：Node.js 中的访问控制（简化）function allowByFetchMetadata(req, res, next) { const site = req.headers['sec-fetch-site'] || 'same-origin' const mode = req.headers['sec-fetch-mode'] || 'navigate' const dest = req.headers['sec-fetch-dest'] || '' // 允许同源与 same-site 导航/资源，拒绝跨站非简单导航对敏感端点 const isCross = site === 'cross-site' const isSensitiveDest = ['script', 'fetch', 'image'].includes(dest) const isNavigation = mode === 'navigate' if (isCross && !isNavigation && isSensitiveDest) { return res.status(403).end('Blocked by Fetch Metadata policy') } next() } 示例：Nginx 基于 Metadata 的简易阻断（不同版本语法略有差异）map $http_sec_fetch_site $is_cross { default 0; cross-site 1; } map $http_sec_fetch_mode $is_nav { default 0; navigate 1; } server { location /api/secure { if ($is_cross = 1) { if ($is_nav = 0) { return 403; } } proxy_pass http://backend; } } 工程建议白名单优先：对关键写操作端点（POST/PUT/DELETE）实施更严格的跨站拒绝；结合 CSRF token 作为防护的第二道栅栏。细分目标：根据 `Sec-Fetch-Dest` 限制跨站脚本/图像/字体等敏感类型的获取。观测与灰度：记录被阻断请求以评估影响；逐步收紧策略，避免误杀合法同站嵌入。参考与验证web.dev Protect your resources with Fetch Metadata：https://web.dev/articles/fetch-metadataChrome 平台文档：https://developer.chrome.com/docs/privacy-security/fetch-metadata/