在 H5 之前,我们浏览器存储都只能使用 cookie,而一般我们会用 cookie 来存储我们的 SessionID,作为身份凭证。
对比其他存储方式
特性 | cookie | localStorage | sessionStorage | indexDB |
---|---|---|---|---|
数据生命周期 | 一般由服务器生成,可以设置过期时间 | 除非被清理,否则一直存在 | 页面关闭就清理 | 除非被清理,否则一直存在 |
数据存储大小 | 4K | 5M | 5M | 无限 |
与服务端通信 | 每次都会携带在 header 中,对于请求性能影响 | 不参与 | 不参与 | 不参与 |
安全问题
早年 cookie 使用有很多安全的问题,xss 和 csrf 攻击都围绕着 cookie 展开。
注入恶意脚本,形成 xss 攻击,就是为了获取 cookie。为此 cookie 有一个 http-only 属性,防止脚本用 document.cookie 来获取到 cookie。
跨域伪造正常请求,形成 csrf 攻击,就是利用 cookie 每次请求的带上的特性。为此 cookie 有一个 same-site 属性,阻止 cookie 跨域时带上。
属性 | 作用 |
---|---|
value | 如果用于保存用户登录态,应该将该值加密,不能使用明文的用户标识 |
http-only | 不能通过 JS 访问 Cookie,减少 XSS 攻击 |
secure | 只能在协议为 HTTPS 的请求中携带 |
same-site | 规定浏览器不能在跨域请求中携带 Cookie,减少 CSRF 攻击 |
这几个属性只能由服务器的Response Header设置:Set-Cookie
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly; SameSite=Strict
其中 SameSite 的属性解释:https://www.cnblogs.com/ziyunfei/p/5637945.html