阅读 509

【知识梳理】从Cookie的domain属性发现的

前言


  刚刚入职新公司,我阅读着团队维护的前端开发手册。在看到 Cookie 使用规范这一节时,其中谈到的 Domain 及使用场景让我产生了好奇。因为之前使用 cookie 基本上都是通过 js-cookie 这个库去操作的,很少通过浏览器原生的 api 去操作 cookie。这也导致我都没有设置过 cookie 的 domain 属性。我只能从字面上推测这是关于 cookie 起作用范围的属性。

  众所周知(以前我也不知道),cookie 是服务端生成发送到浏览器端的。浏览器端将 cookie 存储在本地,并且在之后每次的用户端 HTTP 请求头中都附带的一小段数据。前面这句话的重点有两个:1. cookie 是服务端生成。2. 生成后的每次请求都会带上 cookie。

下面就是我打开的一个 CSDN 文章的一个请求信息:

image.png image.png

  我们从图一可以发现两个信息:1. cookie 本身就是一个很长的字符串,不同key=value对之间通过「 ; 」分割,我们可以通过 document.cookie 访问。2. 我们在 Application 里面浏览的 cookie 是经过处理后的多条 key-value 结构的值。

  上面说了这么多,这里还需要补充一条隐藏且很重要的信息:cookie 是跟域名关联的。相当于整块 cookie 是作为 value 存储在浏览器端,它的 key 值就是域名了。

cookie 的重要属性


image.png

  1. Name

    即单条 cookie 信息的 key 值,我们通常也是通过这个 key 值设置和获取存储在 cookie 中数据。

  2. Value

    就是 key 对应的值。

  3. Expires/Max-Age

    此条 cookie 记录的到期时间。

  4. Domain

    此条 cookie 的作用范围。我们知道域名是分多个级别的,如:顶级域名、二级域名、三级域名等等。domain 属性是指可以访问该 cookie 的域名。如果设置为 '.baidu.com',那么末尾是 '.baidu.com' 结束的域名都可以访问到这个 cookie,要注意必须是 '.' 开头。这产生了一个效果,那就是 '.baidu.com' 下属的子域名也可以访问这个 cookie,例如: '.tieba.baicu.com'。

    上面所讲到的 domian 属性的效果,也为实现单点登录提供了技术基础。即通过在父级域名下设置 cookie,那么在多个子域名下就可以拿到父域名下的 cookie,从而不用重新登录。

    随着公司业务的复杂,前端会存在多个应用。那么为了更好的维护,一般多个应用是分开的。用户访问也是通过不同的子域名来访问不同的应用。那么就需要一个单点登录的需求:其中一个应用登录一次,其他子应用就不用登录了。

image.png

单点登录


  上家公司同事做了单点登录的业务,偶尔听见他和后端联调说一些东西。但是我并不是很理解单点登录的具体内容,这个“单点”又是什么意思?下面讲述一下我的理解。所谓的单点登录是指用户在一个站点如www.baidu.com登录后切换到另一个站点tieba.baidu.com时也自动 被 tieba 的 Server 判断为已经登录,反过来,只要用户在 tieba.baidu.com 登出后,切换到 www.baidu.com时后 www 的Server 也会判断到这一用户已经登出。

  因此,当我们在 www.baidu.com 登录时,我们可以在 .baidu.com 这个域下存入一条 cookie:

document.cookie = "userInfo=obj;path=/;domain=.baidu.com"

然后你在 tieba.baidu.com 下就能看到存入的 cookie 了。

如果你在 zhidao.baidu.com 下存入该条 cookie,那么在 www.baidu.com 和 tieba.baidu.com 下都不会看到这条 cookie,这就是 cookie 跨域。

总结


  domain 表示的是 cookie 所在的域,默认为请求的地址,如网址为www.baidu.com/search,那么 domain 默认为www.baidu.com。而跨域访问,如域A为k1.baidu.com,域B为k2.baidu.com,那么在域A生产一个令域A和域B都能访问的cookie就要将该 cookie 的 domain 设置为 .baidu.com;如果要在域A生产一个令域A不能访问而域B能访问的 cookie 就要将该 cookie 的 domain设置为k2.baidu.com。注意:一般在域名前是需要加一个"."的,如"domain=.baidu.com"。

参考文章


  1. 正确使用cookie中的domain
  2. cookie的domain属性
文章分类
前端
文章标签