当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新，此次更新彻底禁用了第三方 Cookie，这意味着，默认状况下，各大广告商或网站将没法对你的我的隐私进行追踪。而微软和 Mozilla 等也纷纷采起了措施禁用第三方 Cookie，可是因为这些浏览器市场份额较小，并无给市场带来巨大的冲击。

从 2017 年截至 2019 年末， Google 面临的罚款总额已经超过 93 亿欧元，其中一大缘由即是侵犯用户数据隐私。迫于巨大压力，Google Chrome 官方团队前不久也宣布，为了提高用户隐私和安全，将来两年将彻底禁用第三方 Cookie。

在彻底不能写入三方 Cookie 的状况下，将会对前端的数据读写方式，甚至是整个广告行业带来巨大影响。

Cookie 的意义

众所周知，HTTP 协议是无状态的协议，若是你在同一个客户端向服务器发送屡次请求，服务器不会知道这些请求来自同一客户端。

这正是 HTTP 协议得以普遍应用的缘由，试想一下，若是它是有状态协议，你必需要时刻与服务器创建连接，那么若是链接意外断开，整个会话就会丢失，从新链接以后通常须要从头开始；而若是是无状态协议，使得会话与链接自己独立起来，这样即便链接断开了，会话状态也不会受到严重伤害，保持会话也不须要保持链接自己。

若是 HTTP 协议只是用来访问静态文件，那不会有任何问题，可是若是你要为广大用户提供更好的服务，服务器就须要知道每一个请求具体来自于哪一个用户，好比你在逛淘宝的时候你只须要登陆一次，当你发起一次购买请求，服务器就已经知道你登陆过了，不会再让你进行登陆。

因此 HTTP 协议须要占用浏览器的一小块存储，存储当前访问用户的一些 ”状态“，而后每次发起 HTTP 请求，请求中就会携带这些状态，从而让服务器知道你是谁。 Cookie 出现的的意义就是为了解决这个问题，让无状态的 HTTP 协议拥有一小块记忆。

可是， Cookie 一经出现，就成了各大广告和购物网站窥探用户隐私的利器，他们使用第三方 Cookie 不断获取你的数据，那么什么第三方 Cookie 呢？

第三方 Cookie

若是是你正常的正在逛着天猫，天猫会把你的信息写入一些 Cookie 到 .tmall.com 这个域下，然而打开控制台你会看到，并非全部 Cookie 都是 .tmall.com 这个域下的，里面还有不少其余域下的 Cookie ，这些全部非当前域下的 Cookie 都属于第三方 Cookie，虽然你可能历来没访问过这些域，可是他们已经悄悄的经过这些第三方 Cookie来标识你的信息，而后把你的我的信息发送过去了。

而 .tmall.com 这个域下的 Cookie 都属于第一方 Cookie，那么为何还须要第三方 Cookie 呢？再打开 taobao.com，你会发现你已经不须要再登陆了，由于淘宝、天猫都属于阿里旗下的产品，阿里为他们提供统一的登陆服务，同时，你的登陆信息也会存到这个统一登陆服务的域下，因此存到这个域下的 Cookie 就成了三方 Cookie。

咱们再打开已经彻底禁用了第三方 Cookie 的 Safari，发现只剩下 .tmall.com 这个域下的 Cookie 了。

这时你会发现即便你已经登陆了天猫，再访问淘宝也仍是须要登陆的，你已经没法享用这样的功能了，而三方 Cookie 可不只仅就这么点用途，在 Web 开发中，三方 Cookie 的应用很是之广，下面咱们再来具体看几个应用场景：

三方Cookie的用途

前端日志打点

大多数 Web 站点都会引用一些第三方 SDK 来进行前端异常或性能监控，这些 SDK 会经过一些接口将监控到的信息上传到他们的服务器。通常它们都须要标识每一个用户来方便排查问题或者统计 UV 数据，因此当你一此请求这个站点的时候，它们可能会在你的站点上 set 一个 Cookie，后续全部的日志上报请求都会带上这个 Cookie 。

