如何用Chrome读懂网站监测Cookie

tech2022-08-22  126

作者 | 朱顺意

责编 | 李雪敬

出品 | 云计算(ID:cloud)

网站监测工具用于标识用户的 Cookie 分为第1方 Cookie 和第3方 Cookie,这两者本质上没有什么区别,只是身份不同。Cookie 有 Domain 属性,当 Cookie 的 Domain 与当前访问的域名不同时,这个 Cookie 为第3方 Cookie,反之为第1方 Cookie。

由于 Domain 的不同,第1方 Cookie 记录的是用户在指定站点的行为,第3方 Cookie 记录的是用户在不同站点的行为。网站监测工具为你的站点创建了第1方 Cookie,这个 Cookie 属于你的站点,仅能用于记录你站点的用户行为,同时网站监测工具也创建了第3方 Cookie(属于它自己的Cookie),这个 Cookie 用于记录所有部署了监测代码站点的用户行为。

以 Chrome 为工具,我们来看看 Cookie 是怎么样的。

查看Cookie

步骤:打开 Chrome > 访问 www.zhihu.com > 按下 F12 打开 DevTools > 切换到 Application 面板 > 打开左侧 Cookies > 选择 www.zhihu.com。

可以看到,Cookie 有各种属性:

• Name:Cookie 名称。

• Value:Cookie 值。

• Domain:Cookie 域名,代表能读写这个 Cookie 的域。假设在 DevTools 这里 Domain 为“.zhihu.com”(最前面带点),则所有以“zhihu.com”结尾的域名都能读写这个 Cookie。假设 Domain 为“zhihu.com”(最前面不带点),此时 Cookie 仅为当前域所用。如果创建 Cookie 时不声明 Domain,则 Domain 的最前面不带点。如果创建 Cookie 时声明 Domain,则无论声明时有没有带点,在 DevTools 都会自动带点,所声明的域及其所有子域都能读写这个 Cookie。

• Path:Cookie 的有效访问路径,代表基于 Domain 下能读写这个 Cookie 的页面路径。假设 Domain 为 “.zhihu.com”,Path 为 “/”,则 zhihu.com 根目录下所有页面路径都能读写这个 Cookie,如果 Path 为 “/question”,则 Cookie 仅在 question 页面路径下能被读写。

• Expires/Max-Age:Cookie 的过期时间,采用协调世界时(UTC),与中国标准时间相差8小时。时间格式为 ”yyyy-mm-ddThh:mm:ss.sssZ”,T是分隔日期和时分秒的符号,”.sss” 代表毫秒,Z 表示 UTC 零时区。如果创建 Cookie 时默认不填,则此值为 Session,即关闭浏览器自动清除 Cookie。

• Size:Cookie 的大小。

• Httponly:是否允许客户端读写Cookie,常见客户端方法有 document.cookie。

• Secure:是否只能通过 Https 协议读写 Cookie。

• SameSite:跟第3方 Cookie 的读写限制有关,我们后面会讲到。

• Priority:Cookie 的优先级,有 Low/Medium/High 这3种值,当 Cookie 超出浏览器存储上限时,优先级低的 Cookie 将被清除。

第1方Cookie

网站监测工具标识用户常用第1方Cookie,即Cookie的Domain为当前访问站点的顶级域名。以Google Analytics为例(以下简称GA),下面这个蓝底色的就是GA标识用户的Cookie,它的Domain为”.zhihu.com”,所以它为第1方Cookie。

GA 标识用户的 Cookie,Domain 为 ”.zhihu.com”,意味着这个 Cookie 在 zhihu.com的所有子域名下,都能被读写。因此,zhihu.com、www.zhihu.com、daily.zhihu.com、static.daily.zhihu.com 在用同一套监测代码的时候,标识用户所用的 Cookie 是一样的。

GA 标识用户的 Cookie 名称为 “_ga”,它的值是这样构成的:

• 版本号:GA1 为版本相关信息,所有被 GA 监测的站点几乎都一样。

