陌上寒

陌上寒个人博客

chrome Network 之Cookie

chrome Network 之Cookie

《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浏览器,进入京东(非登录状态)
选择商品,然后加入购物车
《chrome Network 之Cookie》
提示加车成功,我们看到购物车数量从0变为了1
《chrome Network 之Cookie》
点击去购物车结算按钮
《chrome Network 之Cookie》
提示登录,我们点击登录
登录后,我们看到,非登录状态添加的商品,已经在购物车里面了
《chrome Network 之Cookie》
为什么?
请思考🤔
非登录状态下,调用加车接口,服务器端通过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
《chrome Network 之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 表单。详见下表。

《chrome Network 之Cookie》

设置了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,有浏览器发送给服务器
《chrome Network 之Cookie》

Cookie 与 CSRF

CSRF 攻击是什么

看一张图
《chrome Network 之Cookie》
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 属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注