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

问题分析

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

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

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

设置cookie时有个连带的SameSite属性
top-level-navigation(顶层导航)

接下来细说！

SameSite属性

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

Strict，表示完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。
Lax，大多数情况下不发送第三方 Cookie，但是导航到目标网址的 Get 等请求除外
None，表示关闭跨站限制，但是需要显式设置Secure属性并配置https

如果不设置，浏览器会默认为Lax。正如上文所提到的。

顶层导航（top-level navigation)

什么是顶层导航？

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

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

解决问题

汇总一下就是：

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

方案有三个：

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

第一种最为简单直接。

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

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

果断采用了第一种方案。

解决iframe嵌套项目无法登录的问题相关推荐

解决iframe嵌套登录页面，登录无反应，需刷新才能进游戏问题
使用window.addEveantListener('message',(event)=>{}) 监听数据副本即可 mounted() {if (this.$route.query.url) ...
解决iframe嵌套页面问题
/* 如果页面嵌套,跳出嵌套 */ if (window.top != window.self) {top.location = this.location; }
移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法...
1.移动端上拉加载网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
selenium模拟登录163邮箱，定位账号及密码输入框问题和iframe嵌套
在学习Python自动化的过程中,这次在163邮箱登录的时候遇到了元素定位问题,通过资料查找,最终解决,现在记录一下. 问题:账号密码输入框定位失败. 发现问题过程: 按照常规的方法进行元素定位,但是 ...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
vue项目中，用iframe嵌套其他页面在IE浏览器打开空白而在谷歌打开正常的问题
问题在vue项目中,某个页面里面用iframe嵌套了另一个vue项目的一个页面,在谷歌浏览器中打开,iframe的内容正常显示:在ie浏览器中打开,iframe的内容是空白的,没有报错. 原因用的 ...
解决多个iframe嵌套而造成的多个滚动条问题
解决多个iframe嵌套而造成的多个滚动条问题参考文章: (1)解决多个iframe嵌套而造成的多个滚动条问题 (2)https://www.cnblogs.com/zhangmei/p/64003 ...
selenium自动化,iframe嵌套导致窗口下滑失效及解决办法
首先selenium窗口下滑无效, 是否满足网页iframe嵌套. 非该条件,下面办法无法解决原因: 网页异步加载, 有部分数据必须窗口下滑才能异步加载完全, 这个异步加载的数据又渲 ...
CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单
iframe嵌套单页面 iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */if ...

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

问题分析

SameSite属性

顶层导航（top-level navigation)

解决问题

解决iframe嵌套项目无法登录的问题相关推荐

最新文章

热门文章