初次接觸 Cookie

什麼是 Cookie

Cookie（複數形態Cookies），中文名稱爲「小型文本文件」或「小甜餅」，指某些網站爲了辨別用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

這是維基百科對 Cookie 的詞條解釋，由此咱們能夠知道，Cookie 實際上是一個儲存在本地的一個小文件。

Cookie 的起源

早期 Web 開發面臨的最大問題之一是如何管理狀態。簡言之，服務器端沒有辦法知道兩個請求是否來自於同一個瀏覽器。那時的辦法是在請求的頁面中插入一個token，而且在下一次請求中將這個token返回（至服務器）。這就須要在form中插入一個包含token的隱藏表單域，或着在URL的qurey字符串中傳遞該token。這兩種辦法都強調手工操做而且極易出錯。

Lou Montulli，那時是網景通信的一個僱員，被認爲在1994年將 「magic cookies」 的概念應用到了 Web 通信中。他意圖解決的是 Web 中的購物車，如今全部購物網站都依賴購物車。他的最先的說明文檔提供了一些 Cookies 工做原理的基本信息該文檔在 RFC2109 中被規範化（這是全部瀏覽器實現 Cookies 的參考依據），而且最終逐步造成了REF2965。Montulli 最終也被授予了關於 Cookies 的美國專利。網景瀏覽器在它的第一個版本中就開始支持 Cookies，而且當前全部 Web 瀏覽器都支持 Cookies。

Cookie 的特色

服務器經過Set-Cookie響應頭設置 Cookie

瀏覽器獲得 Cookie 以後，每次請求都要帶上 Cookie，無形中增長了流量

服務器讀取 Cookie 就知道登陸用戶的信息

因爲在 HTTP 請求中的 Cookie 是明文傳遞的，因此安全性成問題，除非用 HTTPS

Cookie 的大小限制在 4KB 左右，對於複雜的存儲需求來講是不夠用的

除了這些特色以外，還有

不一樣瀏覽器的 Cookie 不共享

Windows 的 Cookie 儲存在C盤的一個文件夾中

Cookie 能夠做假

Cookie 有有效期，通常是20分鐘。瀏覽器可自行設置，後端也能夠強制設置有效期

後端能夠設置 Cookie 的有效期，是否只容許 HTTPS 連接，是否容許 JS 修改等等

如何設置 Cookie

語法

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
複製代碼

在 Cookie 的設置中，後面的選項是可選的，且可同時多選。

• 解釋

<cookie-name>=<cookie-value>：
<cookie-name> 能夠是除了控制字符 (CTLs)、空格 (spaces) 或製表符 (tab)以外的任何 US-ASCII 字符。同時不能包含如下分隔字符： ( ) < > @ , ; : \ " / [ ] ? = { }。
<cookie-value> 是可選的，若是存在的話，那麼須要包含在雙引號裏面。支持除了控制字符（CTLs）、空格（whitespace）、雙引號（double quotes）、逗號（comma）、分號（semicolon）以及反斜線（backslash）以外的任意 US-ASCII 字符。

Expires=<date>：
Cookie 的最長有效時間，形式爲符合 HTTP-date 規範的時間戳。若是沒有設置這個屬性，那麼表示這是一個會話期 Cookie 。一個會話結束於客戶端被關閉時，這意味着會話期 Cookie 在彼時會被移除。

Max-Age=<non-zero-digit>：
在 Cookie 失效以前須要通過的秒數。一位或多位非零（1-9）數字。

Domain=<domain-value>：
指定 Cookie 能夠送達的主機名。假如沒有指定，那麼默認值爲當前文檔訪問地址中的主機部分（可是不包含子域名）。

Path=<path-value>：
指定一個 URL 路徑，這個路徑必須出如今要請求的資源的路徑中才能夠發送 Cookie 首部。

Secure：
一個帶有安全屬性的 Cookie 只有在請求使用 SSL 和 HTTPS 協議的時候纔會被髮送到服務器。然而，保密或敏感信息永遠不要在 HTTP Cookie 中存儲或傳輸，由於整個機制從本質上來講都是不安全的，好比前述協議並不意味着全部的信息都是通過加密的。

HttpOnly：
設置了 HttpOnly 屬性的 Cookie 不能使用 JavaScript 經由 Document.cookie 屬性、XMLHttpRequest 和 Request APIs 進行訪問，以防範跨站腳本攻擊（XSS）。

SameSite=Strict、SameSite=Lax：
容許服務器設定一則 Cookie 不隨着跨域請求一塊兒發送，這樣能夠在必定程度上防範跨站請求僞造攻擊（CSRF）。

用法

response.setHeader('Set-Cookie', `sign_in_email=${email}`)
複製代碼

當咱們模擬登錄時，就能夠看到響應頭裏面的 Cookie

一樣，在跳轉網站請求頭中也能夠看到這個 Cookie

• 利用JavaScript來修改Cookie

若是沒有設置不容許修改 Cookie 的話，是能夠利用 JavaScript 來修改 Cookie

document.cookie="sign_in_email=789@yyzcl.com"
複製代碼

此時刷新頁面看看

此時能夠看到，Cookie 被 JavaScript 修改了

但能夠經過設置禁止 JavaScript 來修改 Cookie

response.setHeader('Set-Cookie', `sign_in_email=${email}; HttpOnly`)
複製代碼

這樣就沒法經過 JavaScript 來修改 Cookie

可是仍是能夠手動地來修改

再刷新頁面看看

Cookie是能夠人爲地僞造地，因此說 Cookie 是不安全的

設置過時時間

能夠經過 Cookie 的如下屬性來設置過時時間。

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
複製代碼

• Expires指定了一個日期/時間， 在這個日期/時間以後 Cookie 過時

• max-age指定了一個秒數，通過此秒數後 Cookie 過時

• 若是不設置這個標頭，則默認關閉瀏覽器後 Cookie 過時

刪除 Cookie

有多種方式來刪除 Cookie。

• 服務器能夠經過Expires、max-age這兩個標籤將 Cookie 設置成過時的狀態，以後瀏覽器會自動清除

• JavaScript 能夠經過document.cookie來操做 Cookie 刪除

• 能夠經過瀏覽器手動刪除

後話

我也是接觸 Cookie 不久，對其還不是很熟悉，還有不少地方值得去探討