浏览器环境下如何通过Fetch获取Set-Cookie头？附LinkedIn场景方案

为什么Fetch方案不可行？ #

• 跨域拦截：LinkedIn的登录接口(/uas/login-submit)有严格的同源策略限制，普通网页环境下的Fetch请求会被浏览器直接拦截，返回状态码0。
• 响应头访问限制：Set-Cookie属于浏览器禁止前端JS直接读取的响应头（除非服务器主动配置Access-Control-Expose-Headers，但LinkedIn不会开放该权限），所以response.headers.get('Set-Cookie')会返回null。
• 反爬机制：LinkedIn会检测非浏览器环境的登录请求，模拟的Fetch请求会因为缺少必要的验证信息（如会话Cookie、行为特征）被拦截。

可行的Chrome扩展方案调整 #

Chrome扩展的webRequestAPI可以绕过前端的CORS限制，直接捕获响应头，但需要正确配置权限和监听逻辑：

1. 扩展Manifest配置（必填） #

在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "name": "LinkedIn Cookie Capture",
  "version": "1.0",
  "permissions": ["webRequest", "cookies", "activeTab"],
  "host_permissions": ["https://*.linkedin.com/*"],
  "background": {
    "service_worker": "background.js"
  }
}

• webRequest：允许监听网络请求
• cookies：支持直接读取Cookie（可选，用于替代响应头提取）
• host_permissions：必须指定LinkedIn域名，否则无法监听目标请求

2. 修正后的监听代码（background.js） #

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 仅监听登录提交接口的响应
    if (details.url.includes('/uas/login-submit')) {
      details.responseHeaders.forEach(header => {
        if (header.name.toLowerCase() === 'set-cookie') {
          // 提取JSESSIONID
          const jsessionMatch = header.value.match(/JSESSIONID=([^;]+)/);
          if (jsessionMatch) {
            console.log('提取到JSESSIONID:', jsessionMatch[1]);
            // 可在此将值存储或传递给扩展其他模块
          }
        }
      });
    }
  },
  { urls: ["https://*.linkedin.com/*"] },
  ["responseHeaders", "extraHeaders"] // 必须声明才能获取完整响应头
);

3. 注意事项 #

• 必须使用Manifest V3版本（V2已被Chrome弃用）
• 确保扩展已启用并获得对应权限
• 登录请求需通过浏览器正常访问LinkedIn页面提交，模拟登录需要额外处理验证码等反爬验证

替代方案：直接读取Cookie #

若只需获取已存在的JSESSIONID，可直接用Chrome扩展的cookiesAPI读取：

chrome.cookies.get({
  url: "https://www.linkedin.com",
  name: "JSESSIONID"
}, (cookie) => {
  if (cookie) {
    console.log('JSESSIONID:', cookie.value);
  } else {
    console.log('未找到JSESSIONID');
  }
});

此方法更直接，前提是用户已通过浏览器完成LinkedIn登录，Cookie已存在。

内容的提问来源于stack exchange，提问作者kunal