阅读 45

Cookie笔记

概述

概念

  • 保存在浏览器的一小段文本信息
  • 一般每个<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 属性

  • expires domain path secure
  • secure 只有在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的生成

  1. cookie通常在服务器端生成.如果服务器希望在浏览器保存cookie,需要在HTTP response header 设置Set-Cookie
  2. 可以包含多个Set-Cookie字段,即可在浏览器生成多个Cookie
  3. Set-Cookie字段可以附加Cookie属性
  4. 服务器改变一个已有的Cookie需要满足四个属性的匹配:key domain path secure.只要有一个不同就会生成全新的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的发送

  1. 浏览器向服务器发送HTTP请求时,每个请求都会带上相应的Cookie.

    HTTP request header Cookie字段

  2. Cookie字段可以包含多个Cookie,用;分隔

  3. 服务器收到浏览器发来的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
复制代码

参考

JavaScript标准参考教程-cookie

不会吧不会吧,不会现在还有人分不清 Cookie、Session、Token、JWT吧

一文带你超详细了解Cookie

文章分类
前端
文章标签