概述
概念
- 保存在浏览器的一小段文本信息
- 一般每个<4KB,单个域名<30个
- 浏览器向服务器发出请求(头的Cookie字段),会自动附上 在HTTP请求中,cookie的传递是明文的
常用使用场景
- 对话管理
- 个性化:保存用户偏好
- 追踪:记录和分析用户行为
不推荐作为客户端储存. 客户端储存应当使用 Web storage API 和 IndexedDB
包含以下几个方面信息
- cookie的名字
- cookie的值
- 到期时间
- 所属域名(默认是当前域名)
- 生效路径(默认当前网址)
cookie属性
cookie属性一旦设置完成,就没有办法读取这些属性的值
Expires , MAx-Age
Expires:指定具体Cookie保存在浏览器的到期时间,UTC格式,可使用Date.prototype.toUTCString()进行格式转换
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
Expires属性注意事项:
- 不设置该属性,或者设置为
null,Cookie只在当前会话有效,浏览器窗口一旦关闭,session结束,Cookie会被删除 - 时间依据是
本地时间,可能会有服务器时间和本地时间不一致的情况发生,因此无法保证Cookie一定会在服务器指定的时间过期.
Max-Age:指定从现在开始Cookie存在的秒数,例如60*60*24,过了这段时间,浏览器就不再保留这个Cookie.
Max-Age注意事项:
- 值=0,cookie立即失效
- 值<0,当前会话有效,关闭浏览器失效
- 不设置,默认当前会话有效
优先级:Max-Age>Expires
domain , path
domain 指定浏览器发送HTTP请求时,哪些域名要附带这个Cookie,浏览器要拒收哪些Cookie(服务器指定的域名不属于当前域名).
如果没有指定该属性值,默认将为当前URL的一级域名.
path 指定浏览器发出 HTTP 请求时,哪些路径要附带这个 Cookie.
只要浏览器发现,Path属性是 HTTP 请求路径的开头一部分,就会在头信息里面带上这个 Cookie。比如,PATH属性是/,那么请求/docs路径也会包含该 Cookie。当然,前提是域名必须一致。
Secure , HttpOnly
Secure 指定浏览器只能在HTTPS下,才能将这个Cookie发动到服务器.如果协议是HTTP浏览器会自动忽略该属性,该属性不需要指定值.如果是HTTPS属性,该开关自动打开.
HttpOnly指定该Cookie无法通过脚本拿到.主要针对Document.cookie XMLHttpRequest Request API都拿不到该属性.防止了该Cookie被脚本读到,只有浏览器发送HTTP请求时,才会带上Cookie
HttpOnly虽然防止了脚本的读取,但是可以通过 Application手动修改.因此不是绝对安全的
浏览器的cookie选项
window.navigator.cookieEnabled;// 表示浏览器是否打开cookie功能
document.cookie ; //当前网页的cookie
cookie的同源政策
网址只要域名和端口相同就可以共享cookie,忽略协议.
两个网址的次级域名不同,浏览器允许通过设置document.domain来使两个网页共享cookie 同源政策及解决方案
cookie的设置
cookie会被自动添加到 request header中
客户端设置
document.cookie 用于读写当前网页的所有Cookie(没有HttpOnly)
document.cookie="name=miao;age=1" ;//一次一个cookie
客户端可以设置的 cookie 属性
expiresdomainpathsecuresecure只有在https网页中才生效- 无法设置
httpOnly
服务端设置
服务端返回response
服务端通过response header中的Set-Cookie来设置cookie
一个set-cookie只能设置一个cookie,设置多个cookie需要同样多的set-cookie 服务端可以设置cookie的所有属性 具体可见cookie与HTTP小节
cookie与HTTP
cookie由HTTP协议生成,供HTTP使用,常被用于作为身份认证(会话管理)
HTTP response:cookie的生成
- cookie通常在服务器端生成.如果服务器希望在浏览器保存cookie,需要在HTTP response header 设置
Set-Cookie - 可以包含多个Set-Cookie字段,即可在浏览器生成多个Cookie
- Set-Cookie字段可以附加Cookie属性
- 服务器改变一个已有的Cookie需要满足四个属性的匹配:
keydomainpathsecure.只要有一个不同就会生成全新的Cookie而不是替换原来的Cookie
例子如下
* HTTP response header
** 1.服务器希望浏览器保存一个名为foo值为bar的Cookie
Set-Cookie:foo=bar
** 2.可以包含多个Set-Cookie字段,即可在浏览器生成多个Cookie
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
** 3.Set-Cookie附加Cookie属性
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
*** 比如Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
** 4. 修改Cookie
Set-Cookie: key1=value1; domain=example.com; path=/blog
Set-Cookie: key1=value2; domain=example.com; path=/blog
HTTP request: Cookie的发送
-
浏览器向服务器发送HTTP请求时,每个请求都会带上相应的Cookie.
HTTP request header Cookie字段
-
Cookie字段可以包含多个Cookie,用
;分隔 -
服务器收到浏览器发来的Cookie时有两点无法知道:
- Cookie的各种属性,比如何时过期
- 哪个域名设置的Cookie,到底是一级域名设置的,还是某一个二级域名.
例子如下
* HTTP request header
** 1.向服务发送 名为foo,值为bar的Cookie
Cookie:foo=bar
** 2. Cookie字段包含多个Cookie
Cookie:name=value;name2=value2;name3=value3
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry