解决iframe嵌套项目无法登录的问题

14,282 阅读2分钟

以iframe标签嵌入一个现有的项目到网站中,嵌入的项目无法正常登录,直接在浏览器地址栏输入url并登录是正常的。于是开始探索...

问题分析

由于后续接口提示401,判断是登录接口鉴权失败导致的,于是观察登录接口的请求响应,发现了端倪:

image.png

翻译为大白话就是:写入Cookie失败。原因是没有显式设置cookie的samesite属性,导致被默认为Lax,又因为响应的接口属于非顶层导航的跨站请求,浏览器将其屏蔽了!

这个提示包含了两个信息:

  1. 设置cookie时有个连带的SameSite属性
  2. top-level-navigation(顶层导航) 接下来细说!

SameSite属性

该属性一般是随着Set-Cookie响应头设置的,语法为response.setHeader("Set-Cookie","CookieName=CookieValue;SameSite=propValue"),表示该cookie是否可以携带在跨站请求中,可以取三个值:

  1. Strict,表示完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。
  2. Lax,大多数情况下不发送第三方 Cookie,但是导航到目标网址的 Get 等请求除外
  3. None,表示关闭跨站限制,但是需要显式设置Secure属性并配置https 如果不设置,浏览器会默认为Lax。正如上文所提到的。

顶层导航(top-level navigation)

什么是顶层导航?

使用浏览器地址栏输入www.baidu.com,打开百度首页,打开控制台可以看到当前页面除了百度的应用之外还有三个应用(Google翻译、Grammarly,UserTesting),其他三个是我安装的插件。

image.png

对浏览器而言,百度是top-level-navigation,其他三个则不是,因为地址栏里输入的是百度的网址。

解决问题

汇总一下就是:

登录接口是一个来自非顶层导航的接口(iframe嵌套),该接口默认的SameSite属性值Lax要求iframe里应用的网址与顶层导航应用的网址保持一致。

方案有三个:

  1. 保证两者的网址一样(域名,测试发现同一主域名下不同的子域名也是可以的)。
  2. 主动设置SameSite为Set-Cookie:Key=Value;SameSite=None;Secure,确保协议为安全协议https
  3. 禁用浏览器对SameSite的默认配置(只会对未设置的SameSite属性有效),方式如下:

image.png

第一种最为简单直接。

第二种需要修改服务端代码。

第三种在用户层面非常不现实。

果断采用了第一种方案。