iframe+postMessage实现跨域通信

Youngdze 发布于2019-08-22 17:17 / 2296人阅读

摘要：前言需求背景最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片实现思路上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信考虑到两个系统是不同的端口号，存在跨域问题

前言 需求背景：

最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片

实现思路：

上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信

考虑到两个系统是不同的端口号，存在跨域问题，这时发现HTML5新增了一个API-window.postMessage()，于是就决定用iframe结合window.postMessage()实现

在页面中嵌入一个iframe，将图片管理系统嵌入到当前的管理系统中，结合window.postMessage()实现跨域通信

项目背景

该管理系统基于React.js搭建，在此简称为A页面，地址为http://www.blogoog.com:8000

图片管理系统基于Vue.js搭建，在此简称为B页面，地址为http://www.blogoog.com:8088

具体实现 参考资料

iframe-MDN

window.postMessage()-MDN

1、A页面使用到的语法 window.postMessage()

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：其他窗口的一个引用（在这里我使用了iframe的contentWindow属性）

message：将要发送到其他window的数据（可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化，原因是因为采用了结构化克隆算法）

targetOrigin：接收信息的URL（在这里我当然填的B页面的URL）

transfer：可选参数（在这里我没使用）

具体参考：window.postMessage()-MDN

window.addEventListener("message", receiveMessage, false);

target.addEventListener(type, listener, options);

type：表示监听事件类型的字符串

listener：当所监听的事件类型触发时，会通知的一个对象或者一个函数

potions：可选参数（在此我用false，表示在listener被调用之后不会自动移除）

具体参考：addEventListener-MDN

receiveMessage = (event) => {}

event.data：从另一个window传递过来的对象（包含传递过来的所有信息）

event.origin||event.originalEvent.origin：window.postMessage()发送消息的目标URL

event.source：对发送消息的窗口对象的引用

注意点！！！

在页面内嵌入iframe页面的情况下，需要等到页面内的iframe页面，也就是B页面加载完成之后，才能进行postMessage跨域通信

event.origin中的origin不能保证是该窗口的当前origin或者未来origin，因为postMessage被调用后，可能会被导航到不同的位置，所以需要做个异常情况判断处理origin !== "http://www.blogoog.com:8088"

2、B页面使用到的语法 top.postMessage("data", "http://www.blogoog.com:8000")

参考上面A页面的语法

为什么用top而不用window下面再讲

window.addEventListener("message", receiveMessage, false);

参考上面A页面的语法

receiveMessage = (event) => {}

参考上面A页面的语法

window.postMessage()中的window到底是啥？

始终是你需要通信的目标窗口

A页面中：A页面向B页面发送跨域信息，window就是在A页面中嵌入的iframe指向的B页面的window，即：iframe.contentWindow

B页面中：B页面想A页面发送跨域信息，window就是A页面的window，在这里因为B页面时嵌入到A页面中的，对于B页面来讲，window就是top或者parent

需要特别注意的坑

一定要等A页面嵌入的B页面加载完成之后，再进行postMessage跨域通信

一定要对origin做判断，去掉不是来自我们目标窗口的origin，防止来自其他origin的攻击

着重注意window.postMessage()中window的用法，明确目标窗口的window

献上代码 A页面

B页面

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/dev...

云服务器 GPU云服务器 iframe跨域实现跨域 js实现跨域访问跨域通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95032.html

messengerjs iframe 跨域传数据

摘要：刚来公司时做得第一个项目是跨部门合作，使用了来做通信，十分简单，代码不长，这里分析一下间通信的实现方式源码消息前缀建议使用自己的项目名避免多项目之间的冲突注意消息前缀应使用字符串类型类消息对象往发送消息出于安全考虑发送消息会带上前缀刚来公司时做得第一个项目是跨部门合作，使用了MessengerJS来做通信，十分简单，MessengerJS代码不长，这里分析一下iframe间通信的实现...

tomorrowwu 2019-08-19 18:16 评论0 收藏0
前端爬坑日记之vue内嵌iframe并跨域通信

摘要：由于该项目是基于原本的安卓，做的微信，所以原来的使用的页面现在需要在中实现，那就是使用查看了很多很多文档，其中这一篇是很有价值的下面将天的爬坑最终以问答的方式总结如下组件中如何引入如何获取对象以及内的对象如何向内传送信息内如何向外部发送信息由于该项目是基于原本的安卓app，做的微信h5，所以原来的使用webview的页面现在需要在vue中实现，那就是使用iframe查看了很多很多文档...

dreambei 2019-08-23 11:42 评论0 收藏0
window.postMessage跨域通信

摘要：背景最近公司要求所有产品付款页面输入卡号密码信息的部分必须采用公司的统一页面。所以在通知付款时，我们采用了方法进行通信。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。该字符串为协议域名和端口号拼接而成。背景最近公司要求所有产品付款页面输入卡号密码信息的部分必须采用公司的统一页面。具体实现方案是，我们将公司统一的输入卡号密码的页面通过iframe嵌入我们产品的付...

xialong 2019-08-23 11:35 评论0 收藏0
关于跨域问题

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

ZoomQuiet 2019-08-23 16:25 评论0 收藏0
关于跨域问题

摘要：面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。面试必考题吧，所以在这会详细介绍以下内容跨域产生的原因罗列最常用的解决方法分析各种方法原理罗列各种方法优缺点什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它...

livem 2019-08-02 16:09 评论0 收藏0