在浏览器开发工具中跟踪 cookie 创建

Question

我正在尝试了解网站的登录过程

我登录后，它会创建一个 cookie，但我找不到哪个代码正在创建此 cookie

我使用了 firefox devTools，我可以看到在将数据发布到登录页面后，下一个请求包含该特定的 cookie，但前一个请求的响应都没有任何标头来创建该 cookie

我在每个js文件中搜索了document.cookie，并在每一行上设置了断点，但没有一个触发该cookie创建

我在登录前在控制台中注入了这段代码，但仍然没有成功

origDescriptor = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie');
Object.defineProperty(document, 'cookie', {
  get() {
    return origDescriptor.get.call(this);
  },
  set(value) {
    debugger;
    return origDescriptor.set.call(this, value);
  },
  enumerable: true,
  configurable: true
});

我猜该网站是用 Angular 编写的（ng-version =“17.0.8”）

还有其他方法来创建cookie吗？我自己是一名Web开发人员，我一直认为只能通过js和http响应头来创建cookie

P.S：我在谷歌上搜索了一下，看到了一些关于 firebug 和在 cookie 创建时创建断点的能力的帖子，但它似乎已被 firefox dev 版本取代，而这个没有这种能力

Answer 1

据我所知，DevTools 目前没有提供一种简单的方法来查看 cookie 的来源。因此，我在很多年前为 Firefox DevTools 创建了一个功能请求。

虽然没有直接的方法来查看 cookie 的来源，但您仍然可以找到它的设置位置。

你说得对，cookie 只能通过 HTTP 标头或在 JavaScript 中设置。对于通过

document.cookie

 设置 cookie 的情况，您的方法是正确的。

但请注意，您需要在第一个 JavaScript 语句上设置该代码以捕获设置 cookie 的所有情况。 为此，Firefox 和 Chrome DevTools 提供了一个选项，可以在调试器/源面板中的Event Listener Breakpoints窗格中名为 Script > Script First Statement 的第一个语句处停止脚本执行。

请注意，除了

document.cookie

之外，还有一个较新的

Cookie Store API，它允许通过cookieStore.set()设置cookie。因此，您还可以拦截对该 API 的调用（如果存在）以查看 cookie 是否以这种方式设置。

为了查明 cookie 是否是通过响应标头设置的，Firefox 和 Chrome DevTools 都在其网络面板中提供了一个过滤器来执行此操作。 该过滤器称为

set-cookie-name:

。输入后，所有设置的 cookie 都会自动完成，不过您也可以明确输入要搜索的 cookie 名称。
在 Chrome 中看起来像这样：

在 Firefox 中，过滤器如下所示：

重要的是，您可以在页面加载时保留请求日志。因此，在登录之前，您需要在 Firefox DevTools 中设置Persist Logs选项，该选项可在“网络”面板的设置菜单中找到

在 Chrome DevTools 的网络面板中，此选项称为

保留日志，位于选项栏中。

这些功能应该允许您了解 cookie 的设置方式。