基于postMessage 实现 非同源数据共享

最新推荐文章于 2025-03-26 17:24:01 发布
原创 最新推荐文章于 2025-03-26 17:24:01 发布 · 309 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #大数据

本文介绍了一种基于postMessage的非同源数据共享方案，实现了多个子系统间的单点登录功能。通过window.open()打开各子系统无需认证的页面，并使用postMessage传递token，完成身份验证。

基于postMessage 实现 非同源数据共享

业务需求：将多个不同公司开发的系统 统一在一起，只需一次登录。各个系统的开发人员提供token接口
  1. 各个子系统提供一个类似login界面的不需要携带token即可访问的页面A
  2. 我们采用window.open()来打开各个子系统页面A。
  3. 打开后 利用postMessage 向页面A发送token
  4. 页面A监听到token发送,并将其写在对应的位置。即可跳入各自的主页面
JavaScript使用HTML5的window.postMessage实现跨域通信例子
01-21
JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多： 1.document.domain+iframe的设置，应用于主域相同而子域不同； 2.利用iframe和location.hash，数据直接暴露在了url中，数据容量和类型都有限 3.Flash LocalConnection， 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信， 只要 在同一客户端就行，跨应用程序， 可以跨域。 window.name 保存数据以及跨域 iframe 静态代理动态传输方案，充分的运用了window.name因为页面的url改变而name不改变的特性。 各种方案
非同源信息共享 postMessage
weixin_43983277的博客
03-02 625
otherWindow.postMessage(data, targetOrigin, [transfer]); 参数 说明 参数 说明 otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 data 将要发送到其他 window的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都
(二)文档请求不同源之window.postMessage跨域
weixin_30706691的博客
04-02 269
一、基本原理 HTML5为了解决跨域，引入了跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。Internet Explorer 8+, chrome，Firefox , Opera和Safari 都支持这个功能。 二、测试步骤 1、创建a.html ...
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
yehaocheng520的博客
12-22 4395
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
postMessage
qietingfengdeyanse的专栏
07-22 404
最近公司项目遇到一个问题:项目中使用的百度地图插件不支持https协议,所以想到的办法是当请求是Https协议的时候,弹出一个新的浏览器tab(子页面),需要的数据由主页面传到子页面进行展示,但是其中还有如下问题 0 判断当前请求是https协议 window.location.protocol == "https:"(冒号不要忘l) 1 IE下不支持postMess
基于iframe postMessage实现跨域表单提交
此时，主页面通过 `postMessage` 接收来自 `iframe` 的反馈信息，实现“无刷新”的异步数据交互体验。 特别值得注意的是，此方法能够支持**文件上传**功能，这是许多纯 AJAX 跨域方案难以实现的痛点。因为传统 ...
详解使用postMessage解决iframe跨域通信问题
12-13
在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面（如iframe），并实现两者之间的...
在Web开发中，如何利用localStorage结合postMessage实现跨域数据共享，并确保操作的安全性和高效性？
11-01
在面对跨域数据共享的需求时，传统的cookie方式受限于同源策略，而localStorage提供了更大的存储空间和更灵活的操作方式。结合《利用localstorage解决跨域数据共享：挑战与API设计》一文，我们可以采用以下策略实现...
跨域通信解决方案：基于HTML5 postMessage的框架实现
由于JavaScript是Web开发中最广泛使用的编程语言之一，这个框架极大地简化了在不同系统间进行集成的复杂性，使得各个业务系统能够更容易地实现数据共享和业务流程的协同工作。 压缩包子文件的文件名称列表中只有一...
基于postMessage的iframe父子页面双向通信实现
在微前端架构中，多个子应用通过iframe独立部署时，`postMessage`常被用作主应用与子应用之间的桥梁，实现菜单同步、用户登录状态共享、路由联动等功能。 综上所述，该资料所涵盖的知识点不仅是前端基础技能的一...
html post 两个页面,HTML5中使用postMessage实现两个网页间传递数据（
weixin_30562757的博客
06-04 385
原标题：HTML5中使用postMessage实现两个网页间传递数据(这篇文章主要为大家详细介绍了利用HTML5里的window.postMessage在两个 网页间传递数据的相关资料，postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据，对postMessage感兴趣的小伙伴们可以参考一下。估计很少人知道HTML5 APIS里有一个window.postM...
HTML5 postMessage解决跨域|跨窗口通信
HELLO WORLD
02-24 681
知识拓展 postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 语法 postMessage(data,origin) 方法接受两个参数 data:要传递的数据 html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参...
使用 postMessage 实现跨域通信
李赛赛的专栏
11-19 6310
在前端开发中，Web 应用通常需要在不同窗口、不同 iframe 之间进行通信。而 postMessage 是一种安全的跨文档通信方法，用于在两个不同的浏览上下文（如不同的窗口、iframe，甚至是不同的标签页）之间发送消息。本文将详细介绍 postMessage 的使用方法及其应用场景。
不同源页面的通信
m_review的博客
11-05 761
iframe 嵌套页面通过 postMessage 通信 父页面： file:///Users/yuejingge/Documents/a.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
postMessage 实现A系统新开B系统页面，B系统获取A系统token，从而通过B系统登录验证
Loria1的博客
06-04 1147
业务场景： A系统和B系统相互跨域， A系统开起B系统，B系统需要获取登录验证信息 A，B系统都是通过token验证登录信息
HTML5解决跨域方案之postMessage
weixin_33991727的博客
07-12 188
postMessage()方法可以使不同源的脚本采用异步方式进行数据传递 两个参数 data 传递的数据，在传递参数的时候需要使用JSON.stringify()方法将对象参数序列化 origin 目标的源，协议，主机，端口号 将主页面和次级页面分别用node或者其他方法启动起来查看效果 详细说明在代码注释中 主页面 <body&g...
SendMessage、PostMessage原理
迷茫的小莱
03-23 972
SendMessage、PostMessage原理本文讲解SendMessage、PostMessage两个函数的实现原理，分为三个步骤进行讲解，分别适合初级、中级、高级程序员进行理解，三个步骤分别为：1、SendMessage、PostMessage的运行机制。2、SendMessage、PostMessage的运行内幕。3、SendMessage、PostMessage的内部实
postMessage到底有多好用
weixin_33690367的博客
01-16 908
postMessage是什么？ postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 Html5中的postMessage解决跨域，跨窗口消息传递 postMessage的优点 两个跨域页面的消息传递 多窗口之间的消息传递 嵌套iframe的数据传递 postMessage() postMessage()方法允许来自不同源的脚本...
在跨域名的应用之间共享 Token（二）
最新发布
m0_51429350的博客
03-26 557
Auth -->|通过 postMessage 传递(Token)| sub1。Auth -->|通过 postMessage 传递(Token)| sub2。在认证服务端，配置 CORS 允许客户端子域的源。：子域名必须在请求头中包含。在完全不同的子域名（如。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值