摘要：背景是一種無狀態(tài)的協(xié)議，它不對請求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存，即無法根據(jù)之前的狀態(tài)進(jìn)行本次請求的處理。為了保留無狀態(tài)協(xié)議這個(gè)特征的同時(shí)又要解決類似的矛盾問題，于是引入了。主要目的是為防止跨站腳本攻擊對的信息竊取。

一個(gè)Vue單頁應(yīng)用，A、B、C 三個(gè)頁面都引用了一個(gè)公用的時(shí)間選擇器。用戶在各自頁面選擇完時(shí)間后，A，B，C頁面互相切換時(shí)保存選擇的時(shí)間，在關(guān)閉瀏覽器tab后，清除選擇的時(shí)間，恢復(fù)初識值。一開始的想法是使用會話 cookie（不手動設(shè)置過期時(shí)間），但是會話 cookie 在關(guān)閉瀏覽器 tab 的時(shí)候不會被清除。所以決定研究下會話 cookie 何時(shí)清除。

背景

HTTP 是一種無狀態(tài)的協(xié)議，它不對請求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存，即無法根據(jù)之前的狀態(tài)進(jìn)行本次請求的處理。假如要求登錄驗(yàn)證的 web 頁面本身無法進(jìn)行狀態(tài)的管理，那么每次跳轉(zhuǎn)新頁面就要再次登錄，或者要在請求報(bào)文中附加參數(shù)來管理登錄狀態(tài)。無狀態(tài)協(xié)議有它的優(yōu)點(diǎn)，由于不必保存狀態(tài)，可以減少服務(wù)器的 CPU 及內(nèi)存資源。為了保留無狀態(tài)協(xié)議這個(gè)特征的同時(shí)又要解決類似的矛盾問題，于是引入了 cookie。

原理

cookie 技術(shù)通過在請求和響應(yīng)報(bào)文中寫入 cookie 信息來控制客戶端的狀態(tài)。cookie 會根據(jù)從服務(wù)器端發(fā)送的響應(yīng)報(bào)文內(nèi)的一個(gè)叫做 Set-Cookie 的首部字段信息，通知客戶端保存。當(dāng)下次客戶端再往該服務(wù)器發(fā)送請求時(shí)，客戶端會自動在請求報(bào)文中加入 cookie 值后發(fā)送出去。
服務(wù)端發(fā)現(xiàn)客戶端發(fā)送過來的 cookie 后，會去檢查究竟是從哪一個(gè)客戶端發(fā)來的連接請求，然后對比服務(wù)器上的記錄，最后得到之前的狀態(tài)信息。

客戶端設(shè)置

// 屬性之間由一個(gè)分號和一個(gè)空格隔開
document.cookie = "name=value; expires=date; path=path"

// 設(shè)置多個(gè)cookie
document.cookie = "name=irene; domain=www.baidu.com";
document.cookie = "age=18; path=/welcome";

document.cookie 一次只能設(shè)置一條 cookie，如果需要設(shè)置多條，需要多次設(shè)置。客戶端可以設(shè)置的屬性有：expires、max-age、domain、path、secure（https協(xié)議下才能設(shè)置成功），不能設(shè)置 HttpOnly。

  Set-Cookie: name=value[; expires=date][; domain=domain][; path=path][; secure]

  // 設(shè)置多個(gè)cookie
  Set-Cookie: name=irene; domain=www.baidu.com;
  Set-Cookie: age=18; path=/welcome;

一個(gè) Set-Cookie 只能設(shè)置一條 cookie，如果需要設(shè)置多條，需要多次使用 Set-Cookie。cookie 除了設(shè)置名稱和值之外，還可以設(shè)置其他的屬性。服務(wù)端可以設(shè)置的屬性有：expires、max-age、domain、path、secure、HttpOnly 等。

expires 和 max-age

設(shè)置 cookie 的失效時(shí)間。expires 的值是一個(gè)時(shí)間點(diǎn)（cookie 失效時(shí)刻 = expires），max-age?的值是秒數(shù)（cookie 失效時(shí)刻 = 創(chuàng)建時(shí)刻 + max-age）。expires?是 http/1.0 協(xié)議中的選項(xiàng)，在新的 http/1.1 協(xié)議中 expires 已經(jīng)由?max-age?選項(xiàng)代替。如果兩者同時(shí)存在，max-age 的優(yōu)先級高于 expires。max-age 有兩種可能值：小于等于0：有效期為能表示的最早時(shí)間；大于0：有效期為當(dāng)前時(shí)間 + max-age。

// expires
document.cookie="name=irene; expires=Wed, 13 Jun 2019 10:28:27 GMT"
// max-age > 0
document.cookie="name=irene; max-age=3600"
// max-age <= 0
document.cookie="name=irene; max-age=0"

注意：一旦 cookie 從服務(wù)器端發(fā)送至客戶端，服務(wù)器端就不存在可以顯式刪除 cookie 的方法。但可通過覆蓋 cookie，實(shí)現(xiàn)對客戶端 cookie 的刪除操作。

domain & path