因为通常这些第三方 SDK 都是用于监控的通用服务，它们确定会拥有本身独立的域名，好比 log.com，它在你的域名 mysite.com 下种下的 Cookie 就属于第三方 Cookie。

广告营销神器 - Facebook Pixel

在电商业务中，追踪流量、导流量、转换率、销售额这些都是商家最关心的问题。这时候你就可使用 Facebook Pixel，简单来讲 Facebook Pixel 像素就是一串 JavaScript 代码，能够追踪广告的转化量、改进受众定位、使广告花费回报最大化。

当访客进入到被设有 Facebook Pixel 的页面时，便会触发这段代码。好比，查看了商品或者加入购物车， Facebook Pixel 便会向系统发送请求来记录这些行为，系统能够利用这些收到的行为信息进一步的作追踪和优化。

举一个实际例子，咱们进入一个国外的电商网站 Brava Fabrics ，你会发现已经被写入了一堆 facebook.com 下的三方 cookie：

我猜想这个 fr 应该就是用来标识我身份信息的 cookie，而后点击几个页面，在 network 里面找到了几个 facebook 发送的请求，下面是其中一个：

https://www.facebook.com/tr/?id=382444918612794&ev=PageView&dl=https%3A%2F%2Fbravafabrics.com%2Fcollections%2Fa-moment-of-bliss&rl=https%3A%2F%2Fbravafabrics.com%2F&if=false&ts=1586868288778&sw=1680&sh=1050&ud[ct]=eb045d78d273107348b0300c01d29b7552d622abbc6faf81b3ec55359aa9950c&ud[country]=eb045d78d273107348b0300c01d29b7552d622abbc6faf81b3ec55359aa9950c&v=2.9.15&r=stable&ec=0&o=30&fbp=fb.1.1586867082370.951509876&it=1586868284974&coo=false&rqm=GET

查看详情你会发现，有下面几个主要的参数：

dl: https://bravafabrics.com/collections/a-moment-of-bliss
rl: https://bravafabrics.com/

这时 facebook 已经知道了我从 https://bravafabrics.com/ 来到了 https://bravafabrics.com/collections/a-moment-of-bliss 这个页面，同时，这个请求会携带 fr=09wX7ui8MrvCh2SIa..BdNoGz.f.F6R.0.0.Belanb.AWXCDx 这个 Cookie。

来到 facebook，当你登陆后，facebook 会把刚刚这些 Cookie 和你的 facebook Id 关联起来，而后他就能够好好的分析你的行为了：

• 有人在你的网站上完成了购买。
• 有人注册进行试用，或者以其余方式将本身标识为你网站上的潜在客户。
• 有人在你网站上的购买过程当中输入他们的付款信息。
• 有人将产品添加你网站上的购物车中。
• 有人选择特定版本的产品，例如选择某种颜色。
• 有人发起告终帐，但没有付款
• ...

而如此强大的追踪能力，只须要你复制一段 Facebook Pixel 的 JavaScript 脚本到你的页面上就能够了。而这一切能力就创建在一个小小的 Cookie 的基础上，由于有了这个 Cookie ，Facebook 才能将这些行为与它的帐号体系进行关联。

无处不在的的 mmstat

再来看一个咱们国内的例子，平时咱们在国内的搜索引擎或视频网站上搜索到一些东西，而后打开购物网站就能够收到各类你兴趣的相关推荐，这已是大众习觉得常的事情了，各大购物网站、广告商，会经过第三方 Cookie 收集你的年龄、性别、浏览历史等从而判断你的兴趣喜爱，而后带给你精准的信息推荐。

好比，咱们在浏览百度、优酷、天猫等网站时，都能看到几个 .mmstat.com 这个域下的 Cookie

百度：

优酷：

天猫：

