浏览器自动携带cookie注意事项

浏览器自动携带与目标域相关的 cookie 是由 HTTP 协议规范和浏览器设计共同决定的

HTTP Cookie - HTTP | MDN

前端必要懂的，完整的 HTTP cookie 指南 - 终身学习者 - SegmentFault 思否

一、Cookie 携带的基本规则

1. 同源策略下的自动携带

   如果请求的 ​URL 域名、路径、协议与 Cookie 设置的 Domain 和 Path 属性匹配，浏览器会自动将符合条件的 Cookie 附加到请求头的 Cookie 字段中

   示例

   • Cookie 设置 Domain=example.com，请求 URL 为 https://example.com/api → 携带。
   • Cookie 设置 Path=/login，请求 URL 为 https://example.com/login/submit → 携带。

2. 跨域请求的受限携带

   一、服务器端配置

   1. 跨域请求中 cookie 的携带受到 CORS（跨域资源共享）的限制。默认情况下，浏览器不会在跨域请求中发送 cookie，除非服务器明确允许。这是因为如果服务器没有配置 CORS 头，浏览器会认为该请求不安全，从而阻止 cookie 的发送。
   2. 为了允许跨域请求携带 cookie，服务器需要返回特定的响应头。例如，设置 Access-Control-Allow-Origin 为请求的源，而不是通配符 *，因为 * 不允许携带 cookie。此外，还需要设置 Access-Control-Allow-Credentials 为 true，这样浏览器才会发送 cookie。
   3. 根据需求配置 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等
   4. Cookie 的 SameSite 属性未设置为 Strict 或 Lax。若需跨站携带，需设置为 SameSite=None; Secure（仅限 HTTPS）

   二、客户端配置

   在发起跨域请求时，需显式指定携带 Cookie：

   • 使用 JavaScript（如 fetch）

     fetch('https://api.example.com/data', {
       credentials: 'include' // 携带 Cookie
     });
     

   • 使用 XMLHttpRequest

     xhr.withCredentials = true;
     

   三、 常见错误及注意事项

   • 错误 1：服务器返回 Access-Control-Allow-Origin: * 时，无法携带 Cookie。
     解决：必须指定具体源，而非 *。
   • 错误 2：服务器未返回 Access-Control-Allow-Credentials: true。
     解决：添加该响应头。
   • 第三方 Cookie 限制：
     浏览器可能会阻止第三方 Cookie（如从 <iframe> 发起的跨域请求），需用户手动允许或调整浏览器设置。

二、Cookie 属性的筛选逻辑

​ 浏览器会根据 Cookie 的以下属性决定是否发送：

三、浏览器携带cookie的准则

1. Cookie 的作用域（Domain 和 Path）

• Domain（域名）：
  • Cookie 会被发送到其 Domain 属性指定的域名。如果 Domain 属性设置为 example.com，那么在访问 example.com 及其子域名（如 sub.example.com）时，该 Cookie 会被发送。
  • 如果没有设置 Domain 属性，则默认为当前页面的域名。
• Path（路径）：
  • Cookie 会被发送到其 Path 属性指定的路径及其子路径。例如，如果 Path 属性设置为 /user，那么在访问 /user、/user/profile 等路径时，该 Cookie 会被发送，但在访问 /admin 时不会发送。
  • 如果没有设置 Path 属性，默认为当前页面的路径。

2. Secure 属性

• 如果 Cookie 的 Secure 属性被设置为 true，那么该 Cookie 只会通过 HTTPS 协议发送，不会通过 HTTP 协议发送。这是为了防止 Cookie 在不安全的网络中被窃取。
• 如果请求是通过 HTTP 发起的，那么带有 Secure 属性的 Cookie 不会被发送。

3. HttpOnly 属性

• 如果 Cookie 的 HttpOnly 属性被设置为 true，那么该 Cookie 不能通过 JavaScript 的 document.cookie 访问，但仍然会通过 HTTP 请求发送到服务器。
• 这个属性主要用于防止 XSS（跨站脚本攻击）。

4. SameSite 属性

• SameSite=Lax：
  • Cookie 只会在同站请求中发送。在跨站请求中，只有在请求是 GET 请求且是导航操作（如链接点击）时，Cookie 才会被发送。
