likes
comments
collection
share

快速了解第三方 Cookie 是如何跟踪你的行为

作者站长头像
站长
· 阅读数 31

最近 Chrome DevTools 控制台总是会出现一个警告：

Third-party cookie will be blocked. Learn more in the Issues tab.

意思是第三方 Cookie 将会被禁用，对于这个警告，我们还是要去了解下什么是第三方 Cookie，为什么要禁用它。

什么是第三方 Cookie

介绍第三方 Cookie 前，先简单回顾下 Cookie 相关知识。

HTTP 协议是无状态的协议，故要想保持用户的会话，就需要存储一些用户状态，而 Cookie 就可以用来保存相关状态的。

快速了解第三方 Cookie 是如何跟踪你的行为

Cookie 同源策略和属性如下：

  • Cookie 中的同源只关注域名，忽略协议和端口。
  • HttpOnly：该属性可防止通过 JS 代码访问 Cookie，从而降低跨站脚本 (XSS) 攻击的风险。
  • Secure：该属性可确保 Cookie 只通过 HTTPS 发送。
  • SameSite： 该属性可以指定跨站请求中发送 Cookie 的规则，Strict 为禁止第三方请求携带 Cookie，Lax 为允许点击链接等情况下的第三方请求携带 Cookie，None 为无论是否跨站都会发送 Cookie。

了解了以上基础知识点后，让我们来看什么是第三方 Cookie。

首先我们自己网站设置的 Cookie 为第一方 Cookie，而当我们网站加载一些第三方资源时，这些资源也可能设置一些 Cookie 信息，这些就是第三方 Cookie。

快速了解第三方 Cookie 是如何跟踪你的行为

举个例子：我们访问 A 这个网站，这个网站设置了一个 Cookie，这个 Cookie 也只能被 A 这个域下的网页读取，这就是第一方 Cookie。

如果还是访问 A 这个网站，网页里有用到 B 域名（和 A 网站的域名是不同的）的一张图片，浏览器在请求 B 域名图片的时候，B 设置了一个 Cookie，那这个 Cookie 只能被 B 这个域访问，而不能被 A 这个域访问，对我们来说，我们是在访问 A 网站时，被设置了一个 B 这个域下的 Cookie，所以叫第三方 Cookie。

第三方 Cookie 用途

前端埋点、异常上报

大多数 Web 站点都会引用一些第三方 SDK 来进行埋点、异常上报，当统计访问用户数量或跟踪异常用户时，它们可能会在你的站点上 Set 一个 Cookie，后续所有的埋点上报请求都会带上这个 Cookie，来标识当前的用户。

这些第三方 SDK 一般会拥有自己独立的域名，比如 aliyun.com，它在你的域名 mysite.com 下种下的 Cookie 就属于第三方 Cookie。

比如中小学智慧教育平台，站点中会带有埋点的 cookie，同时每次发起埋点时会带上对应 cookie，就可以区分是否是同一个人，从而统计到访问人数。

快速了解第三方 Cookie 是如何跟踪你的行为

快速了解第三方 Cookie 是如何跟踪你的行为

快速了解第三方 Cookie 是如何跟踪你的行为

广告

平时我们在百度或者视频网站搜索一些东西的时候，第三方 Cookie 就会把你浏览的相关内容悄悄地上传，这次你打开购物网站或者某个 APP 的开屏广告就会推荐你感兴趣的东西。

比如当我们打开淘宝、优酷等网站，会发现网站会有一些相同域名的第三方 Cookie，这些 Cookie 就是用来跟踪用户行为的。

快速了解第三方 Cookie 是如何跟踪你的行为

快速了解第三方 Cookie 是如何跟踪你的行为

从上面两个图我们可以看到有个 mmstat.com 的第三方 Cookie 正在跟踪我们的行为。

过程大致如下：

快速了解第三方 Cookie 是如何跟踪你的行为

  • 用户浏览淘宝网站，淘宝网站通过 iframe 或者 img 之类标签加载了 mmstat 的链接，并在链接上拼上一些参数，如当前访问的商品
  • mmstat 记录上传的参数，并设置一个 uid 与这些参数关联，随后返回的响应中会 Set-Cookie 这个 uid。
  • 用户打开优酷，优酷使用 mmstat 加载广告，请求广告时会自动带上 Cookie，包括了上边设置的 uid，接下来就可以根据之前记录的 uid 与浏览内容的关联关系返回相应的广告。

浏览器策略

第三方 Cookie 会带来一些安全（CSRF）和隐私问题，故大趋势是禁用第三方 Cookie。

在 Safari 13.1、Firefox 79 版本中，三方 Cookie 已经被默认禁用，但是由于这些游览器市场份额较小，并没有给市场带来巨大的冲击。

