初次接触 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 不久，对其还不是很熟悉，还有不少地方值得去探讨