当你在百度、优酷、淘宝等进行一系列的操做时，.mmstat.com 已经悄悄的经过三方 Cookie 把你的我的信息运送到了他们那边。 .mmstat.com 应该就是阿里旗下的大数据营销平台阿里妈妈旗下的域名（只是我的猜想）。打开阿里妈妈首页，能够看到，其号称是更懂消费者的数据金矿，已经创建起5亿用户的身份识别体系。你的每一次搜索、每一次购买、都会让它变的更精准，下一次你就收到更精准的推荐。

固然，三方 Cookie 只是众多获取你喜爱信息的一种方式，只不过这种方式更便捷，成本更低。

浏览器的策略

最近几大浏览器针对 Cookie 策略的频繁改动，意味着三方 Cookie 被全面禁用已经不远了：

Firefox、Safari —— 默认禁用

在 Safari 13.1、Firefox 79 版本中，三方 Cookie 已经被默认禁用，可是因为这些游览器市场份额较小，并无给市场带来巨大的冲击。由于阿里的登陆信息是统一存在一个三方 Cookie 下的，淘宝刚开始的处理方式，甚至是弹个框出来，告诉用户手动开启三方 Cookie ：

可是这样的处理方式对于庞大的用户来说确定体验是极低的，解决方案多是先将 Cookie 种在当前域下，全部就有了咱们上面的测试结果，淘宝、天猫两个网站须要登陆两次。

可是三方 Cookie作的事情远不止这些，等到 Chrome 全面禁用以前，必定要提早做出改变。

Chrome —— SameSite Cookie

还好因为三方 Cookie 对 Google 的广告业务影响较大，因此其没有当即进行禁用，而是一直陆续修改一些小的策略来对三方 Cookie 进行限制，好比 SameSite

SameSite 是 Chrome 51 版本为浏览器的 Cookie 新增的了一个属性， SameSite 阻止浏览器将此 Cookie 与跨站点请求一块儿发送。其主要目标是下降跨源信息泄漏的风险。同时也在必定程度上阻止了 CSRF 攻击。

SameSite 能够避免跨站请求发送 Cookie，有如下三个属性：

Strict

Strict 是最严格的防御，将阻止浏览器在全部跨站点浏览上下文中将 Cookie 发送到目标站点，即便在遵循常规连接时也是如此。所以这种设置能够阻止全部 CSRF 攻击。然而，它的用户友好性太差，即便是普通的 GET 请求它也不容许经过。

例如，对于一个普通的站点，这意味着若是一个已经登陆的用户跟踪一个发布在公司讨论论坛或电子邮件上的网站连接，这个站点将不会收到 Cookie ，用户访问该站点还须要从新登录。

不过，具备交易业务的网站极可能不但愿从外站连接到任何交易页面，所以这种场景最适合使用 strict 标志。

Lax

对于容许用户从外部连接到达本站并使用已有会话的网站站，默认的 Lax 值在安全性和可用性之间提供了合理的平衡。 Lax 属性只会在使用危险 HTTP 方法发送跨域 Cookie 的时候进行阻止，例如 POST 方式。同时，使用 JavaScript 脚本发起的请求也没法携带 Cookie。

例如，一个用户在 A 站点 点击了一个 B 站点（GET请求），而假如 B 站点 使用了Samesite-cookies=Lax，那么用户能够正常登陆 B 站点。相对地，若是用户在 A 站点提交了一个表单到 B站点（POST请求），那么用户的请求将被阻止，由于浏览器不容许使用 POST 方式将 Cookie 从A域发送到Ｂ域。

None

浏览器会在同站请求、跨站请求下继续发送 Cookies，不区分大小写。

策略更新

在旧版浏览器，若是 SameSite 属性没有设置，或者没有获得运行浏览器的支持，那么它的行为等同于 None，Cookies 会被包含在任何请求中——包括跨站请求。

可是，在 Chrome 80+ 版本中，SameSite 的默认属性是 SameSite=Lax。换句话说，当 Cookie 没有设置 SameSite 属性时，将会视做 SameSite 属性被设置为Lax 。若是想要指定 Cookies 在同站、跨站请求都被发送，那么须要明确指定 SameSite 为 None。具备 SameSite=None 的 Cookie 也必须标记为安全并经过 HTTPS 传送。这意味着全部使用 JavaScript 脚本收集用户信息的请求默认将不能携带三方 Cookie。

