解决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=None 和 Secure才能启用第三方使用。

解决方案

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