以iframe標簽嵌入一個現(xiàn)有的網(wǎng)站到項目中，嵌入的網(wǎng)站無法正常登錄，直接在瀏覽器地址欄輸入url并登錄是正常的。于是青島網(wǎng)站建設(shè)公司青華互聯(lián)開始探索…

問題分析
由于后續(xù)接口提示401，判斷是登錄接口鑒權(quán)失敗導(dǎo)致的，于是觀察登錄接口的請求響應(yīng)，發(fā)現(xiàn)了端倪：

翻譯為大白話就是：寫入Cookie失敗。原因是沒有顯式設(shè)置cookie的samesite屬性，導(dǎo)致被默認為Lax，又因為響應(yīng)的接口屬于非頂層導(dǎo)航的跨站請求，瀏覽器將其屏蔽了！

這個提示包含了兩個信息：

設(shè)置cookie時有個連帶的SameSite屬性
top-level-navigation(頂層導(dǎo)航)
接下來細說！

SameSite屬性
該屬性一般是隨著Set-Cookie響應(yīng)頭設(shè)置的，語法為response.setHeader(“Set-Cookie”,“CookieName=CookieValue;SameSite=propValue”)，表示該cookie是否可以攜帶在跨站請求中，可以取三個值：

Strict，表示完全禁止第三方 Cookie，跨站點時，任何情況下都不會發(fā)送 Cookie。
Lax，大多數(shù)情況下不發(fā)送第三方 Cookie，但是導(dǎo)航到目標網(wǎng)址的 Get 等請求除外
None，表示關(guān)閉跨站限制，但是需要顯式設(shè)置Secure屬性并配置https
如果不設(shè)置，瀏覽器會默認為Lax。正如上文所提到的。

頂層導(dǎo)航（top-level navigation)

什么是頂層導(dǎo)航？

使用瀏覽器地址欄輸入www.baidu.com，打開百度首頁，打開控制臺可以看到當(dāng)前頁面除了百度的應(yīng)用之外還有三個應(yīng)用（Google翻譯、Grammarly，UserTesting），其他三個是我安裝的插件。

對瀏覽器而言，百度是top-level-navigation，其他三個則不是，因為地址欄里輸入的是百度的網(wǎng)址。

解決問題
匯總一下就是：

登錄接口是一個來自非頂層導(dǎo)航的接口（iframe嵌套），該接口默認的SameSite屬性值Lax要求iframe里應(yīng)用的網(wǎng)址與頂層導(dǎo)航應(yīng)用的網(wǎng)址保持一致。

方案有三個：

保證兩者的網(wǎng)址一樣（域名，測試發(fā)現(xiàn)同一主域名下不同的子域名也是可以的）。
主動設(shè)置SameSite為Set-Cookie:Key=Value;SameSite=None;Secure,確保協(xié)議為安全協(xié)議https
禁用瀏覽器對SameSite的默認配置（只會對未設(shè)置的SameSite屬性有效），方式如下：

第一種最為簡單直接。

第二種需要修改服務(wù)端代碼。

第三種在用戶層面非常不現(xiàn)實。

果斷采用了第一種方案。

掃描二維碼手機查看該文章