• Domain长度:2为 “_ga” 这个 Cookie 的 Domain 长度,”.zhihu.com” 长度为2。当被监测的站点为 ”xxx.com.cn” 时,Domain 长度为3。当被监测的站点使用多级域名例如 ”www1.www2.xxx.com” 时,在 GA 的这个 Cookie,Domain 依然为顶级域名 ”.xxx.com”,长度依然为2。

• 唯一的随机数:GA 生成的随机数字,具有唯一性。

• 首次访问的时间戳:用户首次访问站点,GA 获得的时间戳,你可以打开 Chrome DevTools 的 Console 面板,用 new Date 把它转换成中国标准时间。这个时间再加上2年,等于这个 Cookie 的 Expires/Max-Age 的中国标准时间,也就是说 GA 标识用户的 Cookie 有效期为2年,2年之后 Cookie 被清除。

从GA的JS代码,也能看出这个值的构成:

那么,这个第1方 Cookie 属于被监测的站点,但又是由 GA 创建,这是怎么一回事?

GA 的 JS 代码包含创建 Cookie 的方法,这段 JS 被嵌入到网站,相当于网站自己创建了 Cookie,因此这个过程不存在跨域的问题。目前市面上的网站监测工具都是用这样的方法来创建第1方 Cookie 的。换言之,GA 这段 JS 也能够读写这个站点的所有第1方 Cookie(已设置 Httponly 的除外)。

第3方Cookie

网站监测代码在发起请求时,能创建 Domain 不同于当前站点的 Cookie,也就是第3方 Cookie,它一般用于追踪用户在不同站点的访问行为。

以百度统计为例,只要你的站点部署了百度统计代码,就能看到这个名为 ” HMACCOUNT_BFESS” 的第3方 Cookie,它看起来就是这样的字符串:

这时右键选中 Cookie,选择 ”Show Requests With This Cookie”:

打开了 Network,点击第1个请求,拉到 Request Headers 会发现有2个 Set-Cookie,说明这个第3方 Cookie 这是由服务器端设置的:

第1个的末尾标记了黄色符号,代表这个 Cookie 没有创建成功,因为创建时没有设置 SameSite 和 Secure。第2个 Cookie,也就是 ”HMACCOUNT_BFESS”,因为同时满足 SameSite=None 和 Secure=Ture 这两个条件,Cookie 能被创建。

SameSite 属性是什么?这是一个限制第3方 Cookie 创建、读写的属性。从 Chrome v80 开始,对第3方 Cookie 的限制就严格了许多。现在想要创建第3方 Cookie,需要满足以下条件:

①通过 Https 协议

②设置 SameSite 为 None

③设置 Secure 为 True

当一个 Cookie 作为第3方 Cookie 时,它能不能被读写,由 SameSite 决定。当然这个读写,还是必须先取决于 Cookie 的 Domain,否则就成跨域了。SameSite 有以下3种值:

①Strict

假如 Cookie 的 SameSite为Strict,则当它作为第3方 Cookie 时会被完全禁止读取,尽管你可能在 DevTools 的 Application 面板还能看到这个 Cookie。

②Lax

假如 Cookie 的 SameSite 为 Lax,那么当请求为以下类型,才能读写这个第3方 Cookie:

Lax也是Chrome的默认设置。

③None

想要关闭 SameSite 属性,可以设置第3方 Cookie 的 SameSite 属性为 None,要想读取 Cookie 同时还必须设置 Secure 为 True。这也是为什么我们看到百度统计的 Cookie 设置了 SameSite=None 和 Secure 属性。

第1方 Cookie 和第3方 Cookie 在网站监测都很重要,如今 Chrome 对第3方 Cookie 的限制越来越强,为网站监测工具读写第3方 Cookie 增加了一定难度。如何在合理追踪用户行为的同时保护用户隐私,这是一个值得全行业探讨的主题。

更多阅读推荐

下一代 IDE:Eclipse Che 究竟有什么奥秘?

窃隐私、放高利贷,输入法的骚操作真不少!

进入编译器后,一个函数经历了什么?

程序员离职后收到原公司 2400 元,被告违反竞业协议赔 18 万

5年5亿美金,华为昇腾如何争夺AI开发者?

最新回复(0)