页面超时返回，登陆页面被iframe嵌套问题

最新推荐文章于 2022-09-07 23:38:04 发布
原创 最新推荐文章于 2022-09-07 23:38:04 发布 · 334 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在网页中实现窗口顶层与当前窗口的URL重定向，确保页面跳转时URL保持一致。
部署运行你感兴趣的模型镜像 
if(window.top.location.href!=location.href)    
{       
    window.top.location.href=location.href;    
}

 

您可能感兴趣的与本文相关的镜像

AutoGPT

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标

解决后台管理系统登录超时后，登录页面被嵌套在数据区的问题
孙应路的博客
07-16 1707
一般后台管理系统分为三个部分，左边的菜单栏，顶部的标题栏，和中间的数据展示区域。如图 当经过长时间无操作，或者session到期后，需要重新登录。这时候我们并不知道session已经失效了，当我们点击菜单的时候，就会跳转到登录页面。不过很不巧的是，登录页面会显示在数据区。 如果这时候你在进行登录，那么就会形成一个嵌套的效果。 原因是中间的数据区是一个iframe，当你请求一个数据的时候，被安全框架拦截了下来，跳转到了登录页，因为是在iframe内，座椅登录页也就展示在了iframe里面。 不过这显然不
iframe嵌套 session失效问题
hy_47的专栏
11-26 6098
最近在做项目是遇到一个比较恶心的问题： 项目A要iframe嵌套项目B的页面， 使用了单点登录的方式 嵌套项目B页面后， 再访问A项目菜单 居然session失效了， 这个问题苦恼了好久，最终在网上找到了解决方法，如下：(注：我这边项目A和项目B是同ip 不同端口) 首先要搞懂出现这种情况的原因： 首先要明白 客户端用cookie保存了sessionID，当我们请求服务器的时候，会把这个ses
登陆页面超时iframe问题
流浪的漂泊者
05-05 405
在login.jsp中加： if (window != top){ top.location.href = location.href; }
IFrame 下返回登录页
weixin_30341735的博客
08-06 240
因为用了IFrame，所以框架内的页面，如果长时间不操作，再刷新时会返回登录页面。传统的Response.Redirect(UIHelper.BaseUrl + "LoginPage.aspx");是返回登录页，但用户再登录时，会又产生框架，不是我们想要的。所以采用javascript判断一下是否有parent，在asp.net 的后端cs文件中，string scriptString = @"f...
解决使用window.open()或window.location.href跳转后返回/后退原页面不能再度跳转的问题
vvv3171071的博客
11-24 1万+
使用window.open()搭配参数_self(新页面替换当前页面)，或使用window.location.href跳转到新页面后，再点击后退到原页面，再重新进行跳转事件时，页面不仅没有进行跳转，且没有任何反应（控制台无错误信息）。 说得笼统一点，这是因为第一次跳转时window.open()或window.location.href已经记录过一个要跳转的值了，跳转或后退到原页面时，该值没有被清空，再次执行事件时自然会没有反应。 思路： 定义一个全局变量记录window.open()打开的窗体 如过该.
JS页面跳转+JS在Iframe页面跳转、刷新
逸少
11-07 5656
window.location.href="jb51.jsp?backurl="+window.location.href;    第二种：  复制代码代码如下:   alert("返回");  window.history.back(-1);    第三种：  复制代码代码如下:   window.navigate("jb51.jsp
safari,opera嵌入iframe页面cookie读取问题解决方法
09-05
总之，解决Safari、Opera等浏览器中的iframe cookie读取问题通常需要绕过同源策略的限制，通过引导页面、跨域通信或者使用其他存储机制。在实施解决方案时，应考虑到用户体验和兼容性，确保在各种浏览器中都能正常...
iframe跨域与session失效问题的解决办法
10-26
当B在A页面的iframe中加载时，如果B设置了cookie，这些cookie会被视为第三方cookie。第一方cookie是用户直接访问网站时由该网站设置的cookie，而第三方cookie是由网站嵌入内容的外部域设置的cookie。 Session，或...
web系统登录会话超时后包含iframe框的ajax请求跳转登录页的代码实现
诗语待马
12-05 595
web系统中登录超时返回登录页的逻辑必不可少，实现起来也不算复杂。但仍然需要区分ajax请求和刷新页面请求的不同处理，其中也需要考虑到iframe嵌套页面中的请求返回顶端登录页的情况。此处整理一个基于springboot和shiro框架的登录会话超时跳转登录页的实现。
iframe嵌入第三方链接页面不展示、cookie丢失等问题总结
热门推荐
dong__xue的博客
08-23 4万+
需求是这样的：有一个第三方开发的系统的页面需要嵌入到我们的项目中，对方提供了一个地址：http://ip:port/path?name=xxx&pw=xxx。 当我们想使用iframe来展示这个地址的时候，出现以下现象和错误： 并且控制台报错： Refused to frame 'http://10.65.78.23:30002/' because an ancestor violates the following Content Security Policy directive: "
解决iframe嵌套第三方网页，导致鉴权失败无法登录的问题
老衲的少女心i~
05-23 2万+
目录前言一、iframe是什么？二、401 (Unauthorized)三、解决总结 前言 最近遇到的一个问题，老项目的第三方以iframe嵌入的网页，无法正常登录了。 定位问题，发现： 控制台报错401 (Unauthorized)，导致的无法正常登录。是因为我们iframe的问题，产生了跨域，导致我们的cookie无法共享。 提示：以下是本篇文章正文内容，下面案例可供参考 一、iframe是什么？ HTML 内联框架元素 (< iframe >) 表示嵌套的browsing contex
iframe 实现内部页面返回上一级
路上
10-15 2万+
1.问题所在 后台采用iframe的方式去写的 当用户点击浏览器的返回上一级就会让页面回到登录页面。 2.想要实现效果 当用户点击上一级的时候只会让iframe里面的内容去返回上一级而不是整个iframe返回 3解决问题方案 3.1第一种解决方案 首先我想到的是给代码加一个返回上一级按钮轻松实现 代码如下 &lt;span onclick="back()"&gt;返回上一级&...
iframe在iphone手机上的问题与解决方案
油墨香^-^的博客
06-23 4048
摘要：本文针对iOS开发中的三个常见问题提供解决方案：1）scrollTop始终为0的问题，通过调整CSS和监听特定容器解决；2）元素跳转顶部问题，使用visibility替代display控制显示；3）微信内iframe二维码无法识别问题，通过父子页面通信实现。关键点包括：将滚动容器转移至可控div、避免布局重排、绕过微信安全限制。这些方案均经过实践验证，能有效解决iOS环境下的特定开发难题。
layui登陆拦截处理
小卜妞的博客
04-08 9583
登录与接口鉴权 由于 layuiAdmin 接管了视图层，所以不必避免可能会与服务端分开部署，这时你有必要了解一下 layuiAdmin 默认提供的：从登录到接口鉴权，再到注销的整个流程。 登录拦截器 进入登入页面登入成功后，会在 localStorage 的本地表中写入一个字段。如： access_token （名称可以在 config.js 自定义）。拦截器判断没有 acces...
layui iframe 跳转到登录界面问题
0123456789
10-18 2796
代码检测到要重新登录时，返回的登陆页面， 但是整个登录界面显示在菜单的内部，因为我用的是iframe ，如需完全跳出去，则在 login.html 页面加入如下代码 <script> if(window != top){ top.location.href=location.href; }; </script>...
处理layui（xxxUI）使用iframe框架，当在一个页面退出登录后，另一个页面点击菜单出现登录页嵌套在iframe中
qq_45545968的博客
09-07 1331
处理layui（xxxUI）中使用iframe框架，当在一个页面退出登录后，另一个页面点击菜单出现登录页嵌套在iframe中
layui iframe 拦截登陆 嵌套问题
weixin_50896519的博客
02-25 959
问题 在 login.js 中加入 if (self.location!==top.location){ top.location=self.location }
如何解决iframe嵌入页面的跨域通信问题？
最新发布
09-07
<think> 我们被要求解决iframe跨域通信问题。根据引用内容，我们可以总结以下方法： 引用[1]提到使用安全的消息传递机制，即使用postMessage API进行跨域通信。引用[2]提到了一种“借尸还魂”的方法，即在子页面中创建一个与主页面同域的代理iframe，通过这个代理iframe传递消息。引用[3]和[4]也提到了使用postMessage。 因此，我们可以采用两种主要方法： 1. 使用HTML5的postMessage API（推荐，更现代且安全） 2. 使用代理iframe（适用于不支持postMessage的旧浏览器，但如今已很少需要） 下面我们详细说明这两种方法： ### 方法一：使用postMessage API（主流方案） #### 实现原理 - 主页面（父页面）和iframe子页面通过`window.postMessage`发送消息 - 通过监听`message`事件接收消息 - 消息发送时需指定目标窗口的origin（建议始终指定，避免安全风险） #### 代码示例 ##### 主页面（parent.html） ```html <iframe id="childFrame" src="http://child-domain.com/child.html"></iframe> <script> const iframe = document.getElementById('childFrame'); // 等待iframe加载完成 iframe.onload = () => { // 向子页面发送消息（指定目标域为子页面的域） iframe.contentWindow.postMessage( { token: 'abc123' }, // 消息内容（可以是任意可序列化对象） 'http://child-domain.com' // 目标域（必须与iframe的src同源） ); }; // 监听子页面发来的消息 window.addEventListener('message', (event) => { // 验证消息来源（重要！避免恶意网站发送的消息） if (event.origin !== 'http://child-domain.com') return; console.log('收到子页面消息:', event.data); // 根据消息内容执行操作... }); </script> ``` ##### 子页面（child.html） ```javascript // 监听父页面发来的消息 window.addEventListener('message', (event) => { // 验证消息来源（确保消息来自信任的父页面） if (event.origin !== 'http://parent-domain.com') return; console.log('收到父页面消息:', event.data); // 使用父页面传递的数据（如token） const token = event.data.token; // 向父页面回复消息 event.source.postMessage( { status: 'success', message: 'Token received' }, event.origin // 指定目标域为父页面的域 ); }); ``` #### 安全注意事项 1. **始终验证`event.origin`**：防止恶意网站伪造消息 2. **敏感操作需二次验证**：即使收到消息也要在服务器验证 3. **最小化暴露数据**：仅传递必要信息 ### 方法二：代理iframe方案（兼容旧浏览器） #### 实现原理 1. 在主页面中嵌入跨域子页面（iframe A） 2. 子页面（iframe A）内动态创建与主页面同源的代理iframe（iframe B） 3. 子页面通过修改代理iframe的URL参数传递数据给代理页面 4. 代理页面通过访问`parent.parent`操作主页面（同源无限制） #### 代码示例 ##### 主页面（parent.html） ```html <iframe id="childFrame" src="http://child-domain.com/child.html"></iframe> <script> // 定义全局回调函数供代理页面调用 window.onChildMessage = function(data) { console.log('收到子页面消息:', data); }; </script> ``` ##### 子页面（child.html） ```html <script> function sendToParent(data) { // 创建代理iframe（指向与主页面同域的代理页面） const proxy = document.createElement('iframe'); proxy.style.display = 'none'; proxy.src = `http://parent-domain.com/proxy.html?data=${encodeURIComponent(JSON.stringify(data))}`; document.body.appendChild(proxy); // 清理代理iframe（可选） setTimeout(() => { document.body.removeChild(proxy); }, 1000); } // 发送消息给主页面 sendToParent({ action: 'update', status: 'done' }); </script> ``` ##### 代理页面（proxy.html） ```javascript // 解析URL参数 const params = new URLSearchParams(window.location.search); const data = JSON.parse(decodeURIComponent(params.get('data'))); // 调用主页面的全局函数（同源可直接访问） window.parent.parent.onChildMessage(data); ``` #### 局限性 - 依赖URL长度（不适合大数据传输） - 仅支持单向通信（子→父） - 安全性较低（易受XSS攻击） > 推荐优先使用**postMessage方案**，其具备双向通信能力且更安全[^1][^2][^3][^4]。代理方案仅作为不支持postMessage时的备选（如IE6/7）。 ### 常见问题解决方案 | 问题现象 | 解决方案 | |---------|---------| | 接收不到消息 | 1. 检查`origin`验证是否过严<br>2. 确认发送方`postMessage`目标域正确 | | 数据无法解析 | 使用`JSON.stringify()`/`JSON.parse()`转换数据 | | Safari兼容性问题 | 确保iframe完全加载后再发送消息（使用`iframe.onload`） | ### 引用文献参考 [^1]: iframe跨域通信的终极解决方案：代码实例与工具支持 [^2]: iframe嵌套页面跨域_h5 iframe跨域通信的解决方案之借尸还魂 [^3]: iframe嵌入页面跨域通信 [^4]: 【前端学习】iframe标签以及postMessage解决iframe中的跨域问题 §§相关问题§§ 1. 如何确保postMessage通信的安全性？ 2. 除了postMessage和代理iframe，还有哪些跨域通信方法？ 3. 如何实现多个iframe之间的跨域通信？ 4. 在Vue/React中如何封装iframe跨域通信组件？ </think> 基于提供的引用资料，以下是解决 iframe 跨域通信问题的专业方案，包含代码实现和安全实践： --- ### 一、postMessage API 方案（推荐） **原理**：HTML5 提供的安全跨域通信机制，通过消息传递实现双向通信[^1][^4] ```html <!-- 主页面 (http://parent-domain.com) --> <iframe id="childFrame" src="http://child-domain.com/child.html"></iframe> <script> const iframe = document.getElementById('childFrame'); // 1. 发送消息到子页面 iframe.onload = () => { iframe.contentWindow.postMessage( { token: "abc123", action: "init" }, // 可传输对象/字符串 "http://child-domain.com" // 指定目标域（安全关键！） ); }; // 2. 接收子页面消息 window.addEventListener("message", (event) => { // 验证来源域（防止恶意攻击） if (event.origin !== "http://child-domain.com") return; console.log("收到子页面数据:", event.data); // 执行主页面业务逻辑... }); </script> ``` ```html <!-- 子页面 (http://child-domain.com/child.html) --> <script> // 1. 接收主页面消息 window.addEventListener("message", (event) => { if (event.origin !== "http://parent-domain.com") return; console.log("收到Token:", event.data.token); localStorage.setItem("authToken", event.data.token); }); // 2. 发送消息到主页面 document.getElementById("submit-btn").addEventListener("click", () => { window.parent.postMessage( { status: "success", userId: 123 }, "http://parent-domain.com" // 指定父页面域 ); }); </script> ``` **安全要点**： 1. 始终验证 `event.origin`（防御恶意网站） 2. 指定精确的目标域（避免使用 `"*"`） 3. 敏感数据需加密传输（如 JWT） --- ### 二、代理 iframe 方案（复杂场景） **原理**：在子页面创建同源代理 iframe 作为通信桥梁[^2] ```html <!-- 子页面 (http://child-domain.com/child.html) --> <script> function sendToParent(data) { // 创建同源代理iframe (需与主页面同域) const proxy = document.createElement('iframe'); proxy.style.display = 'none'; proxy.src = `http://parent-domain.com/proxy.html?data=${encodeURIComponent(JSON.stringify(data))}`; document.body.appendChild(proxy); // 清理资源 setTimeout(() => proxy.remove(), 1000); } // 业务中调用 document.getElementById("btn").addEventListener("click", () => { sendToParent({ action: "paymentCompleted" }); }); </script> ``` ```html <!-- 代理页面 (http://parent-domain.com/proxy.html) --> <script> // 解析URL参数并通知主页面 const params = new URLSearchParams(window.location.search); const data = JSON.parse(params.get('data')); // 直接操作父页面（同源无限制） window.parent.parent.handleChildMessage(data); </script> ``` **适用场景**： - 需支持 IE9 等老旧浏览器 - 主页面无法修改（仅能控制子页面） --- ### 三、安全实践与常见问题 1. **防御 XSS 攻击** ```javascript // 接收消息时严格过滤 window.addEventListener("message", (event) => { const allowedOrigins = ["https://trusted-domain.com"]; if (!allowedOrigins.includes(event.origin)) return; // 业务逻辑... }); ``` 2. **跨域 Cookie 传递** ```nginx # 子页面服务器配置 add_header Set-Cookie "token=value; SameSite=None; Secure"; ``` 3. **双向通信超时处理** ```javascript // 主页面设置响应超时 const timeoutId = setTimeout(() => { console.error("子页面响应超时"); }, 5000); window.addEventListener("message", (event) => { clearTimeout(timeoutId); // 处理正常响应 }); ``` --- ### 四、框架集成示例（React/Vue） **React 封装组件**： ```jsx function SafeIframe({ url, onMessage }) { const iframeRef = useRef(); useEffect(() => { const handler = (event) => { if (event.origin !== new URL(url).origin) return; onMessage(event.data); }; window.addEventListener('message', handler); return () => window.removeEventListener('message', handler); }, [url]); const sendMessage = (data) => { iframeRef.current.contentWindow.postMessage(data, new URL(url).origin); }; return <iframe ref={iframeRef} src={url} />; } // 使用 <SafeIframe url="https://child-domain.com" onMessage={(data) => console.log(data)} /> ``` --- ### 引用依据 [^1]: iframe跨域通信的终极解决方案：通过安全的消息传递机制实现跨域通信[^1] [^2]: 代理iframe方案利用同源代理页面实现跨域数据传递[^2] [^3]: 实际项目中通过跨域传递token解决子系统认证问题[^3] [^4]: postMessage基础通信示例验证了跨域消息传递可行性[^4]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值