Cookie--小知识总结
一、何为cookie
由于http协议是无状态的,所以没法知道当前访问的客户端是谁,所以有了cookie这个东西,通过cookie来让服务端知道当前是谁访问我,可以看做是一个身份牌
二、cookie的工作流程
(1) 第一次用户登录的时候,输入用户名和密码信息,服务端接收后进行用户认证。
(2)服务端通过验证后,生成一个token以cookie的形式放在http的response header中一起返回给客户端。
(3)浏览器根据是否设置cookie的过期时间判断该cookie是会话cookie还是永久cookie,并将cookie存储在不同的位置。
(4)下次进行http请求时,请求头中会自动携带存储的cookie。
(5)服务端根据请求头中的cookie里面的token确认该用户的身份信息。
三、配置cookie
cookie 通常由后端配置(当然前端也可配置),通过在http响应头部设置cookie来添加cookie
前端设置cookie
使用document.cookie即可
比如:
document.cookie = 'name=ry;max-age=2000;domian=ryuan.me;path=/;secure'
cookie有以下的属性:
- max-age:cookie过期的时间,表示多少秒后过期。
- expires:设置cookie过期的一个日期,表示在什么时候过期。max-age优先级高一些。
- domian:设置cookie存放的域,没有设置则为当前主机的域。
- path: cookie存储的路径
- secure: 加入此配置项,表示cookie只能通过https协议进行传输。
后端设置cookie
通过设置响应头部信息,添加cookie,通过http响应返回给浏览器即可,浏览器收到cookie会自动保存下来。
var http = require('http');
http.createServer(function(req,res){
res.setHeader('status','200 ok');
res.setHeader('Set-Cookie','name=yyyy;max-age=10000;path=/;');
res.write('hello this is cookie test!!');
res.end();
}).listen(8800,()=>{
console.log('sever start at 8800');
});
后端可以设置cookie的属性,除了上述前端可以设置的之外,还有两个:
- httpOnly :添加来这个属性之后,表示前端不能JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问
- SameSite=Strict,SameSite=Lax
允许服务器设定一则 cookie 不随着跨域请求一起发送,这样可以在一定程度上防范跨站请求伪造攻击(CSRF)
四、单点登录
前提:cookie在不同的域之间是不可以访问,修改的。但是在同一个一级域里面,cookie是可以共享的。
举个例子:
- (不同域之间不能相互访问)跨域不能访问: 比如在qq.com和baidu.com之间是不可以访问到对方的cookie的
- 但是在同一个一级域里面,其子域是可以共享一个cookie的,比如在y.qq.com(QQ音乐的首页), v.qq.com(腾讯视频首页),他们两个都在qq.com这个一级域里面,所以,cookie在同一一级域里面可以共享,基于这个可以实现单点登录(也就是在qq音乐登录后,再访问腾讯视频后会自动登录你的qq号)
怎么实现
在设置cookie时对domain赋值成同一一级域名即可
比如node中:
res.setHeader('Set-Cookie','name=yyyy;max-age=10000;path=/;domain=qq.com';)
个人笔记总结,仅供参考,大步走多回头
等什么望穿秋水 任来世枯朽成灰
学习永无止境,专注前端