广告是如何跟踪我们的？所有关于 cookie

廖宜康，Happy every day 前端开发工程师！

前言

作为前端开发，cookie是我们经常需要打交道的东西。我们用它来鉴权，用它来实现行为跟踪，用它给无状态的 http 协议以“状态”。本文就聚焦这个小小的 cookie，把 cookie 掰开了，揉碎了讲一讲，它是如何被我们利用的。

本文以 Chrome 浏览器 96.0.4664.55 版本作为客户端环境，后续所有代码说明都基于该版本的浏览器。主要阐述以下四点：

cookie 的现有属性
cookie 如何被用来跟踪我们
cookie 前端管理实践
cookie 的未来

话不多说，开冲！

一、cookie 的属性们

在详细的属性说明之前，我们先让新老朋友重新熟悉一下 cookie。

cookie 官方定义：魔法曲奇饼，不是

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The browser may store the cookie and send it back to the same server with later requests. Typically, an HTTP cookie is used to tell if two requests come from the same browser—keeping a user logged in, for example. It remembers stateful information for the stateless HTTP protocol.

由官方定义可知，cookie 是一个存储在用户端设备上的小块数据。这里的定义指的是由 HTTP 请求的响应头set-cookie创建的 cookie。现在我们也可以使用 document.cookie来访问和手动创建第一方 cookie。

1.1 为什么要 `cookie`

大家都知道，因为有需求所以才有市场，技术也一样，cookie 就是这样出现的。cookie 的由来是著名的 Netscape 在给客户开发电子商务程序时，客户要求服务端不必须存储事务状态。那没办法，服务端不想存，只能客户端出力了。由此 cookie 诞生了。我们常用的 http 协议是无状态的协议，这也是为什么他这么快的原因之一。但很多时候我们需要知道是谁给我们发过来的请求，我们需要记录用户状态。

所以 cookie 诞生的原因：

服务端不想存状态
我们需要存状态

可能有人会说，那我这个状态存在sessionStorage里行不行，存在localStorage里行不行，甚至我自己放个自定义的参数放请求头里来表示状态行不行。

既然这么说了，当然是行的，浏览器发展到现在，很多存储方式被用来替代 cookie，但是 cookie 仍然存在其独特性。比如同域之间可共享，服务端可设置......所以具体怎样的方案取决于你的实际场景。

1.2 属性详解

打开浏览器的devtool面板

可以看到，上面有 cookie 发展至今的所有属性，那这些属性分别代表什么呢？

cookie 属性说明表

属性名	属性说明
name	`cookie` 的名字
domain	`cookie` 所属域，`domain`表明哪些域名下可以使用该 `cookie`，重要的属性。
path	`cookie`的使用路径，`path`标识指定了主机下的哪些路径可以接受 `cookie`。
Max-Age	`cookie`有效期，单位秒。如果为整数，则该`cookie`在`Max-Age`秒后失效。
Expires	`cookie`的失效时间，如果`cookie`没有设置过期时间，那么 `cookie` 的生命周期只是在当前的会话中，关闭浏览器意味着这次会话的结束，此时 `cookie` 随之失效。现在已经被 maxAge 属性所取代，需要是一个日期对象。
HttpOnly	属性可以阻止通过 javascript 访问`cookie`。document.`cookie`读取到的内容不包含设置了 HttpOnly 的`cookie`，从而一定程度上遏制这类攻击。
secure	它是一个布尔值，指定在网络上如何传输`cookie`，默认为 false，通过一个普通的 http 连接传输，标记为 true 的`cookie`只会通过被 HTTPS 协议加密过的请求发送给服务端。
SameSite	限制第三方 url 是否可以携带`cookie`。有 3 个值：Strict/Lax(默认)/None。
SameParty	Chrome 新推出了一个 `First-Party Sets` 策略，它可以允许由同一实体拥有的不同关域名都被视为第一方。之前都是以站点做区分，现在可以以一个 party 做区。`SameParty`就是为了配合该策略。（目前只有 Chrome 有该属性）
Priority	优先级，chrome 的提案（firefox 不支持），定义了三种优先级，Low/Medium/High，当`cookie`大小超出浏览器限制时，低优先级的`cookie`会被优先清除。（目前只有 Chrome 有该属性）

有人可能觉得啊，就这，就这一个表？是的，就这么多...是不可能的。既然要掰开了，揉碎了讲，当然要对每一个属性做详细的说明。这些点主要是关于平常我们使用 cookie 时候要注意的，也就是一些坑。

不废话了，让我们一个个开始讲。（标绿色的属性表示前端可以通过 js 直接操作的属性）

name

name 主要注意同名的问题，cookie 设置时不同 domain，不同 path 可以使用相同的 name。如果 domain、path 相同，那么后设置的 cookie 会覆盖先设置的。

除此之外还要注意一点，通过 js 操作cookie时，第一项永远对应的是name=value。即document.cookie="path=/;name=test"这样设置的结果不会是我们看上去的在/路径下配置了一个 value 为test的cookie。而是设置了一个cookie的 name 是path value 是/。

value

