深入浅出前端本地储存

其中 Secure 是只允许 Cookie 在 HTTPS 请求中被使用

而 HttpOnly 则用来禁止使用 JS 访问 cookie

ducoment.cookie // 访问被禁止了

这样最大的好处是避免了 XSS 攻击

XSS 攻击

---

比如你在水一个论坛，这个论坛有个 bug：不会对发布内容中的 HTML 标签进行过滤

某一天，一个恶意用户发了个帖子，内容如下：

 

当你访问这条帖子的内容时，浏览器就会执行 <script> 中的代码，导致你的 Cookie 被发送给攻击者，接着攻击者就可以利用你的 Cookie 登录论坛，然后为所欲为了

XSS 攻击在很多情况下，用户甚至不会知道自己被攻击了，比如利用 <img/> 的 src 属性，就可以做到悄无声息的把用户的信息发给攻击者

而当设置了 HttpOnly 后，ducoment.cookie 将获取不到 Cookie，攻击者的代码自然就无法生效了

Cookie 总结

总而言之，Cookie 在今天的适用场景其实比较有限，当你需要在本地储存数据时，由于安全性和储存空间的问题，一般不推荐使用 Cookie，大部分情况下使用 Web Storage 是个更好的选择

Web Storage

===========

在 2014 年年底发布的 HTML5 标准中，新增了一个 Web Storage 的本地储存方案，其包括

• LocalStorage

• SessionStorage

SessionStorage 和 LocalStorage 使用方法基本一致，唯一不同的是，一旦关闭页面，SessionStorage 将会删除数据；因此这里主要以 LocalStorage 为例

LocalStorage 的特点是：

• 使用 Key-Value 形式储存

• 使用很方便

• 大小有 10MB

• Key 和 Value 以字符串形式储存

LocalStorage 的使用非常简单，比如要在本地保存 userId：

localStorage.setItem(‘userId’, ‘123’);

console.log(localStorage.getItem(‘userId’)); // 123

只要用 setItem 保存过一次，哪怕用户关闭了页面，再次打开页面时都可以用 getItem 获取到想要的数据

LocalStorage 一出现，就在许多应用场景彻底替代了 Cookie，大部分需要在浏览器上存数据的场景，都会优先使用 LocalStorage

它和 Cookie 的主要区别是：

• 储存空间更大，使用更方便

• Cookie 可以被服务器设置，而 LocalStorage 只能前端手动操作

• Cookie 的数据会由浏览器自动发给服务器，LocalStorage 需要手动取出来放到请求里面才会发给服务器，因此可以避免 CSRF 攻击

CSRF 攻击

---

假设你在浏览器中登录过某个银行 bank.com，这个银行系统使用 Cookie 来保存你的登录态

接着你访问了一个恶意网站，该网站中有一个表单：

（假设 bank.com/transfer 是用来转账的接口）

当你被诱导点下了提交按钮后：

1. 由于 form 表单提交是可以跨域的，你将会对 bank.com/transfer 发起一次 POST 请求

2. 由于此前你已经登录过 bank.com，浏览器会自动将你的 Cookie 一并发送过去（即使你当前并未处于银行系统的页面）

3. bank.com 收到你的带 Cookie 的请求后，认为你是正常登录了的，导致转账成功进行

4. 最终你损失了一大笔钱

注意即使用 Cookie 配合 HTTPS 请求，CSRF 攻击也无法被避免，因为 HTTPS 请求只是对传输的数据进行了加密，而 CSRF 攻击的特点是，诱导你去访问某个需要你的权限的接口，HTTPS 并不能阻止这种访问

这里的 CSRF 攻击的核心，就是利用了浏览器会自动在所有请求里带上 Cookie 的特性

因此，LocalStorage 比较常见的一个替代 Cookie 的场景就是登录态的保持，比如用 token 的方法加上 HTTPS 请求，就可以很大程度上提高登录的安全性，避免被 CSRF 攻击（但是依然无法完全避免被 XSS 攻击的风险）

大概工作流程就是，用户登录后，从服务器拿到一个 token，然后存进 LocalStorage 里，之后每次请求前都从 LocalStorage 里取出 token࿰