关于Cookie的知识的总结

Posted 2020-09-19

Cookie的类型

会话cookie和持久cookie

会话cookie是一种临时cookie，它记录了用户访问站点时的设置和偏好，当用户退出浏览器时，会话cookie就会被删除。

持久cookie的生存时间更长一些，它存储在用户的硬盘上，浏览器退出或计算机重启时他们仍然存在。

会话cookie与持久cookie之间的唯一区别就是它们的过期时间。

如果设置了Discard参数（cookie版本1中的参数），或者没有设置Expires或者Max-Age参数（cookie版本1中的参数）来说明扩展的过期时间，这个cookie就是一个会话cookie。

Cookie是如何工作的

Cookie可以通过服务器进行设置，相当于服务器给用户贴的一个标签，用于跟踪用户的状态。

通过服务器设置的cookie信息通过响应头返回给浏览器，浏览器将响应头中的cookie信息保存在本地，当下次向服务器发送HTTP请求时，就自动将保存的这些cookie信息添加到请求头中（包含通过document.cookie接口设置的cookie）。

下面是退出博客园登录时的响应头和请求头，响应头中有Set-Cookie字段，请求头中有Cookie字段：

通过BOM提供的document.cookie接口，在前端可以对cookie进行操作（增、删、改），本质上是对符合一定规律的一个字符串进行操作，这样开发人员就可以利用cookie在本地存储一些数据。当然，建议存储一些非敏感信息。

Cookie的限制和组成

Cookie的限制

Cookie的限制主要有两条：

1. 访问cookie时的同源限制

2. Cookie的个数和尺寸限制

同源限制

Cookie在性质上是绑定在特定的域名下的。当创建了一个cookie后，再给创建它的域名发送请求时，请求头中都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的域访问，而无法被其他域访问。

个数和尺寸限制

每个域名下可绑定的cookie的个数是有限的，不同浏览器所限制的个数不同。

浏览器对同域名下cookie个数的限制见下表：

浏览器	可绑定的cookie的个数
IE6	20
IE7	50
Firefox	50
Opera	30
Safari	没有硬性限制
Chrome	没有硬性限制

当超过单个域名限制之后还要再设置cookie，浏览器就会清除以前设置的cookie。

浏览器中对于单个cookie的尺寸也有限制，一般限制在4MB。尺寸限制影响到一个域名下的所有cookie，而并非每个cookie单独限制。

Cookie的组成

名称和值 name = value：必填。name和value都是字符序列，除非包含在双引号内，否则不包括分号、逗号、等号和空格。Web服务器可以创建任意的name=value关联，浏览器在后继对站点的访问中会将其送会给web服务器。

域  domain：可选。表示该cookie对于哪个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。这个值可以包含子域（如www.wrox.com，表示该cookie信息只向该域名发送），也可以不包含（如.wrox.com，则对于wrox.com的所有子域都有效）。如果没有明确规定，那么这个域会被认作来自设置该cookie的那个服务器所在的域。

路径  path：可选。通过这个字段可以为服务器上特定的文档分配cookie。如果path字段是一个URL路径前缀，就可以附加一个cookie。例如：路径 /foo与 /foobar和 /foo/bar.html相匹配。路径 / 与域名中的所有内容都匹配。默认值是设置 Cookie 时的当前目录。

失效时间  expires（新版的cookie规范中是max-age字段）：可选。这个字段会指定一个日期字符串，用来定义cookie的实际生存期。一旦到了这个日期，就不再存储或发布这个cookie了，该cookie就会被删除。如果设置的日期是以前的时间，则cookie会被立刻删除。

日期格式为GMT格式：Wdy, DD-Mon-YYYY HH:MM:SS GMT。

安全标志  secure：可选。该字段不是键值对的形式，如果要指定该字段，只要在设置cookie时添加secure字符即可。设置了该字段后，该cookie只有在使用SSL连接的时候才发送到服务器。例如：指定域为www.wrox.com的cookie，在制定了secure字段后，该cookie只能发送给https://www.wrox.com，而发送给http://www.wrox.com的请求不会添加该cookie。

HTTP专用  HttpOnly：可选。该字段只能在服务端设置，表示该cookie是否能通过JS（BOM的document.cookie接口）去访问。默认情况下HttpOnly字段为空，表示可以通过JS访问该cookie。

按照规范，开发人员无法利用JS在前端修改cookie的HttpOnly字段，不过有的浏览器没有这个限制，具体看这篇文章：浏览器中因cookie设置HttpOnly标志引起的安全问题

关于如何在服务端设置该字段，请看这篇文章：关于Cookie安全性设置的那些事

注意：域、路径、失效时间、安全标志（secure）和HttpOnly字段都是服务器给浏览器的指示，告诉浏览器如何存储和发送cookie，这些参数并不会作为发送到服务器的cookie信息的一部分，只有cookie中的名值对儿（name=value）才会被发送。

