客户端存储

阅读目录

1. localStorage和sessionStorage
2. cookie
   • 限制访问cookie的方式
   • cookie的作用域　　
   • 涉及cookie的安全问题
   • 解决cookie的跨域问题

 

---

回到顶部

localStorage和sessionStorage

• 两者都是HTML5新增的本地存储方式，可以以window.localStorage和window.sessionStorage的形式进行访问，里面的数据总是以键值对的字符串形式进行存储。通常使用它们的setItem()与getItem()分别对数据进行修改和读取。
  
• 两者的作用域都限定于文档源，也即遵循同源策略。文档源是通过协议、主机名以及端口三者来确定的，任何一个部分不同都属于非同源文档。
• localStorage存储的数据是永久性的，除非Web应用刻意删除或者用户通过设置浏览器配置来删除；sessionStorage存储的数据只保留到当前页面会话结束（页面关闭）前。
• 同源文档间共享同样的localStorage数据，而sessionStorage还限定于窗口作用域，也即同源文档渲染在不同的浏览器标签页中，各个页面之间的sessionStorage数据是独立的。但这里的窗口作用域是指顶级窗口，对于一个标签页内包含的<iframe>元素，若这些<iframe>元素包含的文档同源，那么它们是共享这一标签页的sessionStorage数据的。
• 存储在localStorage和sessionStorage上的数据一旦发生实质性改变（比如：对已经存在的存储项设置一模一样的值，或删除一个不存在的存储项，不会触发），浏览器都会在其他对该数据可见的window对象上触发storage事件，但对数据进行改变的window对象上不会触发。

 

回到顶部

cookie

　　cookie是Web服务器用来辨别用户身份而存储在用户本地上的一小块数据，一般不超过4KB。它是绑定域名的，当设定一个cookie后，每次给创建它的域名发送请求时都会将这个cookie发送出去。cookie同样以键值对形式保存，键和值都通常经过URL编码。编码时使用encodeURIComponent()，解码时使用decodeURIComponent()。cookie常常用于会话状态管理（如用户登录状态、购物车等需要记录的信息）、个性化设置（如用户自定义设置、主题等）和浏览器行为跟踪（如跟踪分析用户行为）。

工作流程如下：

1. 用户首次访问Web站点时，Web服务器通过回送包含Set-Cookie首部的响应，来标识用户；
2. 浏览器会记住从服务器返回的Set-Cookie首部中的cookie内容，并其存储在用户本地；
3. 当用户再一次访问同一Web站点时，浏览器会挑中该服务器贴到用户上的cookie，并在一个Cookie请求首部中将其传回去。

 

限制访问cookie的方式

Secure

　　设置了Secure属性的cookie只能通过被HTTPS协议加密过的请求发送给服务器。对于HTTP协议的站点是无法使用cookie的Secure属性的。

HttpOnly

　　JavaScript的document.cookie API无法访问带有HttpOnly属性的cookie。使用该属性可以有效缓解会话劫持或跨站脚本（XSS）这类攻击。

 

cookie的作用域　　

SameSite

　　该属性允许服务器要求某个cookie在跨站请求时不会发送，它有下面三个值：

• None：浏览器会在同站请求、跨站请求下继续发送cookie；
• Strict：浏览器只在访问相同站点时发送cookie；
• Lax：与Strict类似，但当用户从外部站点导航到URL时允许发送cookie；

 

涉及cookie的安全问题

• 会话劫持和跨站脚本（XSS）

　　在Web应用中，cookie常用来标记用户或授权会话。攻击者利用跨站脚本向客户端注入恶意代码来获取验证用户身份的cookie，从而导致授权用户的会话受到攻击。使用HttpOnly属性可以有效缓解此类攻击。

• 跨站请求伪造（CSRF）

　　攻击者使用户的浏览器在用户不同意或不知情的情况下让用户访问指定的网站，假如之前已经登录过该网站并且cookie仍有效，那么攻击者就能访问到服务器端的资源。因此，应该为包含敏感信息的cookie设置较短的生命周期（通过Expires属性或Max-Age属性）。

 

解决cookie的跨域问题

　　对于跨域请求，虽然我们在服务器的响应中携带了Access-Control-Allow-Origin：*首部来实现跨域，但查看请求可以发现，浏览器是不会发送cookie的（浏览器中SameSite属性的默认值为Lax）。要解决cookie的跨域问题，需要在客户端使用 XMLHttpRequest.withCredentials 属性来发送附带身份凭证的请求。同时，要求服务器的响应中携带 Access-Control-Allow-Credentials:true 首部，否则响应内容不会返回给浏览器。


　　另外，对于附带身份凭证的请求，要求服务器不得设置 Access-Control-Allow-Origin的值为“*”，应该设置为特定的域。否则请求失败。