浏览器缓存cookie、session、localstorage、sessionstorage的区别

78 阅读 0 评论 52 点赞

我是靠谱客的博主俊逸手链，最近开发中收集的这篇文章主要介绍浏览器缓存cookie、session、localstorage、sessionstorage的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

0前言

Cookie是服务器保存再浏览器的一小段文本信息，一般来说，单个域名设置的 Cookie 不应超过30个，每个 Cookie 的大小不能超过4KB。
浏览器的同源策略规定，两个网址只要域名相同，就可以共享cookie。（不要求协议相同）

cookie不是理想的客户端存储机制，容量很小，缺乏操作接口，影响性能。客户端存储应该使用web storage API和IndexedDB。只有那些每次请求都需要让服务器知道的信息才放cookie里面。

cookie的设置

客户端发送请求到服务端；
当服务端收到请求时，再响应头里添加字段set-cookie；
浏览器收到响应后保存下cookie；
之后对该服务器的请求都通过cookie字段将cookie信息发送给服务器。

cookie的使用场景：

会话状态管理。如登录状态、购物车、游戏分数或其他需要记录的信息。
个性化设置。如用户自定义设置、主题
浏览器行为跟踪。如记录和分析用户行为。

cookie的缺点：

cookie可能被禁用
cookie与浏览器相关，但不能相互访问
cookie可能被用户删除
cookie安全性不够高
cookie存储空间很小

1.cookie与HTTP

cookie由HTTP协议生成，也主要时供HTTP协议使用。

如果服务器想改变一个早先设置的 Cookie，必须同时满足四个条件：Cookie 的key、domain、path和secure都匹配。

2.cookie的属性

2.1Expires属性
指定一个具体到期时间，到了指定时间之后，浏览器就不再保留这个cookie。
如果不设置此属性，或者为null，cookie只在当前会话（session）有效，浏览器一旦关闭，cookie就被删除。
另外，浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。

2.2Max-Age属性
指定从现在开始 Cookie 存在的秒数.过了这个时间，浏览器不再保留这个cookie。
如果同时指定了Expires和Max-Age，那么Max-Age的值将优先生效。

如果set-cookie字段没有设置这两个属性，那么这个cookie就是session cookie，它只在本次对话存在，浏览器关闭，cookie就被删除。

2.3 Domain属性和Path属性

Domain属性指定浏览器发出HTTP请求时，哪些域名要附带这个cookie。
如果没有指定此属性，默认当前域名。
如果服务器指定的域名不属于当前域名，浏览器会拒绝这个 Cookie。

Path属性指定浏览器发出HTTP请求时，哪些路径要附带这个cookie。
只要浏览器发现，Path属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如，PATH属性是/，那么请求/docs路径也会包含该 Cookie。当然，前提是域名必须一致。

2.4Secure HttpOnly

Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。
HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。

利用httponly可以阻止XSS攻击（跨站脚本）。
XSS(Cross Site Scripting)攻击（跨站脚本漏洞）。指黑客往HTML文件或者DOM中注入恶意脚本，从而用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。
一般XSS的实现方式：

存储型XSS攻击
反射型XSS攻击
基于DOM的XSS攻击

阻止XSS攻击的方法：

对输入脚本进行过滤及转码
利用csp，即浏览器中的内容安全策略，（由浏览器决定哪些资源加载）
利用Httponly将某些cookie设置为httponly。

2.5 SameSite

浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。
Cookie 往往用来存储用户的身份信息，恶意网站可以设法伪造带有正确 Cookie 的 HTTP 请求，这就是 CSRF 攻击。

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

Strict。最为严格，完全禁止第三方cookie，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。

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

缺点：规则过于严格，可能造成用户不好的体验。

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

CSRF攻击
利用服务器的验证漏洞和用户之间的登录状态来模拟用户之间的操作。
产生CSRF攻击后会导致：

自动发起get请求。
自动发起post请求；
引诱用户点击链接。

防护策略

验证来源站点，主要通过请求头中两个Header.Origin header（包含域名信息）和Refer header(包含具体的UTL)。
利用cookie的SameSite属性
CSRF token。

3.document.cookie属性

document.cookie属性用于读写当前网页的cookie。
读取的时候，它会返回当前网页的所有 Cookie，前提是该cookie不能有httpOnly属性。

document.cookie // "foo=bar;baz=bar"

document.cookie属性是可写的，可以通过它为当前网站添加 Cookie。

document.cookie = 'fontSize=14';

必须以key=value的形式书写。

但是，document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加。
document.cookie读写行为的差异（一次可以读出全部 Cookie，但是只能写入一个 Cookie），与 HTTP 协议的 Cookie 通信格式有关。
浏览器向服务器发送 Cookie 的时候，Cookie字段是使用一行将所有 Cookie 全部发**送；
服务器向浏览器设置 Cookie 的时候，Set-Cookie字段是一行设置一个 Cookie。

写入 Cookie 的时候，可以一起写入 Cookie 的属性。

document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";

属性值的等号两边，也是不能有空格的。
写入cookie例子：

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

Cookie 的属性一旦设置完成，就没有办法读取这些属性的值。
删除一个现存 Cookie 的唯一方法，是设置它的expires属性为一个过去的日期。

cookie和session的区别：

1.存储位置不同，cookie的数据信息存放在本地，session的数据存放在服务器上。
2.存储容量大小不同。cookie存储的容量较小，一般<=4kB，session的容量大小无限制。
3.存储有小区不同。cookie只要不超过过期时间就长期存储。session在超过一定时间(30分钟）后会失效，但是关闭浏览器时，为了保护用户信息，会自动调用session.invalidate()方法，清除掉session。
4.安全性不同。cookie存储在客户端，所以可以分析存放在本地的cookie并进行cookie欺骗，安全性较低。session存储在服务器，安全性高。
5.域支持范围不同。cookie支持跨域名访问，session不支持跨域名访问。
6.对服务器压力。cookie保存在客户端，不占用服务器资源，session保存在服务器端，每个用户都会产生一个session，session过多会消耗服务器资源。
7.存储数据类型不同。cookie中只能保管ASCII字符码，并需要编码方式存储为Unicode字符或者二进制数据session中能够存储任何类型的数据，包括且不限于string、interger、list、map等。