Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >iframe+postMessage实现跨域通信

iframe+postMessage实现跨域通信

作者头像
pitaojin
发布于 2018-05-25 08:52:30
发布于 2018-05-25 08:52:30
5.5K1
举报

前言

需求背景:

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

实现思路:

  1. 上传图片时,需要在本窗口跳转到图片管理系统,并且两个系统之间要通信
  2. 考虑到两个系统是不同的端口号,存在跨域问题,这时发现HTML5新增了一个API-window.postMessage(),于是就决定用iframe结合window.postMessage()实现
  3. 在页面中嵌入一个iframe,将图片管理系统嵌入到当前的管理系统中,结合window.postMessage()实现跨域通信

项目背景

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

具体实现

参考资料

1、A页面使用到的语法

window.postMessage()

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

  • otherWindow:其他窗口的一个引用(在这里我使用了iframe的contentWindow属性)
  • message:将要发送到其他window的数据(可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化,原因是因为采用了结构化克隆算法:https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/The_structured_clone_algorithm
  • targetOrigin:接收信息的URL(在这里我当然填的B页面的URL)
  • transfer:可选参数(在这里我没使用)

具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

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

target.addEventListener(type, listener, options);

  • type:表示监听事件类型的字符串
  • listener:当所监听的事件类型触发时,会通知的一个对象或者一个函数
  • potions:可选参数(在此我用false,表示在listener被调用之后不会自动移除)

具体参考:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

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

需要特别注意的坑

  1. 一定要等A页面嵌入的B页面加载完成之后,再进行postMessage跨域通信
  2. 一定要对origin做判断,去掉不是来自我们目标窗口的origin,防止来自其他origin的攻击
  3. 着重注意window.postMessage()中window的用法,明确目标窗口的window

献上代码

A页面

B页面

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
contentWindow.onload "Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame."
contentWindow.onload "Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame."
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
窗口间通信方案——postMessage
postMessage 是 html5 引入的 API,postMessage 方法允许来自不同源的脚本采用异步方式进行通信,其实同源不同页面的脚本也可以采用 postMessage 方法进行通信。
用户6256742
2024/05/31
2730
postMessage与postMessage跨域
HTML5学堂今日postMessage跨域教学流程 先为大家讲解postMessage的基本知识 之后,我们书写一个实例:使用静态的iframe,实现A域前端页面与B域前端页面之间的数据传递 最后,我们使用JS动态的生成iframe,实现A域的前端页面与B域的前端页面“互通”,并在B域中使用AJAX申请B域的后台数据 1 postMessage通信的方法与事件 postMessage的跨域方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。 想要完成“一个域”与“另
HTML5学堂
2018/03/13
3.2K0
postMessage与postMessage跨域
Web中的窗口通讯方式及使用(postMessage/MessageChannel/BroadcastChannel)
三种常用的跨窗口通信技术:postMessage、MessageChannel 和 BroadcastChannel。
码客说
2024/01/06
2.4K0
postMessage的使用
postMessage是H5的API,用来解决跨页面通信的。postMessage的使用分为发送方和接收方。
全栈程序员站长
2022/09/14
1.1K0
iframe 与 postMessage 方法
既是发消息,就有发送方与接收方,发送方要调用 postMessage 方法,接收方要注册 onmessage 事件处理函数,处理接收的消息。
挥刀北上
2023/06/20
8880
iframe 与 postMessage 方法
【JS】504- HTML5 之跨域通讯(postMessage)
本文来自公众号【前端早读课】,最近工作中用在使用 postMessage ,所以一起分享给大家一下~
pingan8787
2020/02/26
1.9K0
【JS】504- HTML5 之跨域通讯(postMessage)
跨域方法汇总
做 Web 开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于 http://www.a.com/1.html 来说:
四火
2022/07/18
6540
跨域方法汇总
《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人
首先要强调的是跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。我们常用的跨域技术主要有如下几种:
徐小夕
2019/11/14
1.2K0
《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人
postMessage使用
参考自文档:https://www.runoob.com/js/met-win-postmessage.html
蓓蕾心晴
2022/06/30
5910
web messaging与Woker分类:漫谈postMessage跨线程跨页面通信
iframe_contentWindow.postMessage(message, targetOrigin, [transfer]);
周陆军
2021/07/03
2.4K0
postMessage 还能这样玩
在日常工作中,消息通信是一个很常见的场景。比如大家熟悉 B/S 结构,在该结构下,浏览器与服务器之间是基于 HTTP 协议进行消息通信:
ConardLi
2020/11/26
2.1K0
postMessage 还能这样玩
详解使用postMessage解决iframe跨域通信问题
这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。
用户1289394
2021/10/13
4.9K0
JSONP && CORS
  前天面试被问到了跨域的问题,自我感觉回答的并不理想,下面我就分享一下整理后的总结分享给大家
超然
2018/08/03
1.4K0
JSONP && CORS
通过postMessage进行跨域通信
最近工作中遇到一个需求,场景是:h5页作为预览模块内嵌在pc页中,用户在pc页中能够做一些操作,然后h5做出响应式变化,达到预览的效果。
Keller
2021/12/14
8040
前端:跨域
同源策略(same-origin policy)是一个重要的安全策略。它用于限制从一个源(origin)加载的文档或脚本,如何与另一个源(origin)的资源进行交互。
WEBJ2EE
2020/05/22
1.3K0
前端:跨域
如何利用postMessage窃取编辑用户的Cookie信息
某天,当我在做某个项目的漏洞测试时,在登录的一些HTTP请求记录中,我发现了一种利用postMessage方式窃取和编辑用户Cookie的方法。由于该测试是邀请测试,出于保密,我只能在下文中和大家分享一些方法思路。
FB客服
2019/05/09
1.7K0
如何利用postMessage窃取编辑用户的Cookie信息
深入理解 <iframe>的双向通信:从基础到实战
在现代 Web 开发中,<iframe> 是一个常用的 HTML 元素,用于在页面中嵌入另一个网页。然而,<iframe> 的嵌入页面与父页面之间的通信一直是一个复杂且容易出错的问题。本文将深入探讨 <iframe> 的双向通信机制,从基础概念到实战应用,帮助开发者彻底掌握这一技术。
Front_Yue
2025/03/12
5900
深入理解 <iframe>的双向通信:从基础到实战
你真的了解跨域吗
相信每个前端对于跨域这两个字都不会陌生,在实际项目中应用也很多,但跨域方法的多种多样让人目不暇接,前段时间公司同事出现了跨域问题,又一时找不到问题所在,所以在此总结下跨域知识,一篇由浅入深的万字Web基操文
isboyjc
2022/03/28
2.6K0
你真的了解跨域吗
postMessage实现跨域通信
web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。
javascript.shop
2019/09/04
1.8K0
postMessage实现跨域通信
web跨域解决方案
阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。 什么是跨域     在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。   JavaScript这个安全策
hbbliyong
2018/03/06
2.9K0
web跨域解决方案
相关推荐
窗口间通信方案——postMessage
更多 >
LV.0
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档