Chrome禁用三方Cookie:前端必知的影响

问题背景

目前 Safari 和 FirFox 已经禁用了第三方 cookie。

Chrome 计划自 2024 年 1 月 4 日起,将为大约 1% 的 Chrome 稳定版浏览器停用第三方 Cookie,并于 2024 年第 4 季度在开发版浏览器、Canary 版浏览器和 Beta 版浏览器中完全停用第三方 Cookie。

所以目前需要针对禁用第三方 Cookie 的问题做准备和影响面分析,并在在 12/29 前完成整改。

提示 :第三方 Cookie 是一个相对概念,若不了解请查看:第三方 Cookie 介绍

禁用第三方 Cookie 后,通过 iframe 嵌入、跨域调用、前端写 Cookie 等场景下的第三方 Cookie 都会受到影响,登录是第一个卡点,表现出的问题就是无法登录,需要进行技术方案评估和改造。

影响面

目前直接打开 Chrome 的隐身模式,会直接禁用第三方 Cookie,下列为可能的影响面:

  • 前端监控:上报的接口为跨站接口,通过三方 Cookie 来存储一个用户标识;
  • 统一登录:通过统一的跨站 SSO 接口为网站实现单点登录能力,共享用户身份;
  • 广告业务:通过三方 Cookie 存储用户标识,用于进行广告归因或兴趣推荐;
  • CSRF :通过 Cookie 存储 CSRF Token 信息,跨站请求则为三方 Cookie;
  • iframe:通用的聊天、地图等 iframe,通过三方 Cookie 来共享一些状态;
  • 第三方聊天嵌入内容
  • 第三方地图嵌入

目前在 Chrome中打开页面的时候,已经会有相关的提醒,图示为 chrome 打开工作台的三方 Cookie 提醒

如何解决

浏览器正在逐步淘汰未分区的第三方 Cookie,因此当第三方 Cookie 被屏蔽时,CHIPS、Storage Access API 和 Related Website Set 是跨网站环境(例如 iframe)读取和写入 Cookie 的唯一方式。

让三方 iframe 嵌入发起的跨站请求的依然可以携带三方 Cookie

借助具有独立分区状态 (CHIPS) 的 Cookie,开发者可以选择将 Cookie 加入分区存储中,每个顶级网站采用单独的 Cookie JAR,从而加强用户隐私保护和安全性。

如果不进行分区,第三方 Cookie 便可让服务跟踪用户,并联接来自多个不相关的顶级网站的用户信息。这就是所谓的跨网站跟踪。

Set-Cookie 标头:

javascript 复制代码
Set-Cookie: __Host-name=value; Secure; Path=/; SameSite=None; Partitioned;

JavaScript:

javascript 复制代码
Document.cookie="__Host-name=value; Secure; Path=/; SameSite=None; Partitioned;"

目前开发者工具已经支持展示来自第三方网站 Partition Cookie。

可以将多个站点标记为一方, 例如 taobao.comtmail.com 同样属于阿里, 可以标记为同一方,就可以解决同一个公司或组织下不同域名的数据共享能力。

除了把这个站点在自己的网站下部署一份,目前只能通过 PR 将其 Google 提供的 相关网站集 GitHub 存储库。然后站点可以使用 Storage Access API 通过 requestStorageAccess() 请求访问跨站点 Cookie ,或使用 requestStorageAccessFor() 委托访问。当站点位于同一组内时,浏览器将自动授予访问权限,并且跨站点 Cookie 是可用的。

当然这种方式的缺点也很明显,就是成本比较高

不用 Cookie 和 Set-Cookie,改成其他地方,携带位置改到 query、请求头、请求体,存储位置改到 localStorage、sessionStorage、indexDB 等。

也可以尝试使用Topic API,通过 Topics API ,浏览器可以根据用户的浏览活动观察并记录用户感兴趣的主题。这些信息只会记录在用户的设备上。

FedCM(联合凭证管理)是联合身份服务(例如"使用...登录")的一种隐私保护方法,用户可以通过该方法登录网站,而无需与身份服务或网站共享其个人信息。

相关链接

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
ai小鬼头4 小时前
AIStarter如何助力用户与创作者?Stable Diffusion一键管理教程!
后端·架构·github
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作