Domain 設(shè)置域名，默認(rèn)是當(dāng)前域名。path 設(shè)置路徑，默認(rèn)是當(dāng)前目錄。domain 和 path 一起限制了哪些請求可以帶上該 cookie。比如上面第二個(gè)的 cookie，若請求的 URL 的域名是 juejin.com 或 xxx.juejin.com，并且 URL 的路徑是 / 或 子路徑 "/home"，則瀏覽器會將此 cookie 添加到該請求的 cookie 頭部中。

// 在 https://juejin.im/welcome/frontend 設(shè)置如下 cookie，則瀏覽器 Cookie 面板顯示的 domain=juejin.im，path=/welcome
document.cookie = "name=irene"
// 在 https://juejin.im/welcome/frontend 設(shè)置如下 cookie，則瀏覽器 Cookie 面板顯示的 domain=.juejin.im(有前綴.)，
document.cookie = "name=irene; domain=juejin.im; path=/welcome/frontend"
// 關(guān)于 domain 有無前綴點(diǎn)可參考 http://www.it1352.com/548425.html

HttpOnly

當(dāng)設(shè)置了 HttpOnly，瀏覽器就不會將該 cookie 添加到非 HTTP 請求的頭部。
設(shè)置 cookie 是否能通過 js 去訪問（讀取、修改、刪除等）。默認(rèn)情況下，cookie 不會帶 HttpOnly 選項(xiàng)，所以客戶端是可以通過 js 代碼去訪問這個(gè) cookie 的。當(dāng) cookie 帶 HttpOnly 選項(xiàng)時(shí)，客戶端則無法通過 js 代碼去訪問這個(gè)cookie。主要目的是為防止跨站腳本攻擊對 cookie 的信息竊取。HttpOnly 只能從服務(wù)端設(shè)置，不能通過客戶端設(shè)置。

Secure

設(shè)置僅在 HTTPS 安全連接時(shí)，才可以發(fā)送 cookie。

domain-matching

一個(gè)字符串（str）匹配（domain-matches）一個(gè)給定的域名字符串（domain str）至少需要滿足以下條件中的一個(gè)：

str 和 domain str 完全相同（轉(zhuǎn)成小寫后比較）。

或者同時(shí)滿足以下條件：
2.1 domain str 是 str 的后綴。
2.2 str 中最后一個(gè)不包含在 domain str 中的字符是點(diǎn)（.)。

domain str = google.com;  str = map.googole.com  =>  符合
domain str = google.com;  str = map.mgoogle.com  =>  最后一個(gè)不包含在 domain str 中的字符是 m，不符合 

2.3 str 必須是一個(gè)域名，而不是 IP 地址。

path-matching

一個(gè)請求路徑（request-path）匹配（path-matches）一個(gè)給定的 cookie-path 至少需要滿足以下條件中的一個(gè)：

request-path 和 cookie-path 完全一樣。

cookie-path 是 request-path 的前綴，并且 cookie-path 的最后一個(gè)字符是 / 。

cookie-path 是 request-path 的前綴，并且 request-path 中第一個(gè)不包含在 cookie-path 中的字符是 / 。

注意：domain-matching & path-matching 只是瀏覽器決定是否攜帶 cookie 諸多參考項(xiàng)中的其中兩個(gè)，瀏覽器還會參考諸如是否過期等項(xiàng)。

問題:

cookie 不設(shè)置失效時(shí)間的話，默認(rèn)是會話結(jié)束失效，這個(gè)會話結(jié)束是指瀏覽器的所有窗口都關(guān)閉，還是說這個(gè)網(wǎng)站的頁面全部關(guān)閉就可以了?

具體場景：

Chrome瀏覽器開了兩個(gè)窗口A B，A打開了網(wǎng)站1的兩個(gè)標(biāo)簽頁（tab1 & tab2）和網(wǎng)站2的兩個(gè)標(biāo)簽頁（tab3 & tab4），B打開了網(wǎng)站1的兩個(gè)標(biāo)簽頁（tab1 & tab2）和網(wǎng)站2的兩個(gè)標(biāo)簽頁（tab3 & tab4），如果想網(wǎng)站1的cookie失效的話，是不是把窗口A B關(guān)于網(wǎng)站1的tab頁關(guān)掉就行 還是 需要把瀏覽器的所有窗口都關(guān)閉？

實(shí)驗(yàn)對象：

https://segmentfault.com。它的 PHPSESSION 是會話結(jié)束失效，所以用來測試。

工具：

通過chrome://settings/cookies/detail?site=segmentfault.com查看該網(wǎng)站下的所有cookie。

結(jié)論：

瀏覽器的所有窗口都關(guān)閉，網(wǎng)站1的cookie（會話cookie）才失效。windows 在瀏覽器窗口都關(guān)閉的情況下，會退出程序，所以 cookie 會失效；mac 在瀏覽器窗口都關(guān)閉的情況下，不會退出程序，所以 cookie 不會失效，需要退出程序 cookie 才失效。

如果一個(gè) cookie 同時(shí)設(shè)置了 Max-Age 和 Expires 屬性，Max-Age 的優(yōu)先級更高。如果兩個(gè)都沒有設(shè)置，UA 會保存該 cookie 直到當(dāng)前 會話結(jié)束。