• SameSite=Strict：
  • Cookie 只会在同站请求中发送，即使在跨站的 GET 请求中也不会发送。
• SameSite=None：
  • Cookie 在同站和跨站请求中都会发送，但需要同时设置 Secure 属性，否则浏览器不会发送该 Cookie。
• 如果没有设置 SameSite 属性，浏览器会默认按照 Lax 或 None 的行为处理，具体取决于浏览器的实现。

5. Cookie 的过期时间（Expires/Max-Age）

• 如果 Cookie 已经过期（Expires 属性指定的时间已到），那么浏览器不会发送该 Cookie。
• 如果设置了 Max-Age 属性，Cookie 的有效期会根据 Max-Age 的值计算。

6. Cookie 的数量和大小限制

• 浏览器对每个域名的 Cookie 数量和总大小有限制。例如，大多数浏览器允许每个域名最多存储 20 个 Cookie，总大小不超过 4KB。
• 如果 Cookie 数量或大小超出限制，浏览器可能会丢弃一些旧的 Cookie。

7. 请求的类型

• 对于跨站请求（即请求的域名与当前页面的域名不同），浏览器会根据 SameSite 属性决定是否发送 Cookie。
• 对于同站请求（即请求的域名与当前页面的域名相同），浏览器会根据 Domain、Path、Secure 等属性决定是否发送 Cookie。

四、cookie 的 domain详解

Cookie 的 Domain 属性匹配规则详解

1. 默认行为：未显式设置 Domain 时

• 匹配范围：Cookie 默认仅作用于当前请求的域名（即设置该 Cookie 的域名），不包含子域名。

  例如：

  • 访问 http://www.example.com 时设置的 Cookie，默认 Domain=www.example.com。
  • 该 Cookie 不会发送到blog.example.com或api.example.com等子域名

• 原理：浏览器认为未显式设置Domain的 Cookie 仅属于当前域名，这是出于安全性和隐私保护的默认设计

2. 显式设置 Domain 时

• 匹配规则：若Domain被显式设置为.example.com（以点开头），则 Cookie 可被主域名及其所有子域名

  共享。

  例如：

  • Domain=.example.com → Cookie 会发送给www.example.com或api.example.com
  • 若Domain未以点开头（如Domain=example.com），部分浏览器可能自动补全为.example.com，但非所有浏览器均支持此行为

• 安全限制：

  • 无法为顶级域名（如.com）设置 Cookie，必须包含至少两个点（如.example.com）
  • 若Domain范围过广（如.com），浏览器会拒绝存储该 Cookie

3. 子域名与父域名的交互

• 父域名 Cookie 影响子域名：若父域名（example.com）设置了 Cookie，子域名（api.example.com）的请求不会自动携带该 Cookie，除非显式设置Domain=.example.com

• 子域名 Cookie 不影响父域名：子域名（api.example.com）设置的 Cookie（未显式设置Domain）仅在该子域名下有效，父域名（example.com）的请求不会携带它

五、cookie属性总结

1. Domain 属性决定了 cookie 属于哪个域，只有当请求的域与 cookie 的 Domain 匹配时，才会被携带。
2. Path 属性限制了 cookie 在该域下的路径范围。
3. SameSite 属性，它控制 cookie 是否在跨站请求中被发送，比如 Lax 或 Strict 模式。
4. Secure 属性要求 cookie 只能通过 HTTPS 连接发送，而 HttpOnly 属性则防止 cookie 被 JavaScript 访问。
5. 过期时间：如果 Cookie 已经过期，不会发送。
6. 数量和大小限制：如果 Cookie 数量或大小超出浏览器限制，可能会被丢弃。
7. 请求类型：跨站请求和同站请求的处理规则不同。

发送，而 HttpOnly 属性则防止 cookie 被 JavaScript 访问。
5. 过期时间：如果 Cookie 已经过期，不会发送。
6. 数量和大小限制：如果 Cookie 数量或大小超出浏览器限制，可能会被丢弃。
7. 请求类型：跨站请求和同站请求的处理规则不同。

总结：浏览器在发送请求时确实会自动携带与目标域相关的 cookie，但并不是所有 cookie 都会被携带。这涉及到 cookie 的作用域和安全属性，比如 Domain、Path、SameSite 等。