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/