前端内嵌iframe网页单点登录的三种方式

于 2024-05-12 00:22:50 发布
阅读量506 收藏 7
点赞数 6
分类专栏： 前端学习笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59747594/article/details/138734342
版权

背景：我们开发中会遇到让内嵌的iframe进行登录，但是有希望是单点登录，不想多次登录

目录

方法一：共享sessionStorage或localStorage

方法二：设置内嵌iframe的url参数

方法三：通过父子页面通信postMessage

方法一：共享sessionStorage或localStorage

         父页面（主站）和iframe（子站点）之间如果是同一域名或满足同源策略，可以直接共享sessionStorage或localStorage中的登录信息

        对于同源的父页面和内嵌的子页面来说，它们会共享同一个sessionStorage和localStorage，而不是各自有独立的sessionStorage和localStorage。这意味着当父页面设置数据到sessionStorage和localStorage时，子页面可以读取和访问这些数据，并且当子页面设置数据到sessionStorage和localStorage时，父页面也可以读取和访问这些数据。因此，它们共享同一个sessionStorage和localStorage空间，可以实现数据共享和交互。

方法二：设置内嵌iframe的url参数

        在设置内嵌iframe的url时候，给他必要的登录信息，这个需要跟内嵌另一个网页项目的约定好，我们传给他什么他们才可以登录。

方法三：通过父子页面通信postMessage

iframe父子页面通信_iframe父子页面国际化通信-CSDN博客

扩展：同源网页

如果网页在同源的情况下，子页面可以直接通过window.parent来拿到父页面window对象，想怎么玩都行，反之父页面也可以用下面来拿到子页面window对象


const iframe = document.getElementById('myIframe');
iframe.contentWindow
_揽
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS动态修改iframe内嵌网页地址的方法
10-24
主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
前端单点登录实现的三种方式
weixin_43336525的博客
07-25 2082
假如主系统登录后可以实现跳转应用系统自动登录，可以利用iframe,在主系统登录界面中内嵌应用系统的登录界面。当点击登录时，应用系统向后端获取cookie，保存在自己的页面中，并通过postMessage向父窗口（主系统）发送cookie，主系统接收cookie，并存储在自己的界面中。Cookies.set('token', 值, { expires: 60, path: '', domain: 'taobao.com' })只有主域名相同，浏览器在访问时才会携带对应的 cookie。
如何维持前端页面中内嵌iframe的登录态
最新发布
ivan5277的博客
04-03 866
总之，关键在于合理地管理和共享用户的身份验证信息，同时确保安全性。注意在实际应用中，应根据安全策略和隐私政策谨慎处理敏感信息，遵循最小权限原则。
vue 前端 用iframe实现单点登录
小白成长记
06-29 5940
前端在实现单点登录过程中，最主要的 是按照系统的要求 保存好 可以证明系统登录过的证据。保存证据（下文统称其为token）的位置：1. localStorage，2. cookie对于存在不同域名的系统，我们可以借助iframe的src属性解决跨域问题，然后用iframe的dom元素的contentWindow的postMessage向iframe内嵌的网页传递数据，再在被内嵌的网页的代码中添加message事件截取消息，然后去保存token。具体代码见下方监管系统中点击跳转的回调函数：.........
什么是单点登录（SSO）前端用 iframe 实现单点登录 超详细说明！！
akkigg的博客
03-04 761
单点登录的英文名叫做：Single Sign On（简称SSO单点登录是一种身份验证过程，允许用户通过一次登录验证即可访问多个应用程序或服务。SSO的关键好处是提高了效率，减少了用户记住多个密码的负担，同时也简化了用户管理。比如阿里系的淘宝和天猫，很明显地我们可以知道这是两个系统，但是你在使用的时候，登录了天猫，淘宝也会自动登录。
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
09-28
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
使用iframe在网页中嵌入其他网页的方法
09-28
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
网页模板——jQuery内嵌iframe导航菜单特效源码.zip
11-22
网页模板——jQuery内嵌iframe导航菜单特效源码
JS防止网页被嵌入iframe框架的方法分析
01-19
本文实例讲述了JS防止网页被嵌入iframe框架的方法。分享给大家供大家参考，具体如下： 例如： [removed] if (window!=top) // 判断当前的window对象是否是top对象 top.location.href = [removed].href; // 如果...
django2用iframe标签完成网页内嵌播放b站视频功能
12-23
前言： 给自己的网站中加入视频资源，有两种方法，一种是用iframe标签引用外站资源，另一种则使用video标签，获取站内资源进行视频播放。...果断选择第一种，使用iframe标签的方式来实现网页内嵌播放
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
10-16
主要介绍了手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作,结合实例形式分析了CKEDitor4 Dialog内嵌IFrame具体操作步骤与相关注意事项,需要的朋友可以参考下
unity内嵌网页插件.rar
12-28
在unity中打开网页,并使用,unity内嵌网页插件,unity内嵌网页插件
jQuery内嵌iframe导航菜单.zip
10-08
非常实用的特效代码，可以完美运行，可以二次修改！
jQuery内嵌iframe导航菜单
04-27
jQuery内嵌iframe导航菜单
unity内嵌网页BrowserUI
12-06
适用于做unity内嵌网页，只需要下载导入unity即可。功能 - 将网站渲染为2D或3D对象 - Chromium后端; 一流的支持：HTML，CSS和JavaScript - 从Unity 调用JavaScript¹ - 从JavaScript调用Unity¹ - 透明或不透明的...
flex内嵌html网页示例代码
10-26
主要介绍了flex如何内嵌html网页,需要的朋友可以参考下
详解微信小程序与内嵌网页交互实现支付功能
10-17
主要介绍了详解微信小程序与内嵌网页交互实现支付功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue iframe内嵌网页交互
05-10
在 Vue 中嵌入 iframe 可以通过使用 `<iframe>` 标签来实现。然而，由于 iframe 内的网页与主页不在同一个域，因此直接访问 iframe 内部的 DOM 元素是不允许的。为了实现 iframe 内的网页与 Vue 组件的交互，可以使用 iframe 的 postMessage 方法，通过跨域消息传递来实现。 以下是一个示例代码： ```vue <template> <div> <iframe ref="iframe" src="https://example.com" @load="onIframeLoad" ></iframe> </div> </template> <script> export default { methods: { onIframeLoad() { const iframe = this.$refs.iframe; const iframeWindow = iframe.contentWindow; // 监听来自 iframe 内部的消息 window.addEventListener('message', (event) => { if (event.source === iframeWindow) { // 处理来自 iframe 内部的消息 console.log(event.data); } }); // 向 iframe 内部发送消息 iframeWindow.postMessage('hello from Vue', 'https://example.com'); }, }, }; </script> ``` 在这个示例中，我们在 iframe 的加载事件中获取了 iframe 的 window 对象，然后通过监听 window 对象的 message 事件来接收来自 iframe 内部的消息。我们还可以使用 postMessage 方法向 iframe 内部发送消息。需要注意的是，postMessage 方法的第二个参数必须是 iframe 内网页的地址，以确保安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_揽

苦der程序员敲代码

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值