cookie 的值，仅支持字符串，如果使用其他类型，会调用 toString()方法进行转换。

domain

domain 要注意的点有很多，我们可以用它来实现前端跨域访问，单点登录（二级域名同域），跟踪用户.....主要要注意的有以下几个

js 设置 cookie 配置 domain时，只能设置第一方的。如在 example.com 使用js设置cookie，如document.cookie = token=123;domain=test.com是不会生效的。
js 设置cookie配置 domain时，如上一个例子，只要是手动配置该属性，无论这个属性前面有没有写明**“."**符号，都会自动加上 domian=.test.com，被配置通配域名的形式。
js 获取cookie时，目前通用的访问方式仍然是document.cookie这一个 API，所以在获取的时候我们是不知道当前的cookie是具体是属于哪一个domain的。

path

设置cookie的该属性时，该属性的必须存在于当前url的pathname中，和domain类似，否则无法设置。
设置 path 时如果设置配置的是相对路径，则会自动匹配设置为完整的pathname,如当前url为https://test.com/ab/cd，设置document.cookie = token=123;;path=ab，那么最终path就会是/ab/cd。
大家都知道cookie会在发送http请求时自动放入请求头。如果cookie设置了该属性，则会去匹配请求的路径中是否包含该属性的值，包含则会发送这个cookie。这里要注意一下path采用的是匹配的模式。如path为/test，那么/testtest也会匹配到。
path属性还存在一个作用，提升cookie的排序，通常我们设置cookie时，先设置的在前，后设置的在后。但是当cookie有path这个属性时，有path的会被提升到最前面（chrome 浏览器，其他浏览器未实验。）

这里还要注意下，设置path时，值要包含在当前url。但是我们最常用的ajax请求一般不是当前路径，所以会携带不上这个cookie。要注意区分，不是当前路径下的所有请求都会携带，而是请求的地址包含这个path才会携带。

Max-Age

cookie的删除都是利用过期时间来实现，将其过期时间Max-Age设置为<= 0的整数则可以删除该cookie。

Max-Age如果设置的是非整数，则过期时间默认为session，即到页面关闭即失效。
Max-Age的时间是秒，设置为 10，则表示 10 秒后过期，是符合我们的预期的。注意和下面讲的expires的区别。

Expires

Expires也是表示的过期时间，只不过相对max-age其出现的时间更早（对 IE8 以下有更好的兼容性）。现在更推荐使用Max-Age。使用Expires来设置过期时间有时候会出现一些我们困惑的情况。

Expires首先接受的是一个Date对象，其次特别要注意的是，cookie的过期时间是基于UTC时间。而国内的标准时间是 GMT时间，比UTC时间要快 8 小时。我们通过该属性设置过期时间时，如expires=${new Date()}。这里看着是把过期时间设置为了当前，cookie会立即失效，但是我们实际是把cookie的过期UTC时间设置为了当前时间，距离cookie真正失效还有 8 小时。有时我们通过expires去清除cookie时却没有清掉可能就是这个原因。
当我们同时设置Expires和Max-Age时，Max-age具有更高的优先级。

HttpOnly

该属性主要是用来做基础的 xss 攻击防御，js 在设置cookie时是无法配置该属性的。只有服务端通过set-cookie响应头返回的字段才能配置该字段。但是这也只是防君子罢了，不用太过依赖该属性。

Secure

secure和HttpOnly一样，都是为了cookie安全打出的组合拳。和HttpOnly不同的是，它允许通过 js 配置。

这里插入一点我在实践中发现的问题。有时候我们需要内网部署一些应用，通过前置机 ng 转发请求的形式来访问云端的服务。而访问前置机一般是直接访问ip的形式，这时候肯定不是 https 协议了。但是云端服务的响应头set-cookie中如果含有secure属性。（1）虽然可以通过 ng 传回来，但是是写不到内网机器里面的。（2）出现这种问题我们的处理方案通常是在 ng 这一层处理掉响应头的secure。这里要注意一下360 浏览器会检测到这种行为（不清楚具体原理），仍然无法写入cookie 。当前版本的 Chrome 则可以成功写入，不排除未了来 Chrome 更新阻止的可能。

SameSite

本属性是 chrome 51 新增的一个重要属性。三个值的意义如下

Strict: 仅允许发送同站点请求的的cookie。
Lax: 允许部分第三方请求携带cookie，即导航到目标网址的 get 请求。包括超链接，预加载和 get 表单三种形式发送cookie 。chrome 80+ 版本后，默认就是该值。
None: 任意发送cookie，设置为 None，必需要同时设置Secure=true，也就是说网站必须采用 https。

这里要区分一下跨站（cross-site）和跨域（cross-origin）两者不是一个概念。跨域是指 portal、host、port 之中的任意一个不同都被视为跨域。而跨站则比较宽松，只要二级域名相同就是同站（二级域名指 .com 这种顶级域名的下一级，如 test.com）。

默认配置该属性为Lax之后，主要影响的应该是我们的 post 表单、iframe、ajax 和 image，大家要注意。

SameParty

