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

最新推荐文章于 2024-07-22 18:22:02 发布
最新推荐文章于 2024-07-22 18:22:02 发布
阅读量1.5w 收藏 28
点赞数 4
文章标签： javascript iframe 跨站Cookie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40882724/article/details/115605160
版权
本文介绍了在iframe中嵌入项目时遇到的登录问题，问题源于浏览器对Cookie SameSite属性的默认处理。分析了SameSite属性的三种模式，并解释了顶层导航的概念。解决方案包括调整Cookie的SameSite属性或确保相同域名，最终采用更改域名策略成功解决登录问题。
摘要由CSDN通过智能技术生成

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

问题分析

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

翻译为大白话就是：写入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，大多数情况下不发送第三方
最低0.47元/天 解锁文章
寻梦皮皮虾
关注
访问嵌套iframe遇到的问题
jin19930729的专栏
04-08 3685
一直想做个类似mini ui中的弹出层效果，能够chua
Iframe的页面，判断是否登录的时候有时候有问题就需要
03-09
Iframe的页面，判断是否登录的时候有时候有问题就需要
解决第三方使用iframe内嵌页面时无法正常登录访问的问题
qq_28013889的博客
11-22 1万+
主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域，无法使用cookie获取到token信息，导致页面加载不出来的问题
通过iframe嵌套的不同域名的页面之间处理cookie存储失败的问题——js技能提升
最新发布
yehaocheng520的博客
07-22 974
通过iframe嵌套的不同域名的页面之间处理cookie存储失败的问题——js技能提升
Iframe+Cookie实现简单的单点登录
03-14
演示DEMO 博文链接：https://xiaoa7.iteye.com/blog/312295
踩坑vue中嵌套iframe项目，嵌套在iframe中的项目无法登录！
jieyucx的博客
04-26 3919
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;由于后续接口提示401，判断是登录接口鉴权失败导致的，原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！以iframe标签嵌入一个现有的项目到网站中，嵌入的项目无法正常登录，直接在浏览器地址栏输入url并登录是正常的。
关于解决iframe标签嵌套问题的解决方法
11-21
问题描述 当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否已经存在 //根据该节点名字判断该节点是否存在 if ($("#tabs").tabs("exists",node.text)){ //如果存在就直接选中 $("#tabs").tabs("select",node.text); } 如果为否，我们就会嵌套一个iframe标签来打开一个相应的
解决iframe嵌套第三方网页，导致鉴权失败无法登录的问题
老衲的少女心i~
05-23 1万+
目录前言一、iframe是什么？二、401 (Unauthorized)三、解决总结 前言 最近遇到的一个问题，老项目的第三方以iframe嵌入的网页，无法正常登录了。 定位问题，发现： 控制台报错401 (Unauthorized)，导致的无法正常登录。是因为我们iframe的问题，产生了跨域，导致我们的cookie无法共享。 提示：以下是本篇文章正文内容，下面案例可供参考 一、iframe是什么？ HTML 内联框架元素 (< iframe >) 表示嵌套的browsing contex
iframe嵌套页面_内嵌页面session超时，内嵌页面显示登录界面问题解决方案
weixin_39607865的博客
12-01 1748
内嵌页面session超时，内嵌页面显示登录界面问题解决方案我们在开发web项目的时候 经常用到iframe嵌套，这里的话 不管是开发的时候，还是正式环境使用。当session超时，或者重启项目，内嵌的页面会跳转到登录页面；如上图，用户体验很差；解决思路 我们在登录页面 进行判断 假如是 内嵌的页面，我们就找到他的 最顶层父页面，然后然后父页面 进行 重定向到登录页面即可；核心代码实现；...
解决iframe嵌套登录页面，登录无反应，需刷新才能进游戏问题
weixin_48244940的博客
06-22 2464
解决iframe嵌套登录页面
解决iframe标签嵌入一个现有的网站无法登录的问题
cmhahaha的博客
01-25 6288
以iframe标签嵌入一个现有的网站到项目中，嵌入的网站无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索… 问题分析 由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪： 翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！ 这个提示包含了两个信息： 设置cookie时有个连带的SameSite属性 top-level-na
在vue中实现嵌套页面(iframe)
10-15
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
weixin_39831239的博客
12-29 2472
问题描述当我们使用easyui做后台管理系统的时候，会使用tree组件来实现树形菜单，而我们每点击一次相应菜单，会根据是否有url来判断是否是一级菜单，以及是否已经存在//根据该节点名字判断该节点是否存在if ($("#tabs").tabs("exists",node.text)){//如果存在就直接选中$("#tabs").tabs("select",node.text);}如果为否，我们就会...
使用Iframe嵌套其他系统页面遇到的跨域问题
热门推荐
第一行代码
07-14 5万+
之前需要将一个其他的系统页面集成到现在主要使用的一个平台上，因为这个系统使用的是jsp的页面，另一个是augular的页面，并且为了保持项目的完整性和较小的改动，所以使用了iframe来将另一个页面集成进来。 如何使用iframe嵌套页面 使用frameset标签即可将其他的页面集成到这个当前的页面，这个frame标签的作用其实挺大的 第一，可以防止页面刷新，将其他的一些刷新操作放到fram...
iframe嵌套 session失效问题
hy_47的专栏
11-26 5793
最近在做项目是遇到一个比较恶心的问题： 项目A要iframe嵌套项目B的页面， 使用了单点登录的方式 嵌套项目B页面后， 再访问A项目菜单 居然session失效了， 这个问题苦恼了好久，最终在网上找到了解决方法，如下：(注：我这边项目A和项目B是同ip 不同端口) 首先要搞懂出现这种情况的原因： 首先要明白 客户端用cookie保存了sessionID，当我们请求服务器的时候，会把这个ses
iframe嵌套iframe导致无法登陆的问题
weixin_42752532的博客
10-13 1384
使用a标签转跳 <html> <head> <title>测试iframe嵌套交通学校班牌管理系统</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="测试iframe嵌套交通学校班牌管理系统" />.
PHP网站在Iframe登录无效，cookie跨域session失效导致
小虎哥－不可能变成可能
09-05 620
在网站B的session_start();或 Session::start();在网站A中使用iframe里访问网站B时，一直登录失效，原因是cookie跨域失效。
解决iframe嵌套页面问题
09-08
当在网页中嵌套使用iframe时，可能会遇到一些问题，如样式冲突、无法调整大小、页面加载速度慢等。下面介绍一些解决iframe嵌套页面问题的方法。 首先，针对样式冲突问题，可以使用CSS命名空间（CSS Namespaces）来解决。通过添加命名空间前缀，可以确保不同iframe中的元素样式不会相互冲突。这样可以避免样式被覆盖，保证每个iframe中的样式独立。 其次，针对调整iframe大小问题，可以使用JavaScript来动态调整iframe的大小。通过监听iframe内部内容的高度变化，并将高度值传递给父页面，从而实现自适应调整iframe的大小。这样可以确保iframe始终能够显示完整的内容，提高用户体验。 另外，针对页面加载速度慢的问题，可以通过延迟加载或者懒加载来提升性能。即在页面初次加载时，只加载展示iframe的占位符，并不加载真正的内容。当用户需要查看或者操作iframe时，再加载对应的内容。这样可以减少初次加载的数据量，提高页面加载速度。 此外，还可以考虑使用无需iframe的其他技术来实现类似的功能，如Ajax、Vue.js等。这些技术可以通过异步加载内容或者组件来避免使用iframe，从而减少了嵌套页面的问题。 综上所述，处理iframe嵌套页面问题需要使用CSS命名空间、动态调整大小、延迟加载或懒加载等方法。同时也可以考虑使用其他技术来避免使用iframe带来的问题。通过采取这些方法，可以更好地解决iframe嵌套页面问题，提升用户体验。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值