读取 Service Worker 中的请求标头

Question

我创建了一个非常基本的 service worker，它在fetch事件上记录请求标头：

self.addEventListener('fetch', event => {
  console.log("- Fetch -");
  for (const pair of event.request.headers.entries()) {
    console.log(pair[0]+ ': '+ pair[1]);
  }
});

在主页上，我正在获取相同的页面，如下所示：

function fetchPage() {
   fetch(location.href);
}

记录标题时，我只得到以下 2 个标题：

- Fetch -
service-worker.js:12 accept: */*
service-worker.js:12 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

为什么我看不到任何其他/自定义标题？
这是安全限制吗？

Answer 1

是的，这些标头是故意隐藏的。标头列表和请求对象的一般行为在Fetch 标准中指定。

该规范中的非规范部分“HTTP header 层划分”解释了请求分三个阶段进行，所有这些阶段都可能修改 header 列表，而依赖 Fetch 和 Service Worker 规范的客户端代码只能访问前两个阶段。因此，您的服务工作线程在添加其他标头之前就收到了标头列表。

Fetch 规范还包括禁止的标头名称列表，客户端代码在任何情况下都无法设置这些标头名称；这些标头完全由用户代理控制。还有其他机制限制客户端代码访问标头列表，例如与 CORS 相关的机制。

这一切的原因确实是安全性：这保证了某些标头无法被尝​​试执行请求伪造的恶意脚本代码读取或篡改（制作服务器可能依赖的来自可信来源的恶意标头）、浏览器指纹识别（通过 HTTP 标头识别用户）或秘密提取（例如，从请求标头中提取 cookie）。