每日小知识——Cookie

Cookie

Cookie是服务器保存在浏览器的一小段文本信息，大小不超过4KB。浏览器每次向服务器发送请求，就会自动那个附上这段信息。

用途

• 对话管理：保存登录、购物车等需要记录的信息
• 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等。
• 追踪用户：记录和分析用户行为。

Cookie的元数据：

• Cookie的名字
• Cookie的值
• 到期时间
• 所属域名
• 生效的路径

Cookie的生成：

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

设置一个Cookie的各种数据

Cookie的发送

Cookie: name=value; name2=value2; name3=value3

Cookie字段可以包含多个 Cookie，使用分号（;）分隔。

发送一个Cookie给服务器，服务器接收Cookie，此时服务器两点不知道：

• Cookie的各种属性
• Cookie的所属域名

Cookie的属性

• Expires / Max-Age

  Expires属性表示这一个Cookie的到期时间。

  • 属性名：Expires
  • 属性值：UTC格式的时间字符串（可以通过Date.prototype.toUTCString()转换）

  Max-Age属性表示从现在开始到这个Cookie存在的秒数。

  • 属性名：Max-Age
  • 属性值：数字（表示多少秒）

• Domain / Path

  Domain属性可以用于浏览器在发送Http请求时，设置Cookie的所属域名。（默认当前域名）

  Path属性可以用于在发送Http请求时，设置Cookie的所属路径。

• Secure / HttpOnly

  Secure属性指定只在加密协议HTTPS，才能将Cookie发送到服务器。如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性没有值。

  HttpOnly属性指定Cookie无法通过JavaScript脚本获取到。（即无法通过document.cookie属性、XMLHttpRequest对象、Request API等获取）（可以防止恶意脚本读取Cookie）

• SameSite

  SameSite属性用来防止CSRF攻击和用户追踪。

  CSRF攻击：Cookie 往往用来存储用户的身份信息，恶意网站可以设法伪造带有正确 Cookie 的 HTTP 请求，这就是 CSRF 攻击。

  用户追踪：比如facebook在第三方网站插入看不见的图片<img src="facebook.com" style="visibility:hidden;">，当你点击到时，浏览器就会加载上面代码，就会向Facebook发送带有Cookie的请求，Facebook就会知道你是谁，访问了什么网站。

  Cookie可以设置3个值

  • Strict：完全禁止第三方Cookie

  • Lax：不发送第三方Cookie，除Get请求（Get请求包括链接、预加载、Get表单）

    请求类型：

    请求类型一共有7中，包括链接、预加载、Get表单、POST表单、iframe、AJAX、Image。设置了Lax后则POST表单、iframe、AJAX、Image这4中请求类型不会发送Cookie。

  • None：关闭SameSite属性。

Cookie的读取和设置

读取：

document.cookie //读取当前网页的Cookie

设置

//例
document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";
document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

删除

//唯一方法:设置expires为一个过去的时间
document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT'; //删除名为fontSize的Cookie

参考：https://wangdoc.com/javascript/bom/cookie.html