然而这个改动并不会形成太大的影响，它只是给各大网站提了一个信号，由于你只须要把你想要发送的 Cookie 的属性手动设置为 none 便可：

真正可怕的是咱们将没法直接指定 SameSite 为 None，只能用户本身去选择，这才是真正的默认禁用。

Chrome 也宣布，将在下个版本也就是 Chrome 83 版本，在访客模式下禁用三方 Cookie，在 2022 年全面禁用三方 Cookie，到时候，即便你能指定 SameSite 为 None 也没有意义，由于你已经没法写入第三方 Cookie 了。

当三方 Cookie 被全面禁止

如今，咱们想象一下，当浏览器禁用了三方 Cookie，而咱们又没有做出任何改变的状况下，会发生什么：

前端日志异常

可能有一天你会忽然发现，你的 UV 暴涨，可是 PV 却没有什么变化，那多是你的打点 SDK 使用的三方 Cookie 被禁用掉了。

这时这个 SDK 将没法在你的域下写入一个三方 Cookie，致使你的每次刷新页面它都会带一个新的 Cookie 回来，后端接受到的信号就是这些都是不一样用户的请求，因此都会计入 UV。同时你在排查问题时，你也没法将用户的行为串联起来，致使排查很是困难。

智能广告推荐消失

上面咱们提到，广告服务经过你的年龄、性别、行为来推断你的喜爱，从而推送给你精准的广告，使用了三方 Cookie 来进行信息追踪的广告主将没法得到你的这些喜爱，从而没法推荐给你感兴趣的广告。

这时，广告主只能在你当时的访问环境进行预约义广告，好比你正在访问宠物网站，就给你推荐宠物用品等等。

同时，可能以前广告主还会经过 Cookie 判断你阅读某个广告的次数，一旦你阅读同一个广告屡次可是没有发生转化，其就会中止向你推送该广告。或者你已经购买过了这个商品，那你也不会再看到这个广告了。若是没有了频率控制，那么你可能要连续数日盯着一个你永远也不会去点的广告，或者你会持续看到一个你已经购买过的产品广告。

没法追踪转化率

当你查看一则广告时，该广告会在你的浏览器中放置一个 Cookie，表示你已经看到它。若是随后你进入转化阶段（购买、下载等），广告主们须要能追踪每个他们投放到你网站上的转化率，这样他们才能计算投放的效果，从而做出优化策略，若是你没法再追踪广告转化率了，那么也很难再进行投放了。

固然，以上只是创建在你没有进行任何改变的基础上，距离全面禁用三方 Cookie 还有一年多的时间，这应该是一个足够的时间让你及时做出应对。

是好是坏

虽然，这对你带来的多是糟糕的广告体验，可是全面禁用三方 Cookie 对咱们用户来说确定是一件好事，由于你的信息不会被垂手可得的就被别人追踪了，你的隐私信息也不会容易被泄漏。

然而事情真的那么简单么？贪婪的广告商绝对不会直接放弃对你的信息追踪，首先他们已经对你掌握了足够多的信息，并且三方 Cookie 只是众多获取你信息的一种手段，只不过这种方法更方便简单，为了利益，他们必定会找到更多的替代方案：

使用一方 Cookie 替代 三方 Cookie

若是咱们引入了一个三方的 SDK，好比 google analytics ，说明咱们对其是信任的，它对咱们的信息收集追踪都是在容许范围内的。因此这些 SDK 依然可使用第一方 Cookie 来完成用户身份标识符。

好比，gtag.js 和 analytics.js 会设置如下 Cookie 用户标识用户信息：

可是，这些 Cookie 并非第三方 Cookie，而是设在你的域下的第一方 Cookie，好比打开 twitter 的 Cookie 信息：

咱们发现 _ga 、_gid 这两个 Cookie 正是设置在其本身域下面的。

