瀏覽器的小 Cookie

參考文章：瀏覽器系列之 Cookie 和 SameSite 屬性

Cookie 介紹

爲何出現 Cookie？

HTTP 是一個無狀態的協議（這裏的 HTTP 是指 HTTP 1.x），它的每一個請求都是徹底獨立的，每一個請求包含了處理這個請求所需的完整的數據，發送請求不涉及到狀態變動。簡單的理解就是同一個客戶端連續兩次發送請求到服務器，服務器也識別不出這是同一個客戶端發送的請求。
爲了解決 HTTP 無狀態致使的問題，出現了 Cookie。 Cookie 的存在也不僅是爲了解決通信協議無狀態的問題。

什麼是 Cookie ？

含義：類型爲「小型文本文件」，指某些網站爲了辨別用戶身份而儲存在用戶本地終端上的數據（不超過 4KB）。
組成：它由一個名稱（Name）、一個值（Value）和其它幾個用於控制 Cookie 有效期、安全性、使用範圍等可選屬性組成。
查看：

• 對於存放在瀏覽器的 cookie, 打開瀏覽器的開發者工具，在Application - Cookies 裏查看到當前頁面的 Cookie
• 對於存在本地文件的 cookie，打開文件查看

Cookie 的做用是什麼？

Cookie 主要用於如下三個方面：

1. 會話狀態管理（如用戶登陸狀態、購物車、遊戲分數或其它須要記錄的信息）
2. 個性化設置（如用戶自定義設置、主題等）
3. 瀏覽器行爲跟蹤（如跟蹤分析用戶行爲等）

Cookie 是怎麼設置的？

簡單來講就是：

1. 客戶端發送 HTTP 請求到服務器
2. 當服務器收到 HTTP 請求時，在響應頭裏面添加一個 Set-Cookie 字段
3. 瀏覽器收到響應後保存 Cookie
4. 以後對該服務器每一次請求中都經過 Cookie 字段將 Cookie 信息發送給服務器。

Cookies 的屬性有哪些？

Name/Value

用 JavaScript 操做 Cookie 的時候注意對 Value 進行編碼處理。

Expires

Expires 用於設置 Cookie 的過時時間。設定的過時時間只與客戶端相關，而不是服務端。

Set-Cookie: name=value; Expires=Wed, 21 Oct 2021 07:28:00 GMT;

• 當 Expires 屬性缺省時，表示是會話性 Cookie，Cookie 值保存在客戶端內存中，並在用戶關閉瀏覽器時失效。有些瀏覽器提供了會話恢復功能，這種狀況下即便關閉了瀏覽器，會話期 Cookie 也會被保留下來，就好像瀏覽器歷來沒有關閉同樣。
• 當 Expires 屬性不缺省時，表示是持久性 Cookie，Cookie 值保存在用戶的硬盤中，直至過時或者手動清除 Cookie。

Max-Age

Max-Age 用於設置在 Cookie 失效以前須要通過的秒數。Max-Age 能夠爲正數、負數、甚至是 0。

Set-Cookie: id=1224455; Max-Age=604800;

• 若是 max-Age 屬性爲正數時，瀏覽器會將其持久化，即寫到對應的 Cookie 文件中。
• 當 max-Age 屬性爲負數，則表示該 Cookie 只是一個會話性 Cookie。
• 當 max-Age 爲 0 時，則會當即刪除這個 Cookie。

Expires 和 Max-Age 都存在時，Max-Age 優先級更高。

Domain

Domain 指定了 Cookie 能夠送達的主機名。默認值爲當前文檔訪問地址的有效頂級域名 + 二級域名。

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com;

若是設置Domain 是 taobao.com，那麼 a.taobao.com 或 b.taobao.com 均可以使用 Cookie。

不能跨域設置 Cookie，好比在 .taobao.com 頁面裏把 Domain 設置成 Baidu.com 是無效的

Path

Path 指定了一個 URL 路徑，這個路徑必須出如今要請求的資源的路徑中才能夠發送 Cookie。好比設置 Path=/docs，/docs/Web/ 下的資源會帶 Cookie ，/test 則不會攜帶 Cookie。

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/;

Domain 和 Path 標識共同定義了 Cookie 的做用域：即 Cookie 應該發送給哪些 URL。

Secure

設置 Secure 表示只有 https 協議纔會發送cookie。使用 HTTPS 安全協議，能夠保護 Cookie 在瀏覽器和 Web 服務器間的傳輸過程當中不被竊取和篡改。

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/; Secure

HTTPOnly

設置 HTTPOnly 表示僅當 http 和 https 協議下才發送 cookie，本地方式獲取 cookie 無效。能夠防止客戶端腳本經過 document.cookie 等方式訪問 Cookie，有助於避免 XSS 攻擊。

Set-Cookie: test=219ffwef9w0f; Domain=taobao.com; Path=/; HTTPOnly

http-only: 沒法被網頁腳本讀取，不限制傳輸通路的安全性
secure: 能夠被網頁腳本讀取，只容許經過安全通路發送給服務器

SameSite

SameSite 可讓 Cookie 在跨站請求時不會被髮送，從而能夠阻止跨站請求僞造攻擊（CSRF）。

Set-Cookie: name=dzxz; Expires=Wed, 30 Aug 2020 00:00:00 GMT;SameSite=none; Secure

• HTTP 接口不支持 SameSite=none。若是想加 SameSite=none 屬性，那麼該 Cookie 就必須同時加上 Secure 屬性，表示只有在 HTTPS 協議下該 Cookie 纔會被髮送。

屬性值

SameSite 能夠有下面三種值：

• Strict 僅容許一方請求攜帶 Cookie，即瀏覽器將只發送相同站點請求的 Cookie
• Lax 容許部分第三方請求攜帶 Cookie
• None 不管是否跨站都會發送 Cookie

Chrome80 以前默認是 None，Chrome80 後默認是 Lax。

同站和跨站

同站(same-site)/跨站(cross-site)」和第一方(first-party)/第三方(third-party)是等價的。可是與瀏覽器同源策略（SOP）中的「同源(same-origin)/跨域(cross-origin)」是徹底不一樣的概念。

• 同源策略的「同源」：是指兩個 URL 的協議/主機名/端口一致。
• 同站： 只要兩個 URL 的 eTLD+1 相同，不須要考慮協議和端口。
• 跨站：兩個 URL 的 eTLD+1 不一樣。

例子:
www.taobao.com 和 www.baidu.com 是跨站。
www.a.taobao.com 和 www.b.taobao.com 是同站。
a.github.io 和 b.github.io 是跨站。【github.io 是一個完整的 eTLD，其上註冊的子域名都是跨站。】

eTLD
表示有效頂級域名，註冊於 Mozilla 維護的公共後綴列表中，例如，.com、.co.uk、.github.io 等。eTLD+1 則表示，有效頂級域名 + 二級域名，例如 taobao.com 等。

頂級域名 TLD 和有效頂級域名 eTLD 的區別嚴格來講: .cn 是頂級域名, .com.cn .org.cn 是 .cn 自主創造出來的頂級域名。因爲這樣狀況很是普遍，因此嚴格意義的頂級域名不少場景下無法直接使用，因而就創造了一個【有效頂級域名】的概念。把自主創造出來的頂級域名註冊成有效頂級域名，好比說 .github.io，.org.cn