cookie相关

浏览器本地缓存 localstorage/sessionstorage/cookie

HTTP 是无状态的协议，每个请求都是完全独立的，服务端无法确认当前访问者的身份信息，无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪（知道是谁在访问我），就必须主动的去维护一个状态，这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现。

面试题

• cookie的HttpOnly的作用?
• 三者的区别？
• 怎么设置localstorage 过期时间 自动删除它
• cookie 哪些字段 怎么设置cookie，samesite了解嘛？
• 什么场景需要删除localstorage里的数据
• 两个页面之间怎么传参
• cookie在浏览器中的存储是什么样子的
• 请求默认会携带cookie么？
• 如何配置跨域允许携带cookie？子域也能携带cookie吗？
• 原生js获取cookie是如何获取的？
• localStorage存储的信息能窃取到吗?
• 开了两个完全一样的页面，cookie、localstorage、sessionstorage哪个能访问？
• 设置cookie的过期时间是由前端设置的吗？
• cookie是什么格式-字符串
• 说一下跨域请求如何携带cookie？

cookie

cookie的特点

1. cookie是不可跨域的，每个cookie都会绑定单一的域名，无法在别的域名下获取使用
2. cookie 是服务器发送到用户浏览器并保存在本地不超过4K的数据，当用户端发起请求时，会自动把当前域名下所有未过期的Cookie一同发送给服务器

cookie的主要属性

原生js操作cookie

/*
"A=1;B=2;..."
*/
function getCookie(name){
    let strcookie = document.cookie;//获取cookie字符串
    //设置document document.cookie = '.....'
    let arrcookie = strcookie.split(";");//分割
    //遍历匹配
    for ( let i = 0; i < arrcookie.length; i++) {
        let arr = arrcookie[i].split("=");
        if (arr[0] == name){
            return decodeURIComponent(arr[1]);//返回转义之后的结果
        }
    }
    return "";
}

cookie的使用

1.浏览器首次向服务器发起请求。
2.服务器响应时，会发送 Set-Cookie 响应头；浏览器会把这个头写入 Cookie。
3.在 Cookie 到期前，浏览器访问该域下的所有请求，都会带上这个 Cookie。

cookie的sameSite属性

新版本的谷歌浏览器默认屏蔽第三方的cookie

有什么作用
SameSite 属性可以让 Cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）

samesite属性值

cookie的同站共享
1.可以忽略协议和端口共享
http:// www.baidu.com:8080与https:// www.baidu.com:9090是可以共享cookie
2.顶级域名+二级域名相同可以共享
https:// running.aaa.com.cn与https:// slave.aaa.com.cn是可以共享cookie

cookie如何跨域

sameSite

必须满足的条件

• 网站开启 https 并将 Cookie 的 Secure 属性设置为 true
• SameSite 属性设置为 None
• Access-Control-Allow-Origin 设置为具体的 origin，而不是 *
• Access-Control-Allow-Credentials 设置为 true

samesite=none前提是secure属性为true，也就是必须使用https协议。

后续可能不可以设置成none了
跨域的笔记：https://blog.csdn.net/qq_41370833/article/details/124698995

sameParty 首选

sameParty可以把跨站的站点合起来，设置cookie在这个集合内部不会被当作第三方cookie对待。

必须满足的条件

• SameSite 属性设置为不能为strict
• 网站开启 https 并将 Cookie 的 Secure 属性设置为 true
• 包含sameParty属性

案例
首先需要定义First-Party集合：在.taobao.com、.tmall.com和.alimama.com三个站的服务器下都加一个配置文件，放在/.well-know/目录下，命名为first-party-set。
其中一个是“组长”，暂定为.taobao.com，在它的的服务器下写入

// /.well-know/first-party-set
{
	"owner":".taobao.com",
	"members": [".tmall.com", ".alimama.com"]
}

在其他组员的服务器下写入

// /.well-know/first-party-set
{
  "owner": ".taobao.com",
}

在发cookie时，需要注明same-party属性

Set-Cookie: id=nian; SameParty; Secure; SameSite=Lax; domain=.taobao.com

作者：前端私教年年
链接：https://juejin.cn/post/7087206796351242248
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

代理

代理是将
这种办法是安全的，因为你的所有Cookie行为都是在网关层进行处理的，基本不会出现带给第三方的情况。

三者的区别

同源政策主要限制了三个方面
当前域下的 js 脚本不能访问其他域下的 cookie、localStorage
当前域下的 js 脚本不能操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

两个同源页面之间怎么传参
html里localStorage用于本地键值对存储，可以在html里面通过监听storage事件，监听到localStorage的变化，来完成页面之间的数据传输。

//A
function test() {
    localStorage.setItem("a", '666')
}
//B
window.addEventListener('storage',(e) => {
    if(e.key === 'a'){
        let value = e.newValue;
    }
})

localstorage的定时删除 --重写localstorage方法

localStorage.setItem('test',1234567);
let test = localStorage.getItem('test');
console.log(typeof test, test); //输入是number类型,输出是string类型
//删除
localStorage.removeItem('test')

