解決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的功能，問題就解決啦。