再好好聊聊 HTTP 裏的 Cookie | 實用 HTTP

時間 2019-12-05

原文原文鏈接

題圖：by Juan Pablo Arenashtml

1、序

Hi，你們好，我是承香墨影！前端

HTTP 協議在網絡知識中佔據了重要的地位，HTTP 協議最基礎的就是請求和響應的報文，而報文又是由報文頭（Header）和實體組成。大多數 HTTP 協議的使用方式，都是依賴設置不一樣的 HTTP 請求/響應的 Header 來實現的。node

本系列《實用 HTTP》就拋開常規的 Header 講解式的表述方式，從實際問題出發，來分析這些 HTTP 協議的使用方式，究竟是爲了解決什麼問題？同時講解它是如何設計的和它實現原理。nginx

HTTP 協議是一種無狀態的「鬆散協議」，它不會記錄不一樣請求的狀態，而且由於它自己包含了兩端（客戶端和服務端），根據請求和響應來區分，它大部分的內容都只是一個建議，其實雙邊是能夠不遵照此建議的。小程序

「這裏寫了建議零售價 2 元...」
「哦，不接受建議！」跨域

文本是本系列的第四篇，前三篇傳送門：瀏覽器

自己 HTTP 就是一個無狀態的協議，可是有時候咱們又有須要增長狀態的需求，這個時候延伸出來了 Cookie，利用 Cookie 可讓傳輸的時候保持一些狀態信息。緩存

本文就來說講 Cookie 的全部細節。安全

2、Cookie的使用

2.1 什麼是 Cookie？

先明確一點，Cookie 就是爲了解決 HTTP 協議無狀態的問題，接下來舉個例子說明。服務器

早年間醫院對患者的病例尚未在線建檔的時候，都須要患者在就醫以前，辦理一個病歷的小冊子，醫生會在病歷中寫上這次就醫的狀況，什麼時間、有什麼表現的反映、診斷是什麼病、開了一些什麼藥等等。若是下次又生病了，有病歷的狀況下，都會要求患者再把病歷帶上，這樣醫生就能經過病歷瞭解到以前的狀況。

在 Cookie 的實現上，也是這樣的。

服務端（醫生）在收到客戶端（患者）請求的時候，將一些用戶標識信息加入到 Cookie （病例）中，隨着響應返回給客戶端，客戶端將 Cookie 中的信息存儲在本地，下次再請求此服務器的時候，再將 Cookie 中攜帶的數據原樣傳輸給服務端，此時服務端就能經過 Cookie 中的用戶標識，識別出這是以前請求過的某個用戶。

在這個例子中，服務端就是醫生的角色、客戶端是患者的角色、Cookie 就是病歷。

Netscape 官方文檔中的定義爲：Cookie 是指在 HTTP 協議下，服務器或腳本能夠維護客戶端計算機上信息的一種方式。通俗地說，Cookie 是一種可以讓網站 Web 服務器把少許數據儲存到客戶端的硬盤或內存裏，或是從客戶端的硬盤裏讀取數據的一種技術。 Cookie 文件則是指在瀏覽某個網站時，由 Web 服務器的 CGI 腳本建立的存儲在瀏覽器客戶端計算機上的一個小文本文件。

2.2 一個完整的 Cookie 傳輸流程

HTTP 協議中的規則，都是經過在請求頭和響應頭中寫入輸入來實現，Cookie 也是這樣的。

服務端經過 Set-Cookie 這個響應頭來向客戶端中寫入 Cookie 信息，而客戶端讀取 Set-Cookie 這個響應頭中的信息存儲起來，在下次請求的時候取出來，再經過 Cookie 這個請求頭，將 Cookie 的數據傳輸給服務端。

再看一個瀏覽器中，Cookie 使用的實例。

在響應頭（Response Header）中，使用 Set-Cookie 傳遞不一樣的 Cookie 數據，多個數據能夠分開成多個 Set-Cookie 頭。

在請求頭中（Request Header）中，使用 Cookie 這個請求頭傳遞 Cookie 數據，不一樣的數據經過 ;分割。

3、Cookie 的細節

到這裏，我想你應該弄清楚了 cookie 的整個執行流程，接下來咱們再來探究一些 cookie 的細節。

3.1 Cookie 的類型

cookie 其實都是存儲在客戶端，一般咱們說 cookie 對應的客戶端，就是在說瀏覽器。

對於 cookie，咱們能夠簡單的將 cookie 分爲兩類：

會話 cookie。
持久 cookie。

會話 cookie 是一種臨時的 cookie，用於存儲一些臨時的信息，存儲在內存中，會話 cookie 在用戶退出瀏覽器的時候，會被清空刪除。而持久 cookie 的生存週期會更長久一些，被存儲在磁盤上，瀏覽器重啓後它們依然存在，可是他們會有一個過時的時間，只在此時間以後會被置爲失效。

會話 cookie 和持久 cookie 之間惟一的區別就是它們的過時時間，只要是設置了過時時間的 cookie 就是持久 cookie，反之則是會話 cookie。