若是使用正常的 Set-Cookie 的形式，google analytics 是没法直接将 Cookie 设置到 twitter.com 这个域下面的，并且 google analytics 发起的日志收集请求也没法携带 twitter.com 这个域下的 Cookie。

打开 sdk 的代码我发现里面有使用 js 设置 Cookie 的代码：

而且，收集日志的请求中也又没携带任何 Cookie，而是把这信息带在了参数中：

这样的方式就模拟了使用三方 Cookie 标识用户信息的过程，而且彻底能够替代它。总而言之禁用三方 Cookie 对这种三方 SDK 的影响并不大，只要稍微改变一下思惟便可。

固然，因为 Safari 和 Firefox 已经全面禁用了三方 Cookie，一些广告营销服务也正在给出使用一方 Cookie 的替代方案，好比 Facebook Pixel：

你容许了其读取一方 Cookie 就意味着它能获取你更多的数据，这意味着你须要承担更大的用户信息泄漏的风险。并且使用一方 Cookie 也不像使用三方 Cookie 那样灵活，在某些场景下也是有很大限制的。

浏览器指纹

三方 Cookie 的主要做用是标识你的身份，从而在你下一次访问时知道你是谁，那么若是有一种技术直接就能够获取你的惟一标识时，那么就不须要再存储 Cookie 了，这个技术就是 “浏览器指纹” 。

“浏览器指纹”是一种经过浏览器对网站可见的配置和设置信息来跟踪 Web 浏览器的方法，浏览器指纹就像咱们人手上的指纹同样，每一个人拥有一份接近于独一无二的配置。

若是单单拿出一个配置来说可能不少人和你拥有同样的配置，好比下面的：

• 系统版本：

  • 个人系统版本是 Mac OS X 10_14_6
  • 大约 11.91% 的人与个人配置相同
  • 大约每 8 我的中有一个和我配置相同

• Chrome 版本：

  • 我使用的浏览器是 Chrome，而且版本是：81.0.4044.92
  • 大约 0.08% 的人与个人配置相同
  • 大约每 1250 我的中有一个和我配置相同

• UTC+8 时间：

  • 个人UTC+8 时间是 2020.4.15 23:00:00
  • 大约 2.30% 的人与个人配置相同
  • 大约每 43 我的中有一个和我配置相同

若是单独看每一个配置，那他们都不能做为你独一无二的特征，可是综合起来看呢？好比就看这三项，三项的配置与你都相同的人的几率就会大大减少了。以上只是一些简单的特征，好比系统版本，浏览器版本，这些只须要一个简单的 navigator.userAgent 属性就能够拿到。

像这样的属性还有很是多个，他们可能来自 HTTP Header、Javascript attributes、浏览器插件 等等

HTTP Header

上面的 HTTP Header 中就包含了大量的定制化特性，能够看到每一项配置中与我相同的几率是很是低的，然而这些信息属于普通的浏览器指纹，普通指纹能够理解为容易被发现而且容易修改的部分，并且你也能够轻易的篡改他们，有些配置好比 User-Agent 、language 使用 JavaScript 的 navigator 对象获取是最准确并且不会被篡改的。下面还有一些其余常见的 JavaScript 属性：

Javascript attributes

这里面包含一些使用 Javascript 很容易获取的一些配置：

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

以上这些信息很是容易获取，并且带有的信息较少，最后生成出来的指纹可能碰撞的几率就越大，实际上经过 JS 能获取的远不止这些，下面还有一些重复率很是低的指标：

Canvas 指纹

Canvas 是 HTML5 中用于在网页上绘制 2D 图形元素。浏览器在绘制图形时，会调用操做系统的绘图接口，即使使用 Cavans 绘制相同的元素，可是因为系统的差异，不一样浏览器使用了不一样的图形处理引擎、不一样的图片导出选项、不一样的默认压缩级别、对抗锯齿、次像素渲染等算法也不一样。

具体获取流程以下：在画布上渲染一些文字，再用 toDataURL 转换出来，你就会获得属于你的 Cavans 指纹：