在前面的图片中，响应头中的一个Set-Cookie就代表一个cookie；请求头中的Cookie字段中可以包含多个cookie的名值对儿，而不是仅包含一个cookie的名值对儿。

BOM的document.cookie接口

当用来获取cookie时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名值对儿。

例如，我在Chrome中打开这个页面：https://segmentfault.com/a/1190000004556040，在控制台中输入以下代码：

console.log(document.cookie);

控制台中会输出以下结果：

phpSESSID=web2~f57e474e4a8mc396h4du05qsa0;
Hm_lvt_e23800c454aa573c0ccb16b52665ac26=1495500966; 
Hm_lpvt_e23800c454aa573c0ccb16b52665ac26=1495500966;
_ga=GA1.2.1399344530.1495500966; 
_gid=GA1.2.584865054.1495500966; 
showRegister2=; 
showRegister=

有七个由分号分隔得名值对儿，表示有七个cookie可用（所有名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。）。

点击开发者工具中的Application选项，在左边找到Cookies下拉菜单，点击第一个域名，就可以看到这七个cookie的详细信息。具体如下：

当用于设置cookie时，document.cookie可以设置一个新的cookie字符串，这个cookie字符串会被解释并添加到当前现有的cookie集合中。其中名值对儿（name=value）是必须的（最好用encodeURIComponent()对name和value进行编码），其它字段在cookie的组成部分已做过介绍。

通过document.cookie设置的cookie并不会覆盖现有的cookie，除非设置的cookie的name在现有cookie集合中已经存在，并且path/domain/secure这几个选项一定要和旧cookie 保持一样。否则不会修改旧cookie，而是添加了一个新的 cookie。

例子（使用wamp环境）：

PHP代码：

<?php setcookie("abc", "test",null, ‘/‘ );   ?>

HTML代码：

<button id="btn" type="button" value="submit">发送请求</button><button id="display-cookie" type="button" value="submit">显示cookie</button><button id="reset-cookie" type="button" value="submit">设置cookie</button>

JS代码：

function myAJAX(url) {    var xhr  = new XMLHttpRequest();
    xhr.onreadystatechange = function() {        if(xhr.readyState === 4) {            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(xhr.responseXML);
            } else {
                console.log(xhr.statusText);
                console.log(xhr.status);
            }
        }
    };
    xhr.open("get",url,true);//true表示异步，false表示同步
    //此处设置头部信息
    xhr.send(null);
}function init(){    var btn = document.getElementById(‘btn‘);    var displayCookie = document.getElementById(‘display-cookie‘);    var resetCookie = document.getElementById(‘reset-cookie‘);    var removeCookie = document.getElementById(‘remove-cookie‘);
    btn.addEventListener(‘click‘,function(event) {        var url = ‘cookie.php‘;
        myAJAX(url);
    },false);
    
    displayCookie.addEventListener(‘click‘,function(event) {
        console.log(document.cookie);
    },false);

    resetCookie.addEventListener(‘click‘,function(event) {
        document.cookie = "abc=ok;path=/"
    },false);
}
init();

 第一次打开该页面时，点击显示cookie按钮，控制台无输出内容，谷歌开发者工具中Application选项卡中的cookie选项中也为空。

点击发送请求按钮，在Network选项卡中查看头部信息：

在Application选项卡中的cookies选项查看cookie：

 现在点击显示cookie按钮：

只显示出了名值对儿，没有显示该cookie的其它字段的信息。

接下来点击设置cookie按钮，重设该cookie，然后再点击显示cookie按钮：

该cookie的值被重设为了ok。

我们再点击发送请求按钮，看看这一次请求的头部信息：

请求头中的Cookie字段是浏览器发送给服务器的cookie信息，cookie的值之前被我们设置为了ok。响应头中的Set-Cookie字段是服务器返回给浏览器的cookie信息（实际上这时，cookie的值又被设置为了test）（我只是描述这个现象，不知道理解的对不对。）。

没有删除已有cookie的直接方法。所以，需要使用相同的路径（path）、域（domain）和安全选项（secure）再次设置原cookie，并将失效时间设置为过去时间。

 

通过document.cookie设置的cookie也会被浏览器添加到请求头中。

举例，用document.cookie设置cookie：

document.cookie = encodeURIComponent(“username”) + “=” +encodeURIComponent(“jack”) + “; domain=.wrox.com; path=/”;

子cookie

子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名值对儿。

一种子cookie的格式：

name=name1=value1&name2=value2&name3=value3&name4=value4

本质上还是字符串的操作。

CORS中的cookie

（摘自阮一峰老师的文章：跨域资源共享 CORS 详解）

CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段为true。另一方面，开发者必须在AJAX请求中打开XMLHttpRequest对象的withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。