仔細看前面的流程圖中，有一個 domain 的字段是用於標識當前 Cookie 支持的域名的，而想要設置過時時間，可使用 Expires 或者 Max-Age 參數進行設置，有點相似咱們前面講 HTTP 緩存的參數。

3.2 Cookie 的配置參數

到如今咱們已經介紹了兩個 Cookie 配置的信息，Domain 和 Expires/Max-Age，分別用來配置域名和過時策略。

這些都很好理解，畢竟瀏覽器是開放的，它會訪問不少不一樣的網址，若是每一個請求都將全部的 Cookie 信息都傳遞過去，基本上是不現實的。而這些配置參數，就是對 Cookie 增長一些附加的設置，進行一些簡單的限制和過濾，在減小傳輸量的同時也保證了安全。

Domain 這個參數能夠限制只在此域名下的請求，才傳遞該 Cookie，其餘的不傳遞。

Cookie 其實還支持其餘的一些參數配置，打開 Chrome 的調試模式，在 Application 中就能夠看到當前頁面的 Cookie 信息。

下面以一篇微信文章頁面所存儲的 Cookie 爲例。

這個表中，就是當前存儲的全部 Cookie 信息，而表頭，則是 Chrome 支持的 Cookie 信息。

下面咱們分別來介紹它們。

Name:Value ：Cookie 存儲的數據就是一個 Key-Value 的鍵值對，因此這兩個參數沒什麼爭議，就是數據的 Key 和 Value。
Domain：Cookie 的域，限制請求頭傳輸的域。
Path：域中與 Cookie 相關的路徑前綴。
Expires/Max-Age：過時時間或者超時間隔。
http：此屬性爲 True，表示只會在 HTTP 請求頭中攜帶此 Cookie 信息，而沒法經過 document.cookie 來訪問此 Cookie。
Secure：安全，是否只有在使用 SSL 鏈接時才發送這個 Cookie。

其實都很好理解，就不展開講解了。

3.3 Set-Cookie2 和 Cookie2

有些資料裏會提到 Set-Cookie2 和 Cookie2 ，這些都是歷史遺留問題，當初想對 Cookie 再進行一些功能上的擴展，但並未獲得普遍的實施，如今已經棄用了。

你們瞭解一下便可，有興趣能夠參考 RFC 6265。

RFC 6265:
https://tools.ietf.org/html/r...

3.4 瀏覽器對 Cookie 的限制

大部分時候咱們聊到 Cookie 都在說的是服務器和瀏覽器進行通訊時候，而不一樣的瀏覽器對 Cookie 存儲的限制是不同的。例如：單個域名可存儲的 Cookie 數量、Cookie 大小等。

我簡單找了一些資料，來講明不一樣瀏覽器對 Cookie 的支持狀況。

這些數據我沒有驗證過，可是也能說明不一樣瀏覽器對 Cookie 的支持狀況。在進行頁面 Cookie 操做的時候，應該儘可能保證 Cookie 的個數小於 20 個，總大小小於 4KB，這是一個安全且保險的範圍。

4、Cookie的查缺補漏

4.1 Cookie 安全

前面配置 Cookie 參數的時候，有兩個參數：http 和 secure 屬性，它們就在必定程度上保證了安全。

1. http 屬性

設置了 http 屬性，標識它是一個「HttpOnly」的，那麼經過一些腳本程序（例如 JS的 document.cookie）將沒法讀取到這個 Cookie 信息，它只會出如今請求的報文頭內。

2. secure 屬性

secure 屬性強制該 Cookie 只有在 SSL 的環境下才會想服務器傳輸，相對也保證了傳輸的安全。

4.2 Cookie 不支持跨域

Cookie 自己是不支持跨域的，必定程度也保證了 Cookie 的安全，若是非要跨域其實做爲前端基本上能作的不多，大部分都須要服務端的二次配合。

例如：nginx 反向代理、Jsonp、nodejs 的 superagent、iframe 等方法。

有興趣再單獨瞭解就行了。

5、Cookie 小結

HTTP 中的 Cookie 知識點，基本上都已經講解清楚了，咱們再次總結一下關鍵知識點。

1. Cookie 主要是爲了解決 HTTP 協議無狀態的問題。

2. 服務端經過 Set-Cookie 響應頭來向客戶端設置 Cookie。

3. 客戶端經過 Cookie 請求頭向服務端發送以前存儲的 Cookie 數據。

4. Cookie 依據過時時間進行區分，將類型分爲：臨時 Cookie 和持久 Cookie。

5. Cookie 能夠經過配置不一樣的參數，進行限制，例如過時時間、支持的域名、是否安全（secure）等。

6. Cookie 不支持跨域，跨域還須要其餘的方式繞開來實現。

7. Cookie 只能作到相對的安全，任何事情沒有絕對的安全。

參考：

「聯機圓桌」👈一年 50 個優質問題，上桌聯機學習。

公衆號後臺回覆成長『成長』，將會獲得我準備的學習資料，也能回覆『加羣』，一塊兒學習進步；你還能回覆『提問』，向我發起提問。