说说 cookie, localStorage, sessionStorage

MrSeaWave commented 3 years ago

cookie 确实非常小，它的大小限制为4KB左右,主要用途有保存登录信息

localeStorage 用于本地存储,一般为5MB，除非被清除，否则永久保存，只要不同源就不能共享localStorage的数据

sessionStorage :会话，一般5mb仅在当前会话下有效，关闭页面或浏览器后被清除

客户端（浏览器）出于安全性考虑，无论是 localStorage 还是 sessionStorage 都会受到同源策略限制。

参考

参考 2

Chrome无痕模式下无法使用localStorage和sessionStorage的兼容方案

LocalStorage：

在同源的所有标签(tab)页之间共享数据。
在浏览器重启甚至系统重启后仍然存在。

SessionStorage:

只能存在于同一标签(tab)页的会话中，不同标签页不共享。
它在同一标签页下的 iframe 之间是共享的（假如它们来自相同的源）。
数据在页面刷新后仍然保留，但在关闭/重新打开浏览器标签页后不会被保留。

MrSeaWave commented 3 years ago

sessionStorage 浏览器关闭时或是时间超时都会失效
cookie主要是用于客户端存储，也用于与服务端的校验，在后台发送请求的时候会在请求时携带。浏览器关闭不会失效，所以安全性不高。它的存储时间长，比如我们经常使用的登录状态保持功能
localStorage用于的是本地存储，安全性低。不受存储时间限制，只能是手动清除

MrSeaWave commented 3 years ago

Servlet容器提供了Session机制以跟踪用户；

默认的Session机制是以Cookie形式实现的，Cookie名称为JSESSIONID；

通过读写Cookie可以在客户端设置用户偏好等。

MrSeaWave commented 3 years ago

服务端中设定session

在浏览器中的表现，存放到cookie中

MrSeaWave commented 3 years ago

Cookie 的 SameSite 属性

Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。

三个值：

Strict: Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。
Lax: Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。
None: Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

MrSeaWave commented 3 years ago

Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
Lax 允许部分第三方请求携带 Cookie，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。(Cookies允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送。这是浏览器中的默认值。)
None 无论是否跨站都会发送 Cookie

https://juejin.cn/post/6844904095711494151#heading-14

同源策略作为浏览器的安全基石，其「同源」判断是比较严格的，相对而言，Cookie中的「同站」判断就比较宽松：只要两个 URL 的 eTLD+1 相同即可（eTLD+1 表示：有效顶级域名+二级域名）

LAX 导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。详见下表。

MrSeaWave commented 2 years ago

限制访问 Cookie

有两种方法可以确保 Cookie 被安全发送，并且不会被意外的参与者或脚本访问：Secure 属性和HttpOnly 属性。

标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端，因此可以预防 man-in-the-middle 攻击者的攻击。但即便设置了 Secure 标记，敏感信息也不应该通过 Cookie 传输，因为 Cookie 有其固有的不安全性，Secure 标记也无法提供确实的安全保障, 例如，可以访问客户端硬盘的人可以读取它。

从 Chrome 52 和 Firefox 52 开始，不安全的站点（http:）无法使用Cookie的 Secure 标记。

JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的cookie；此类 Cookie 仅作用于服务器。例如，持久化服务器端会话的 Cookie 不需要对 JavaScript 可用，而应具有 HttpOnly 属性。此预防措施有助于缓解跨站点脚本（XSS） (en-US)攻击。

示例：

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

这个意思就是说，如果某一个Cookie 选项被设置成 HttpOnly = true 的话，那此Cookie 只能通过服务器端修改，Js 是操作不了的，对于 document.cookie 来说是透明的。

MrSeaWave commented 2 years ago

应用解释：https://web.dev/i18n/zh/samesite-cookies-explained/

MrSeaWave commented 2 years ago

具体名词解释 https://zh.javascript.info/cookie

MrSeaWave commented 2 years ago

Lax get 表单例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 同一站点下发送cookie -->
    <!-- <form 
      action="https://codepen.io/mrseawave/pen/GRyrLpx/send-cookie" 
      method="get" 
      class="form-example"> -->
    <!--   发送juejin的cookie -->
    <form
      action="https://juejin.cn/post/6844904095711494151#heading-14"
      method="get"
      class="form-example"
    >
      <div class="form-example">
        <label for="name">Enter your name: </label>
        <input type="text" name="name" id="name" required />
      </div>
      <div class="form-example">
        <label for="email">Enter your email: </label>
        <input type="email" name="email" id="email" required />
      </div>
      <div class="form-example">
        <input type="submit" value="Subscribe!" />
      </div>
    </form>
  </body>
</html>

juejin 上的cookie都会被携带上：

z-memo / interview

说说 cookie, localStorage, sessionStorage #81

Cookie 的 SameSite 属性

限制访问 Cookie