chrome Network 之Cookie

从今天开始介绍chrome的Network
先说cookie
说cookie之前先了解几个概念

基本概念前置

HTTP无状态协议

是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。—百度百科

Cookie 出现解决了 HTTP 协议无状态的问题

什么是 Cookie

举一个栗子🌰

早年间医院对患者的病例还没有在线建档的时候，都需要患者在就医之前，办理一个病历的小册子，医生会在病历中写上此次就医的情况，什么时间、有什么表现的反映、诊断是什么病、开了一些什么药等等。如果下次又生病了，有病历的情况下，都会要求患者再把病历带上，这样医生就能通过病历了解到之前的情况。
在 Cookie 的实现上，也是这样的。
服务端（医生）在收到客户端（患者）请求的时候，将一些用户标识信息加入到 Cookie （病例）中，随着响应返回给客户端，客户端将 Cookie 中的信息存储在本地，下次再请求此服务器的时候，再将 Cookie 中携带的数据原样传输给服务端，此时服务端就能通过 Cookie 中的用户标识，识别出这是之前请求过的某个用户。

在这个例子中，服务端就是医生的角色、客户端是患者的角色、Cookie 就是病历。
Netscape 官方文档中的定义为：Cookie 是指在 HTTP 协议下，服务器或脚本可以维护客户端计算机上信息的一种方式 。通俗地说，Cookie 是一种能够让网站 Web 服务器把少量数据储存到客户端的硬盘或内存里，或是从客户端的硬盘里读取数据的一种技术。 Cookie 文件则是指在浏览某个网站时，由 Web 服务器的 CGI 脚本创建的存储在浏览器客户端计算机上的一个小文本文件。

实际场景1

，A用户的购物车有个商品，数量为5，A用户点击了+1，后台服务器端接口调用成功返回了6，这是一个很简单的场景
为什么?
请思考🤔
调用接口传参，A用户调用接口传递的参数如下

{
    type:'add',
    account:1
}

服务器端是如何识别A用户的呢?
是通过Cookie(当然，这不是必须的，服务器端还有其他方式实现，我们只说Cookie)，A用户登录后，后台通过set-cookie，将用户信息存入response中，发送给浏览器，浏览器自动获取cookie，调用加车接口，通过request，将cookie发送至服务器，服务器端通过cookie识别用户，实现如上场景

实际场景2

换个方式加购物车
打开PC浏览器，进入京东（非登录状态）
选择商品，然后加入购物车

提示加车成功，我们看到购物车数量从0变为了1

点击去购物车结算按钮

提示登录，我们点击登录
登录后，我们看到，非登录状态添加的商品，已经在购物车里面了

为什么?
请思考🤔
非登录状态下，调用加车接口，服务器端通过set-cookie，创建一条cookie,
假设为user-key=1c0f243d-570d-4aab-9d88-21136a57092e，
通过response交给浏览器，服务器端通过user-key，记录这个用的加车行为，当用户登录后，调用后台购物车接口，通过request，将带有user-key=1c0f243d-570d-4aab-9d88-21136a57092e信息的cookie发送给服务器，服务器将之前标记的加车行为返回，完成上述场景

实际场景3

这个场景也很常见，我们会经常浏览淘宝里面的一些类别的商品，例如，你一直在浏览相机📷，然后，退出淘宝，你又打开了浏览器的一些网页，你会发现，打开浏览器的一些网页会推送一些广告位，如果这个是淘宝的广告位，它会推送一些相机商品给你
为什么?
请思考🤔
根据上面的三个场景，我们对cookie有了一定的认识

cookie定义

Cookie（复数形态Cookies），又称为“小甜饼”。类型为“小型文本文件”[1]，指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。Cookie是一段不超过4KB的小型文本数据

下面展开讲述

Cookie进阶

Cookie参数

看下Application中的Cookie

Name

该Cookie的名称。Cookie一旦创建，名称便不可更改

Value：

该Cookie的值。如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码

Max-Age

该Cookie失效的时间，单位秒。如果为正数，则该Cookie在maxAge秒之后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为–1

Cookie的Max-Age决定着Cookie的有效期，单位为秒（Second）
如果Max-Age属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将Max-Age为正数的Cookie持久化，即写到对应的Cookie文件中。无论客户关闭了浏览器还是电脑，只要还在Max-Age秒之前，登陆网站时该Cookie仍然有效。
如果Max-Age为负数，则表示该Cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该Cookie失效。Max-Age为负数的Cookie，为临时性Cookie，不会被持久化，不会被写到Cookie文件中。Cookie信息保存在浏览器内存中，因此关闭浏览器该Cookie就消失了。Cookie默认的maxAge值为–1。

