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

最新推荐文章于 2024-04-07 16:19:42 发布
最新推荐文章于 2024-04-07 16:19:42 发布
阅读量231 收藏
点赞数
文章标签： 前端 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fool_man_/article/details/125555928
版权

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

业务需求：将多个不同公司开发的系统 统一在一起，只需一次登录。各个系统的开发人员提供token接口
  1. 各个子系统提供一个类似login界面的不需要携带token即可访问的页面A
  2. 我们采用window.open()来打开各个子系统页面A。
  3. 打开后 利用postMessage 向页面A发送token
  4. 页面A监听到token发送,并将其写在对应的位置。即可跳入各自的主页面
温水配甜梨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
非同源信息共享 postMessage
weixin_43983277的博客
03-02 519
otherWindow.postMessage(data, targetOrigin, [transfer]); 参数 说明 参数 说明 otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 data 将要发送到其他 window的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都
HTML5中的postMessage API基本使用教程
09-28
由于浏览器的安全策略，通常不允许不同源的页面直接访问对方的DOM或共享数据，但`postMessage`提供了一个解决途径。 ### 基本使用 `postMessage`方法接受两个参数：要发送的消息和接收消息的窗口的源（`...
(二)文档请求不同源之window.postMessage跨域
weixin_30706691的博客
04-02 183
一、基本原理 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 3057
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
postMessage到底有多好用
weixin_33690367的博客
01-16 793
postMessage是什么？ postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。 Html5中的postMessage解决跨域，跨窗口消息传递 postMessage的优点 两个跨域页面的消息传递 多窗口之间的消息传递 嵌套iframe的数据传递 postMessage() postMessage()方法允许来自不同源的脚本...
HTML5解决跨域方案之postMessage
weixin_33991727的博客
07-12 139
postMessage()方法可以使不同源的脚本采用异步方式进行数据传递 两个参数 data 传递的数据，在传递参数的时候需要使用JSON.stringify()方法将对象参数序列化 origin 目标的源，协议，主机，端口号 将主页面和次级页面分别用node或者其他方法启动起来查看效果 详细说明在代码注释中 主页面 <body&g...
SendMessage、PostMessage原理
迷茫的小莱
03-23 849
SendMessage、PostMessage原理本文讲解SendMessage、PostMessage两个函数的实现原理，分为三个步骤进行讲解，分别适合初级、中级、高级程序员进行理解，三个步骤分别为：1、SendMessage、PostMessage的运行机制。2、SendMessage、PostMessage的运行内幕。3、SendMessage、PostMessage的内部实
详解使用postMessage解决iframe跨域通信问题
12-13
在Web开发中，跨域通信是一个常见的挑战，由于浏览器的同源策略限制，不同源的页面之间不能直接共享数据或触发交互。然而，有时候我们需要在一个页面（如主页面）中嵌入另一个页面（如iframe），并实现两者之间的...
详解html5 postMessage解决跨域通信的问题
09-22
在Web开发中，由于浏览器的安全策略，不同源的页面不能直接共享或交换数据，这被称为同源策略。然而，有时候我们需要在不同源的页面之间进行通信，比如在一个页面中嵌入了第三方的IFRAME，此时`postMessage`就派上了...
JavaScript iframe数据共享接口实现方法
11-24
本文将详细介绍一种基于`window.top`的JavaScript iframe数据共享接口实现方法。 首先，理解`window.top`属性。`window.top`引用的是当前浏览器窗口的顶级窗口，即使在嵌套的iframe中，`window.top`始终指向最外层...
html5跨域通讯之postMessage的用法总结
09-28
在Web开发中，由于浏览器的同源策略限制，不同源的网页之间不能直接进行JavaScript的交互，但`postMessage`提供了一种安全的机制来实现这种通信。 ### 1. `postMessage`基本原理 `postMessage`允许一个窗口（例如...
window.postMessage(跨源通信)
weixin_44922480的博客
10-30 6550
window.postMessage(跨源通信)
单点登录：两个不同域名Vue项目相互跳转并且传递Token
最新发布
qq_54065476的博客
04-07 2370
前端实现SSO
window.postMessage()实现跨源通信
m0_61852712的博客
10-04 1260
postMessage()实现页面之间的实时通讯
不同源iframe跨域问题（window.postMessage）
weixin_43959024的博客
06-23 1369
最近遇见一个这样的问题：在一个网页中插入一个iframe，iframe页面执行成功之后需要跳转新页面，由于safair浏览器不能在新页面打开，so，选择在当前页面打开，由于iframe是个弹窗，用window.location.href跳转页面会在弹窗里展示，这时可以用window.postMessage解决 知识点：window.postMessage window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为http
html5 postMessage解决跨域、跨窗口消息传递
weixin_34221773的博客
12-08 692
一些麻烦事儿 平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个问题的跨域数据传递 postMessage() 这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()...
使用postMessage来实现父子通信跨域
qq_26642611的博客
03-13 650
1.子向父通信 parent.html window.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑 } }); child.html window.parent....
聊一聊跨域和同源策略
mubo970901的博客
08-21 279
什么是同源策略 同源策略是浏览器的一个安全策略，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 有这种限制的主要原因是如果没有同源策略将导致安全风险。假设用户在访问银行网站，并且没有退出，然后他又去访问其他的网站，刚好这个网站有恶意的JavaScript代码，在后台请求银行网站的信息，因为用户当前在银行站点仍然为登陆状态，那么恶意代码就可以在银行站点做任意事情。如果没有同源策略，这将是很危险的事情。 什么是源：就是协议，域名和端口号 什么是同源： 若URL中的协议、域名和端口号完全.
【9大跨域解决方案】postMessage解决跨域的原理
2024路在何方
04-09 6252
postMessage() 这是H5引入的一个API，可以实现跨文档、多窗口、跨域消息的传递。 postMessage(data,origin)方法 data:要传递的数据 origin:字符串参数，只目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写 如果要传递给所有窗口，值可以为"*" 如果传给当前窗口同源的话，值可以为"/" message 当使用postM...
postMessage跨域写入cookie
09-15
总结而言，postMessage无法直接跨域写入cookie，但可以通过传递数据给同源窗口，并在同源窗口中写入cookie，再将结果返回给目标窗口，间接实现跨域写入cookie的功能。这是一种安全可靠的跨域通信方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值