diff --git a/content/posts/issues-70.md b/content/posts/issues-70.md new file mode 100644 index 0000000..a2e0fa9 --- /dev/null +++ b/content/posts/issues-70.md @@ -0,0 +1,90 @@ +--- +title: 'HTTP Cookie 常用属性解读' +date: 2024-02-28T12:49:01Z +tags: [] + +--- + +# Cookie 的特征 +## Cookie 的读写 +Web应用场景,服务器和浏览器都可以设置 Cookie 信息: +- 浏览器通过 document.cookie 读写 Cookie; +- 服务器通过请求 Header [Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie) 读 Cookie; +- 服务器通过响应 Header [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) 写 Cookie; + +本文是对服务器写Cookie `Set-Cookie` 时常用属性做解读。 + +## Cookie 的归属及访问携带 +1. Cookie 归属于一个 Domain,需要注意的是 `example.com` 和 `www.example.com` 是不同的 Domain。 +2. 浏览器在访问 URL 时会将 URL 对应 Domain 及祖先 Domain 的 cookie 都携带发送到 Web 服务器。 + +用一个表格说明: +| Cookie 归属 | 访问 example.com 时是否携带 | 访问 www.example.com 时是否携带 | +| ------------- | ------------- | ------------- | +| example.com | 携带 | 携带 | +| www.example.com | 不携带 | 携带 | + + +# 服务器如何写 Cookie +服务器可以在请求响应时通过 Header `Set-Cookie` 设置 Cookie 信息,基本语法是: + +``` +Set-Cookie: = +Set-Cookie: =; Domain= +Set-Cookie: =; Expires= +Set-Cookie: =; HttpOnly +Set-Cookie: =; Max-Age= +Set-Cookie: =; Partitioned +Set-Cookie: =; Path= +Set-Cookie: =; Secure + +Set-Cookie: =; SameSite=Strict +Set-Cookie: =; SameSite=Lax +Set-Cookie: =; SameSite=None; Secure + +Set-Cookie: =; Domain=; Secure; HttpOnly +``` + +# Set-Cookie 属性解读 +设置 Cookie 时,除了 cookie-name 和 -cookie-value, 还有诸如 Domain,Expires,HttpOnly 等属性信息,本文就其中常用属性做解读。 + +## Domain={domain-value} +指定cookie 归属的 Domain,默认是当前网址对应的 Domain。 + +使用场景:用户在二级域名 auth.example.com 登录,登录完成后会通过 `Set-Cookie`设置 cookie,如果不设置 Domain,cookie 默认归属到 auth.example.com,当用户访问 www.example.com 或 example.com 时都不会带对应的 cookie。为了解决此问题就需要在登录后返回的 cookie 配置 `Domain=example.com`。 + +## Expires={date} 与 Max-Age={number} +两个都是设置 cookie 的有效期,只是方式有差异: +- Expires 指定的是具体过期时间; +- Max-Age 指定的是 cookie 的有效时长(单位秒); + +如果相应时两个属性都配置,则优先用 `Max-Age`。 +如果相应时两个属性都未配置,则 cookie 会在浏览器关闭后失效; + +这里需要重点说明的是,如果两个属性都未配置,很多浏览器关闭并重新打开时 cookie 并未失效,这是因为这些浏览器支持会话恢复功能,即用户重新打开浏览器时 cookie 也会恢复。假如想关闭这个特性,以 Chrome 举例,可以在设置中配置 `启动时打开新标签页`。 +![image](https://github.com/isayme/blog/assets/1747852/f0276d1b-ae47-40c3-b4d7-f08da61e588c) + +## HttpOnly +限制禁止 javascript 访问对应 cookie。 + +通常情况下,前端开发者可以通过 document.cookie 读取 cookie 信息,但是设置了 HttpOnly 属性的 cookie 无法通过 document.cookie 读取。 + +使用场景:以登录为例,通常登录后服务器会返回一个 cookie 记录用户信息,前端页面通常不需要感知对应 cookie,此时服务器就可以对这个 cookie 配置 HttpOnly 属性,防止 javascript 读取到此 cookie。 + +## Secure +限制浏览器仅在使用 https 访问服务器是才携带对应 cookie。 + +现代的网站服务器基本都在使用 https 以保障数据安全。如果没有特别需要使用 http 的必要,建议 set-cookie 时都附加此配置。 + +## SameSite={samesite-value} +跨站安全配置。详见 [阮一峰: Cookie 的 SameSite 属性](https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html) + +## Path +限制 Cookie 的生效路径。 + +通常不需要使用,有需要可以查看文档 [Path={path-value}](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#pathpath-value)。 + +# 参考资料 +[MDN: Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) +[Chrome doesn't delete session cookies](https://stackoverflow.com/questions/10617954/chrome-doesnt-delete-session-cookies)](https://stackoverflow.com/a/10772420/1918831) +[阮一峰: Cookie 的 SameSite 属性](https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html)