阅读 5592

解决Chrome访问天猫PC端弹出“您的浏览器限制了第三方Cookie...”的问题

起因

很多人应该和我一样,其实已经很久都没有使用过淘系的PC端了,前一阵子闲鱼也算是彻底关闭了PC的搜索接口,PC端的使用应该也会越来越少。 不过在最近偶然查看别人发我的天猫商品的时候,打开天猫的商品详情页在原本会弹出的登录弹窗之上还有一个“您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试。”的alert(如下图),并且也无法成功登录。

后排查了所有设置均无禁用cookie相关设置,并且把一系列和cookie相关的域名均加入到了白名单里,依然无法解决。下面我简单记录了下解决问题的过程,具体的解决方法可直接到文末查看

排查

经过上述的尝试,大概断定了,这个问题可能和设置无关,大概率是新版Chrome的问题,因为我一直是自动更新,目前的使用的是版本号为79.0.3938.0的dev版,随即尝试了其他版本的Chrome及其他浏览器,发现确实无此问题。不过既然已经更新到新版了,就还是想看看导致此问题的原因。

  • 首先就是尝试找到这个alert的位置

    因为从弹窗样式来看,可以确定是一个直接使用alert()直接输出的弹窗,并且这个alert的来源是login.taobao.com,从这里基本可以确定这个alert是由那个登录弹窗弹出的。通过查看天猫详情页面的页面代码,我们可以很容易的找到这个登录弹窗是由一个iframe引入到页面中的。单独打开这个iframe的url后,首先发现的就是单独打开并不会有那个alert出现,这确定了这个问题可能确实是因为第三方cookie引起的,其次在搜索alert的时候发现这个alert的代码就在这个页面的html里。

  • 然后找到这个alert弹出的原因

    通过代码我们可以看出,弹出这个弹窗的主要原因就是这个因为没有在cookie中查找到这个名为cookieCheck的cookie,在当前页面打开的时候可以看到这个cookie确实存在,所以也就没有弹出这个alert。下一步就开始尝试查找这个cookie的set方法,因为页面代码里这个cookie的值在每次刷新时都会重新生成,所以猜测这个cookie的set应该和页面里这个值都是由后端生成的,在查看了这个html的headers后发现确实是由set-cookie设置的。在确定了setcookie并没有什么问题之后,我再次回到出现问题的这个天猫商品详情页面,看看控制台上会不会有因为cookie没有被set成功而引起的警告或报错,而查看之后,整个问题就明朗了,原来这一切的问题都是由于cookie的SameSite属性引起的。

  • 关于SameSite属性

    SameSite这个属性在Chrome 51的时候就有,主要是用来防止CSRF的,现在在不设置的时候Chrome会默认为Lax,而为Lax在iframe请求中是不发送cookie的,也正如上图的警告所说,未来必须同时设置SameSite=NoneSecure才能启用第三方使用。

解决方案

其实关于Chrome的大部分实验性功能,基本都能在chrome://flags/中进行设置。关于我们这个问题,我们首先通过地址栏输入chrome://flags/进入设置页面,然后搜索SameSite by default cookies,找到如下图所示的设置项,在后面的下拉框中选择Disabled后重启,即可关闭这个默认为Lax的功能,问题就解决啦。