1.什么场景需要删除localstorage里的数据
比如存储的数据太多了，定期清理。
比如七天免登录，token过期之后，也可以把对应的localstorage清除

2.怎么设置 localstorage 过期时间 自动删除它?

• 存入数据时，顺带传入过去时间；
• 获取数据时，判断当前是否过期，过期返回 undefined; 否则正常返回数据。

//age表示过多久失效
Storage.prototype.setStorageWithAge = (key,value,age) =>{
	if(isNaN(age) || age<1)  throw new Error("age must be a number");
	 const obj = {
        data: value, //存储值
        time: Date.now(), //存值时间戳
        maxAge: age, //过期时间
    };
       localStorage.setItem(key, JSON.stringify(obj));
};
}

Storage.prototype.getStorageWithAge = key => {
    const { data, time, maxAge } = JSON.parse(localStorage.getItem(key));
    if (time + maxAge < Date.now()) {//说明已经过期了
        localStorage.removeItem(key);
        return undefined;
    }
    return data;
};

localStorage 和 sessionStorage 都继承自 Storage 对象， 所以我们可以扩展Storage原型方法。

身份认证 cookie/session/token

面试题

• JWT的原理是什么?session认证的原理是什么？区别是什么？
• cookie和token的区别？
• 为什么不用cookie存储token，localStorage存储的信息能窃取到吗？
• token一旦被颁发很难被撤销，如果我想让一个用户失去登录状态应该怎么做
• 保存登录状态怎么做的？如果遇到登录成功之后，token失效怎么处理？
• JWT的组成部分

session认证 cookie + session

客户端第一次发送登录请求时，服务器通过响应头的形式向客户端发送身份认证的Cookie，客户端会自动将Cookie保存在浏览器中
当客户端每次请求服务器时，浏览器会自动将身份认证相关的Cookie，通过请求头的Cookie字段发送给服务器，用于服务器验证客户端的身份。

1. 浏览器登录之后，服务器验证通过后，会为这次请求开辟一块内存空间，该对象就是seesion存放用户的相关时间，比如用户角色、登录时间等等。服务器向用户返回一个 session_id，写入用户的 Cookie。
   Session 弥补了 HTTP 无状态特性，服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。
2. 浏览器自动把cookie存储在当前域名下，客户端再次发送请求时，通过请求头自动把当前域名下所有可用的Cookie发送给服务器
3. 服务器根据cookie从内存中查找对应的用户信息，进行验证响应

缺点
Session 机制有个缺点，比如 A 服务器存储了 Session，就是做了负载均衡后，假如一段时间内 A 的访问量激增，会转发到 B 进行访问，但是 B 服务器并没有存储 A 的 Session，会导致 Session 的失效。

JWT(Json Web Token) 认证机制 Token + 本地存储

JWT(JSON Web Token)是目前最流行的跨域认证解决方案

1. 浏览器登录后，服务器利用用户信息，经过加密后生成Token字符串(Token中包含了用户信息)，将生成的Token字符串返回给客户端
2. 客户端通过代码将Token存储到LocalStorage或SessionStorage
3. 客户端再次发送请求时，通过请求头的Authorization字段(手动设置)，将Token发送给服务器

//Bearer 开头
Authorization:Bearer <token>
//request拦截器中
config.headers['Authorization'] = 'Bearer ' + getToken() 

4. 服务器通过还原Token字符串来认证用户信息

为什么不用cookie存储token?
cookie不允许跨域携带

Token的特点

• Token 完全由应用管理，所以它可以避开同源策略，添加在请求头中， Cookie不可以跨域
• Token 可以避免 CSRF 攻击 , Cookie存在CSRF攻击的问题，所以Token更安全
• Token 可以是无状态的，可以在多个服务间共享

JWT的组成部分

• Header(头部) 翻译出来是一个 JSON 对象，描述 JWT 的元数据,比如签名使用的算法，令牌的类型
• Payload(有效荷载) 是用户信息经过加密之后生成的字符串，翻译出来是存放需要传递的JSON格式的数据。
• Signature(签名) 对前两部分的签名，防止数据篡改。

session认证和JWT认证的区别

• 服务端渲染推荐使用session认证机制
  • 当前端请求后端接口不存在跨域问题时，推荐使用Session身份认证机制
  • 包含身份信息的session存储在服务器
• 前后端分离推荐使用JWT认证机制
  • 当前端需要跨域请求后端接口时，推荐使用JWT认证机制
  • 移动端对 cookie 的支持不是很好，而 session 需要基于 cookie 实现，所以移动端常用的是基于Token的JWT认证
  • 包含身份信息的Token存储在客户端

token过期与保持登录

登录之后将Token存储在本地LocalStorage+Vuex，每次发送请求都在请求头中携带Token。
如果token过期，主动刷新token，利用与token相关联的refresh token，refresh token作用是获取新的token，过期时间比token的时间长。

将token过期的处理放在响应拦截器中，当返回的响应码为401时，说明token过期了，需要利用refresh token重新获取新的token。重新获取token之后，重发请求。

• 新token请求成功
  • 更新本地token
  • 再发一次请求A
• 新token请求失败
  • 清空vuex中的token
  • 携带请求地址，跳转到登陆页