Chrome 已经在控制台提醒第三方 Cookie 即将禁用了，2024 年下半年 Chrome 将开始将扩大对第三方 Cookie 的限制，至于 Chrome 为啥是三个浏览器中最后默认禁用第三方 Cookie 的，主要是因为禁用后会对 Google 广告业务影响比较大。

所以 Chrome 有推出 SameSite 这样的小策略。前面也有简单提到，SameSite 有三个属性，要想做在跨站点发送 Cookie，你必须把自己 Cookie 的 SameSite 属性设置为 None。

快速了解第三方 Cookie 是如何跟踪你的行为

第三方 Cookie 的禁用可能会对埋点、广告等产生影响，那么有没有什么替代方案呢。

第三方 Cookie 的替代方案

禁用第三方 Cookie 后，相对应的替代方案肯定也会出现，比如独立分区的 Cookie、隐私沙盒等等，不过替代方案会有更多限制。

下面介绍一些替代方案。

第一方 Cookie

如果我们引入了一个三方的 SDK，比如 google analytics ，在保证这个第三方 SDK 的信息收集追踪都是在我们允许范围内的情况下，SDK 就可以使用第一方 Cookie 来完成用户身份标识符。

此时 Cookie 会设置在你的网站下（document.cookie = 'cna=xxx'），就不再是第三方 Cookie 了。后续记录相关信息时，可以通过 HTTP 请求的 body 参数来带上 cna。

但是允许 SDK 在你网站读取一方 Cookie 就意味着它能获取你更多的数据，故你需要承担更大的用户信息泄漏的风险。

Chrome 具体独立分区的 Cookie

Chrome 引入了新的 Cookie 属性 Partitioned，支持 Cookie 独立分区。

快速了解第三方 Cookie 是如何跟踪你的行为

使用分区 Cookie 时，当用户访问网站 A 且来自网站 C 的嵌入内容使用 Partitioned 属性设置 Cookie 时，此 Cookie 将保存在一个分区中，专门用于网站 C 在嵌入网站 A 时设置的 Cookie。只有当顶级网站为 A 时，浏览器才会发送该 Cookie。

当用户访问新网站（例如网站 B）时，嵌入的 C 框架将不会收到在网站 A 中嵌入时设置的 Cookie。

浏览器指纹

禁用第三方 Cookie 对埋点的影响可以通过上面两个方案来处理，要想在不同网站中继续对用户进行跟踪，可以尝试使用浏览器指纹来实现。

三方 Cookie 的主要作用是标识你的身份，以便在下次访问可以知道你是谁。浏览器指纹可以通过一系列简单信息的组合，如系统版本，浏览器版本等等，来作为你独一无二的特征。

一些使用 Javascript 很容易获取的一些配置：

  • Screen width：屏幕宽度
  • Screen height：屏幕高度
  • Cookies enabled：是否允许 Cookie
  • Content language：语言信息
  • List of fonts：字体信息
  • Timezone：时区信息
  • Navigator properties：Navigator 对象中包含的属性信息

体验第三方 Cookie

通过 express 框架体验体验一下第三方 Cookie，在 /set 接口上，我们设置了一个 SameSite 为 None 的 cookie，随后通过 /get 把设置的 Cookie 输出到控制台。

var express = require('express')
var cookieParser = require('cookie-parser')
var cors = require('cors')

var app = express()
app.use(cors())
app.use(cookieParser())

app.get('/set', (req, res) => {
  res.cookie('name', 'tom', { maxAge: 60 * 60 * 1000, sameSite: 'none', secure: true })
  res.send('cookie')
})

app.get('/get', function (req, res) {
  // Cookies that have not been signed
  console.log('Cookies: ', req.cookies)

  // Cookies that have been signed
  console.log('Signed Cookies: ', req.signedCookies)
  res.send('cookie')
})

app.listen(8080)

页面 A 通过访问 /set 接口和 document.cookie 来分别设置一个第三方和第一方 Cookie。随后通过 http-server 启动服务，访问 127.0.0.1:8081/indexA.html，即可看到设置的 Cookie。

快速了解第三方 Cookie 是如何跟踪你的行为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="http://localhost:8080/set" />
  <script>
    document.cookie = "PAGE=A"
  </script>
</body>
</html>

页面 B 通过 get 接口读取第三方 Cookie，使用 http-server 启动服务后，访问 localhost:8082/indexB.html， 随后查看 Cookie 和 node 输出。

快速了解第三方 Cookie 是如何跟踪你的行为

快速了解第三方 Cookie 是如何跟踪你的行为

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img src="http://localhost:8080/get" />
</body>
</html>

小结

了解第三方 Cookie 的知识，跟踪后续禁用三方 Cookie 的情况，以便更好地处理相关的问题。

参考资料

转载自:https://juejin.cn/post/7361684907810029578
评论
请登录