如果Max-Age为0，则表示删除该Cookie。Cookie机制没有提供删除Cookie的方法，因此通过设置该Cookie即时失效实现删除Cookie的效果。失效的Cookie会被浏览器从Cookie文件或者内存中删除，

Expires：

date
Cookie有效期，若不指定，默认为浏览器关闭前位置

Set-Cookie:expires=Sat, 02 May 2009 23:38:25 GMT

var d = new Date();
var expires = d.toGMTString();

Max-Age：

设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 。

Path属性：

该Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。

Domain属性：

可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”

Cookie是不可跨域名的。域名www.google.com颁发的Cookie不会被提交到域名www.baidu.com去。这是由Cookie的隐私安全机制决定的。隐私安全机制能够禁止网站非法获取其他网站的Cookie。

正常情况下，同一个一级域名下的两个二级域名如www.helloweenvsfei.com和 images.helloweenvsfei.com也不能交互使用Cookie，因为二者的域名并不严格相同。如果想所有gelloweenvsfei.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数，

name相同但domain相同的两个Cookie也是两个不同的Cookie。

Secure属性：

该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false

HTTPOnly 属性 ：

用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。

SameSite 属性 ：

Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。
它可以设置三个值。
1. Strict
2. Lax
3. None

Strict

Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。

Set-Cookie: CookieName=CookieValue; SameSite=Strict;

这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。

Lax

Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

Set-Cookie: CookieName=CookieValue; SameSite=Lax;

导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。详见下表。

设置了Strict或Lax以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。

None

Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

下面的设置无效。

Set-Cookie: widget_session=abc123; SameSite=None

下面的设置有效。

Set-Cookie: widget_session=abc123; SameSite=None; Secure

Network中的Cookie

Network中有response和request
Response Header中有Set-Cookie，由服务器端发送给浏览器
RequestHeader 中有Cookie，有浏览器发送给服务器

Cookie 与 CSRF

CSRF 攻击是什么

看一张图

CSRF，跨站请求伪造（Cross-Site Request Forgery，简称CSRF）是指，攻击者可能利用网页中的恶意代码强迫受害者浏览器向被攻击的Web站点发送伪造的请求，篡夺受害者的认证Cookie等身份信息，从而假冒受害者对目标站点执行指定的操作。
举例来说，用户登陆了银行网站your-bank.com，银行服务器发来了一个 Cookie。

Set-Cookie:id=a3fWa;

用户后来又访问了恶意网站xxx.com，上面有一个表单。

<form action="your-bank.com/transfer" method="POST">
  ...
</form>

用户一旦被诱骗发送这个表单，银行网站就会收到带有正确 Cookie 的请求。为了防止这种攻击，表单一般都带有一个随机 token，告诉服务器这是真实请求。

<form action="your-bank.com/transfer" method="POST">
  <input type="hidden" name="token" value="dad3weg34">
  ...
</form>

这种第三方网站引导发出的 Cookie，就称为第三方 Cookie。它除了用于 CSRF 攻击，还可以用于用户追踪。

比如，Facebook 在第三方网站插入一张看不见的图片。

<img src="facebook.com" style="visibility:hidden;">

浏览器加载上面代码时，就会向 Facebook 发出带有 Cookie 的请求，从而 Facebook 就会知道你是谁，访问了什么网站。

js与cookie

document.cookie

JacaScript 通过 document.cookie 访问 Cookie
通过Document.cookie属性可创建新的Cookie，也可通过该属性访问非HttpOnly标记的Cookie。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

js-cookie

npm i js-cookie

简单用法

Cookies.set('name', 'value')

从现在开始，7天后过期

Cookies.set('name', 'value', { expires: 7 })

添加path

Cookies.set('name', 'value', { expires: 7, path: '/' })

读Cookie

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

获取所有Cookie

Cookies.get() 

配置域名

Cookies.get('foo', { domain: 'sub.example.com' }) 

更多用法，参见github

参考
再好好聊聊 HTTP 里的 Cookie | 实用 HTTP
HTTP无状态协议
HTTP协议-Cookie和Session详解
Cookie 的 SameSite 属性