Cookie

目录

概述

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

Cookie 保存以下几方面的信息。

  • Cookie 的名字
  • Cookie 的值
  • 到期时间
  • 所属域名(默认是当前域名)
  • 生效的路径(默认是当前网址)

举例来说,如果当前URL是www.example.com,那么Cookie的路径就是根目录/。这意味着,这个Cookie对该域名的根路径和它的所有子路径都有效。如果路径设为/forums,那么这个Cookie只有在访问www.example.com/forums及其子路径时才有效。

浏览器可以设置不接受 Cookie,也可以设置不向服务器发送 Cookie。window.navigator.cookieEnabled属性返回一个布尔值,表示浏览器是否打开 Cookie 功能。

document.cookie属性返回当前网页的 Cookie。

// 读取当前网页的所有cookie
var allCookies = document.cookie;

由于document.cookie返回的是分号分隔的所有 Cookie,所以必须手动还原,才能取出每一个 Cookie 的值。

var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {
  // cookies[i] name=value形式的单个Cookie
}

document.cookie属性是可写的,可以通过它为当前网站添加 Cookie。

document.cookie = 'fontSize=14';

Cookie 的值必须写成key=value的形式。注意,等号两边不能有空格。另外,写入 Cookie 的时候,必须对分号、逗号和空格进行转义(它们都不允许作为 Cookie 的值),这可以用encodeURIComponent方法达到。

但是,document.cookie一次只能写入一个 Cookie,而且写入并不是覆盖,而是添加。

document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie
// test1=hello;test2=world

document.cookie属性读写行为的差异(一次可以读出全部 Cookie,但是只能写入一个 Cookie),与服务器与浏览器之间的 Cookie 通信格式有关。浏览器向服务器发送 Cookie 的时候,是使用一行将所有 Cookie 全部发送。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
Accept: */*

上面的头信息中,Cookie字段是浏览器向服务器发送的 Cookie。

服务器告诉浏览器需要储存 Cookie 的时候,则是分行指定。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: cookie_name1=cookie_value1
Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT

上面的头信息中,Set-Cookie字段是服务器写入浏览器的 Cookie,一行一个。

如果仔细看浏览器向服务器发送的 Cookie,就会意识到,Cookie 协议存在问题。对于服务器来说,有两点是无法知道的。

  • Cookie 的各种属性,比如何时过期。
  • 哪个域名设置的 Cookie,因为 Cookie 可能是一级域名设的,也可能是任意一个二级域名设的。

服务器向浏览器发送 Cookie 的时候,除了 Cookie 本身的内容,还有一些可选的属性也是可以写入的,它们都必须以分号开头。

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

上面的Set-Cookie字段,用分号分隔多个属性。它们的含义如下。

(1)value 属性

value属性是必需的,它是一个键值对,用于指定Cookie的值。

(2)expires 属性

expires属性用于指定 Cookie 过期时间。它的格式采用Date.toUTCString()的格式。

如果不设置该属性,或者设为null,Cookie只在当前会话(session)有效,浏览器窗口一旦关闭,当前 Session 结束,该 Cookie 就会被删除。

浏览器根据本地时间,决定 Cookie 是否过期,由于本地时间是不精确的,所以没有办法保证 Cookie 一定会在服务器指定的时间过期。

(3)domain属性

domain属性指定 Cookie 所在的域名,比如example.com.example.com(这种写法将对所有子域名生效)、subdomain.example.com

如果未指定,默认为设定该Cookie的域名。所指定的域名必须是当前发送Cookie的域名的一部分,比如当前访问的域名是example.com,就不能将其设为google.com。只有访问的域名匹配 domain 属性,Cookie 才会发送到服务器。

(4)path 属性

path属性用来指定路径,必须是绝对路径(比如//mydir),如果未指定,默认为请求该 Cookie 的网页路径。

只有path属性匹配向服务器发送的路径,Cookie 才会发送。这里的匹配不是绝对匹配,而是从根路径开始,只要path属性匹配发送路径的一部分,就可以发送。比如,path属性等于/blog,则发送路径是/blog或者/blog/roll,Cookie都会发送。path属性生效的前提是domain属性匹配。

(5)secure 属性

secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器。

该属性只是一个开关,不需要指定值。如果通信是HTTPS协议,该开关自动打开。

(6)max-age

max-age属性用来指定Cookie有效期,比如60 * 60 * 24 * 365(即一年31536e3秒)。

(7)HttpOnly

HttpOnly属性用于设置该Cookie不能被JavaScript读取,详见下文的说明。

以上属性可以同时设置一个或多个,也没有次序的要求。如果服务器想改变一个早先设置的Cookie,必须同时满足四个条件:Cookie的keydomainpathsecure都匹配。也就是说,如果原始的Cookie是用如下的Set-Cookie设置的。

Set-Cookie: key1=value1; domain=example.com; path=/blog

改变上面这个 Cookie 的值,就必须使用同样的Set-Cookie

Set-Cookie: key1=value2; domain=example.com; path=/blog

只要有一个属性不同,就会生成一个全新的 Cookie,而不是替换掉原来那个 Cookie。

Set-Cookie: key1=value2; domain=example.com; path=/

上面的命令设置了一个全新的同名 Cookie,但是path属性不一样。下一次访问example.com/blog的时候,浏览器将向服务器发送两个同名的 Cookie。

Cookie: key1=value1; key1=value2

上面代码的两个 Cookie 是同名的,匹配越精确的Cookie排在越前面。

浏览器设置这些属性的写法如下。

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

另外,这些属性只能用来设置 Cookie。一旦设置完成,就没有办法读取这些属性的值。

删除一个 Cookie 的唯一方法是设置其expires为一个过去的日期。

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

上面代码中,名为fontSize的 Cookie 的值为空,过期时间设为1970年1月1月零点,就等同于删除了这个 Cookie。

浏览器对 Cookie 数量的限制,规定不一样。目前,Firefox 是每个域名最多设置50个 Cookie,而 Safari 和 Chrome 没有域名数量的限制。

所有 Cookie 的累加长度限制为4KB。超过这个长度的 Cookie,将被忽略,不会被设置。

由于 Cookie 可能存在数量限制,有时为了规避限制,可以将 Cookie 设置成下面的形式。

name=a=b&c=d&e=f&g=h

上面代码实际上是设置了一个 Cookie,但是这个 Cookie 内部使用&符号,设置了多部分的内容。因此,读取这个 Cookie 的时候,就要自行解析,得到多个键值对。这样就规避了 Cookie 的数量限制。

同源政策

浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享 Cookie。

注意,这里不要求协议相同。也就是说,http://example.com设置的Cookie,可以被https://example.com读取。

设置 Cookie 的时候,如果服务器加上了HttpOnly属性,则这个 Cookie 无法被 JavaScript 读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送。

Set-Cookie: key=value; HttpOnly

上面的这个 Cookie 将无法用 JavaScript 获取。进行 AJAX 操作时,XMLHttpRequest对象也无法包括这个 Cookie。这主要是为了防止 XSS 攻击盗取 Cookie。

留言

comments powered by Disqus