SameParty是 Chrome 为了 cookie的安全第三记组合拳。主要用来配合First-Party策略。所有开启了 First-Party Sets 域名下需要共享的 Cookie 都需要增加 SameParty 属性。如Set-Cookie:name=test;Secure;SameSite=Lax;SameParty。SameParty自身是没有值的，但是设置他必须设置了Secure且SameSite不能是 strict

First-Party 策略在后面“Chrome 是如何做的”中会详细说明。

Priority

上面说了很多可能有点啰嗦，这个属性就。。。没什么好说的，看上面的表格。

二、cookie 如何被用来跟踪我们

上面一大段介绍看完，大家应该对现在的cookie有了全面的了解。那cookie又是如何被我们利用的呢？

cookie最广泛的用途大家肯定都知道，无非传递传递鉴权信息，做做单点登录，这也是用的最多的用法。但是cookie自诞生以来就是各大广告商窥探用户隐私的利器。例如我今天在某猫搜了个 xx 杯，第二天贴吧，微博到处都是这个东西的推销广告。仿佛全世界都知道我看了这个东西（事实上他们确实知道）。那么他们是如何做到的呢？

2.1 第三方 cookie

了解普遍的做法之前，我们先区分一下第一方cookie和第三方cookie。我们一般认为cookie的 domain 存在于当前域名或当前域名的父级的cookie称为第一方cookie，否则为第三方cookie。虽然很多情况下“第三方”的cookie也是我们主动注入的罢了。

如下图以某宝举例：

.taobao.com下的就是第一方cookie，而这个.mmstat.com 很明显就是第三方cookie了。

2.2 广告与隐私

上面说到第三方cookie，可以说它是各种网络广告的罪魁祸首，而且是最便捷成本最低的那种。我们继续以上面的某宝举例。大家都能发现这个.mmstat.com这个域名。那这个网站是干什么的呢。

我首先去百度了下这个域名，域名本身无法访问，但是在百度的结果下面倒是发现一些好玩的词条

广告是如何跟踪我们的？所有关于 cookie相关推荐

java 会话跟踪技术_JavaEE基础(04)：会话跟踪技术，Session和Cookie详解
一.会话跟踪 1.场景描述比如登录某个购物网站,身份识别成功后,在网站下单,支付等操作,这些操作中当前登录用户信息必须是共享的,这样这些操作结果才能和登录用户做关联. 2.概念简介可以把会话理解 ...
JavaEE基础(04)：会话跟踪技术，Session和Cookie详解
本文源码:GitHub·点这里 || GitEE·点这里一.会话跟踪 1.场景描述比如登录某个购物网站,身份识别成功后,在网站下单,支付等操作,这些操作中当前登录用户信息必须是共享的,这样这些操 ...
会话跟踪技术，Session和Cookie详解
知识的广度来自知识的深度,学习如果不成体系那是多可怕的一件事儿,希望我们在未来的学习道路上坚守初心,不要给自己留下遗憾,以自己喜欢的方式生活,做自己喜欢做的事,宠爱自己,做一个独一无二的自己! 对于文 ...
location 拦截所有_电脑广告拦截软件 Adguard Premium
每日一谈我们上个网的时候经常会遇到很多烦人的广告.在线跟踪等,不仅导致你的网站加载速度非常的慢,并且还可能会导致你遇到一些恶意软件和威胁.为了避免这种情况的产生,今天我为大家推荐这款广告拦截软件来阻 ...
电脑广告弹窗多？安利一下：程序员常用 7 款Chrome去广告插件
互联网时代,大家都习惯在电脑或手机上查阅信息.观看视频.遇到不知道的东西,百度一下:想看的电视剧,爱奇艺腾讯A站B站搜一下.整个操作十分简单,大到八九十岁的老人,小到几岁孩子,都能做到.然而,很多时候 ...
Firefox附加在合谋表演，谁跟踪你上网
如果你对有关广告跟踪网络上,Mozilla可以帮你看看到底是谁的跟随你用Firefox的一个新的实验称为合谋附加在线.浏览器扩展创建一个所有被存放在您的浏览器上,当你在Web移动跟踪Cookie的 ...
屏蔽拦截广告(二、Android软件推荐)
安卓手机去除广告 1. 李跳跳 APP介绍李跳跳是一款弹窗广告跳过软件,能模拟点击很多软件启动的跳过按钮. 这是一款非常强大的广告跳过软件,软件功能强大,能够自定义规则,并且不收费用. 李跳跳页面也 ...
谷歌“隐私沙盒”引争议，广告业务与用户隐私难平衡？
在去年苹果默认关闭IDFA引发巨大争议后,今年,谷歌又带来了新"冲击". 近日,谷歌宣布将在Android系统上推出"隐私沙盒"(Privacy Sandbox ...
细思极恐，第三方跟踪器正在获取你的数据，如何防范？
细思极恐,第三方跟踪器正在获取你的数据,如何防范? 当下,许多网站都存在一些Web表单,比如登录.注册.评论等操作需要表单.我们都知道,我们在冲浪时在网站上键入的数据会被第三方跟踪器收集.但是,你知道 ...

广告是如何跟踪我们的？所有关于 cookie

前言