如何使用Javascript获取浏览器地址栏锁图标中展示的允许使用的Cookie

你无法通过常规前端方法读取这类Cookie的核心原因是，这类Cookie带HttpOnly安全标记，浏览器为了防范XSS攻击窃取敏感会话凭证，默认禁止所有前端JavaScript脚本读取这类Cookie，只能在HTTP/HTTPS请求发送时由浏览器自动携带，document.cookie接口只能读取到非HttpOnly标记的Cookie。
以下是不同场景下的可行方案：

可线上落地的生产级方案 #

如果你可以控制相关后端服务的逻辑，推荐使用以下实现：

• 后端在返回业务响应时，把你需要的SESSION_ID作为响应体的明文字段返回，前端直接从接口返回数据中取值即可
• 如果是跨域名跳转场景，可以在跳转的目标URL上拼接SESSION_ID的查询参数，或者由后端将SESSION_ID注入到跳转页面的全局JS变量中，前端读取全局变量取值即可

仅适用本地调试/自动化测试的方案 #

如果你没有后端修改权限，仅在本地开发或者做自动化测试时需要取值，可以用以下方法：

• 手动打开地址栏锁图标下的Cookie列表，复制SESSION_ID的值硬编码到调试代码中（仅本地使用，禁止线上环境这么做）
• 使用浏览器DevTools协议（CDP）相关工具读取所有Cookie，以Node.js生态的Puppeteer工具为例，示例代码如下：

const puppeteer = require('puppeteer');
(async () => {
  // 启动浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 打开目标页面
  await page.goto('你的目标页面访问地址');
  // 获取当前页面域名下的所有Cookie，包含HttpOnly类型
  const allCookies = await page.cookies();
  // 匹配目标SESSION_ID
  const targetSessionId = allCookies.find(cookie => cookie.name === 'SESSION_ID')?.value;
  console.log('获取到的SESSION_ID：', targetSessionId);
  await browser.close();
})();

注意：该方案只能在你可控的本地环境、自动化测试环境使用，普通用户的浏览器不会给前端页面开放CDP接口权限，无法在线上用户侧落地。

不建议尝试的方向 #

不要寻找前端绕过HttpOnly限制的方法，所有主流浏览器都严格遵守该安全规范，不存在公开可复用的绕过方案，任何宣称可以前端直接读取HttpOnly Cookie的方法要么是已经被修复的历史漏洞，要么是欺诈信息。

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