const canvas = document.getElementById("canvas-fingerprint");
    const context = canvas.getContext("2d");
    context.font = "18pt Arial";
    context.textBaseline = "top";
    context.fillText("canvas-fingerprint-test", 2, 2);
    return canvas.toDataURL("image/jpeg");

上面的图中能够看到，Canvas 指纹和我相同的几率是 <0.01% 的，可见这是一个在浏览器指纹中很是重要的指标。

WebGL

WebGL 是一种用于在网页上呈现3D图像的 JavaScript 浏览器API。网站可利用 WebGL 来识别你的设备指纹：

• WebGL 报告 —— 完整的 WebGL 浏览器报告表是可获取、可被检测的。在一些状况下，它会被转换成为哈希值以便更快地进行分析。
• WebGL 图像 —— 渲染和转换为哈希值的隐藏3D图像。因为最终结果取决于进行计算的硬件设备，所以此方法会为设备及其驱动程序的不一样组合生成惟一值。这种方式为不一样的设备组合和驱动程序生成了惟一值。

WebRTC

WebRTC （网页实时通讯，Web Real Time Communication），是可让浏览器有音视频实时通讯的能力，一般被须要快速直接链接的网络应用程序所应用。即使你使用了代理，网站也能借此获取你真实的公共和本地IP地址。该插件可被用于泄漏你的本地 IP 地址或追踪媒体设备。WebRTC 会暴露你的：

• 公共IP地址
• 本地IP地址
• 媒体设备的数量及其哈希值

CSS

就算用户禁用了 JavaScript ，网站也能够经过纯 CSS 来获取到一些信息，好比这样：

@media(device-width: 1920px) {
  body {
    background: url("https://example.org/1920.png");
  }
}

经过统计 1920.png 这个图片的请求日志，即可知道有哪些用户的窗口宽度是 1920px。

UUID 的计算

综合以上的指标特征，能够计算出一个属于你本身的惟一的 uuid，这就是你的 "浏览器指纹" 了。固然，计算时不能简单的将上述指标进行叠加，由于某些指标在一些场景下聚合度比较高，每一个指标带来的信息量也不相同，通常每一个指标都拥有一个本身的 "信息熵" :

信息熵（entropy）是接收的每条消息中包含的信息的平均量，熵越高，则能传输越多的信息，熵越低，则意味着传输的信息越少。

在计算 uuid 时，通常信息熵较大的指标会拥有较大的权重，这样能够大大下降碰撞率，提升 uuid 的准确性。

固然，这些也不用你本身去挨个费劲的去获取了，使用 clientjs（https://github.com/jackspirou/clientjs） 能够垂手可得的帮你获取这些指标，并最终获取 uuid：

// Create a new ClientJS object
const client = new ClientJS();

// Get the client's fingerprint id
const fingerprint = client.getFingerprint();

// Print the 32bit hash id to the console
console.log(fingerprint);

你也能够单独获取这些信息：

const client = new ClientJS();
  client.getBrowserData();
  client.getFingerprint();
  client.getCustomFingerprint(...);
  client.isCanvas();
  client.getCanvasPrint();
  client.getFlashVersion();
  client.isSilverlight();
  client.getSilverlightVersion();
  // 。。。

参考

• https://zhuanlan.zhihu.com/p/...
• https://mp.weixin.qq.com/s/5-...
• https://juejin.im/post/5d97fb...

小结

做为一名普通用户，我会感叹，太难了，我很难保护个人我的隐私，收集我信息的平台无处不在，收集我信息的手段也是各类各样。。。

在现实世界里，没有什么会保持不变的。

做为一名开发者，你要时刻保持警戒，有危机意识，第一时间更新你的技术以应对外部环境的变化，不然你就会被淘汰。

文中若有错误，欢迎在评论区指正，若是这篇文章帮助到了你，欢迎点赞和关注。

想阅读更多优质文章、可关注个人github博客，你的star✨、点赞和关注是我持续创做的动力！

推荐关注个人微信公众号【code秘密花园】，天天推送高质量文章，咱们一块儿交流成长。