网页源代码里Cookie藏哪儿？

核心概念：为什么在 HTML 源代码中找不到 Cookie？

这是一个安全和架构设计问题。

1. 客户端 vs. 服务器端：

   • 服务器：当服务器响应你的浏览器请求时，它可以在 HTTP 响应头中设置 Set-Cookie，这个指令告诉浏览器：“请把这个信息存储起来，并在未来的请求中发给我”。
   • 浏览器：浏览器接收到这个指令后，会将 Cookie 存储在本地。
   • HTML 源代码：HTML 是服务器发送给浏览器的内容，它本身不包含 Set-Cookie 指令，这个指令是在 HTTP 协议的“元数据”（响应头）部分，而不是在 HTML 文本的“正文”部分。

2. 安全性：Cookie（特别是包含敏感信息的 Session ID）直接暴露在 HTML 源代码中，任何能看到这个页面源代码的人（比如共享电脑的用户）都能轻易地窃取你的身份信息，这非常危险。

3. JavaScript 的访问限制：出于同样的安全原因，JavaScript 中的 document.cookie 属性只能读取和写入与当前域名相关的 Cookie，你无法通过 JavaScript 读取其他网站的 Cookie。

正确的查找方法：使用浏览器开发者工具

这才是查看 Cookie 的正确途径，以最常用的 Chrome 和 Firefox 浏览器为例，步骤几乎完全相同。

操作步骤：

1. 打开开发者工具：

   • 在你想要查看 Cookie 的网页上，按下键盘快捷键 F12。
   • 或者,在页面空白处点击鼠标右键，选择“检查”（Inspect）。

2. 切换到 "Network" (网络) 标签页：

   在开发者工具顶部,找到并点击 "Network" (网络) 标签。

3. 刷新页面：

   
   （图片来源网络，侵删）
   • 为了捕获所有网络请求,刷新当前页面（按 F5 或 Ctrl+R），你会看到下方列表中出现大量的网络请求。

4. 查找并检查请求：

   • 在请求列表中,找到那个对 主域名 的请求（通常是第一个或包含 的请求，https://www.example.com/）。
   • 点击这个请求，以查看其详细信息。

5. 查看 "Headers" (标头) 部分：

   • 在右侧出现的面板中,切换到 "Headers" (标头) 标签。

   • 向下滚动,找到名为 Request Headers (请求标头) 的区域。

   • 你会看到 Cookie 这一行，它后面的值就是你的浏览器在向这个网站发送请求时所携带的所有 Cookie。

   • 如果你关心的是服务器是如何设置这些 Cookie 的，可以在请求列表中找到对应的响应（比如对某个 API 的请求），然后在右侧面板的 "Headers" -> "Response Headers" (响应标头) 中查找 Set-Cookie。

另一种方法：使用 "Application" (应用) 标签页 (更直观)

对于只想查看和管理本地存储的 Cookie，这个方法更简单。

1. 打开开发者工具 (F12 或 右键“检查”)。

2. 切换到 "Application" (应用) 标签页：

   • 在 Chrome 中，这个标签叫 "Application"。
   • 在 Firefox 中，这个标签叫 "Storage" (存储)。

3. 导航到 Cookie：

   • 在左侧边栏中,展开 Storage (存储)。
   • 然后展开 Cookies (Cookie)。
   • 点击你当前网站的域名（www.example.com）。

4. 查看 Cookie 列表：

   • 右侧会显示一个清晰的表格,列出了所有该域名下的 Cookie，包括：
     • Name (名称)
     • Value (值)：这是你通常最关心的部分。
     • Domain (域名)
     • Path (路径)
     • Expires / Max-Age (过期时间)
     • Size (大小)
     • HttpOnly (是否仅限HTTP)
     • Secure (是否安全)

不要再尝试在网页的“查看源代码”中寻找 Cookie 了，请使用 浏览器开发者工具，通过 Application (或 Storage) 标签页来查看和管理 Cookie，这是最标准、最有效的方法。