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

最新推荐文章于 2022-06-23 10:12:00 发布

原创最新推荐文章于 2022-06-23 10:12:00 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

web页面专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在网页中实现窗口顶层与当前窗口的URL重定向，确保页面跳转时URL保持一致。

部署运行你感兴趣的模型镜像

if(window.top.location.href!=location.href)    
{       
    window.top.location.href=location.href;    
}

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

ComfyUI

AI应用

ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dpn525

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决后台管理系统登录超时后，登录页面被嵌套在数据区的问题

孙应路的博客

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...

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嵌套第三方网页，导致鉴权失败无法登录的问题

老衲的少女心i~

05-23

2万+

目录前言一、iframe是什么？二、401 (Unauthorized)三、解决总结前言最近遇到的一个问题，老项目的第三方以iframe嵌入的网页，无法正常登录了。定位问题，发现：控制台报错401 (Unauthorized)，导致的无法正常登录。是因为我们iframe的问题，产生了跨域，导致我们的cookie无法共享。提示：以下是本篇文章正文内容，下面案例可供参考一、iframe是什么？ HTML 内联框架元素 (< iframe >) 表示嵌套的browsing contex

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  <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  <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  <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  <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]