利用window.postMessage()实现跨域消息传递（JavaScript）

VincentFF 发布于2019-08-22 15:13 / 859人阅读

摘要：说明方法可以安全地实现对象之间的跨域通信。接收窗口随后可根据需要自行处理此事件。传递给的参数通过事件对象暴露给接收窗口。发送端程序发送消息的基本语法就是接收消息的窗口的引用。接收程序度空间从接收消息从收到消息演示地址跨域消息传递

说明

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。

通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。

发送端 postMessage程序

var receiver = document.getElementById("receiver").contentWindow;
var btn = document.getElementById("send");
btn.addEventListener("click", function (e) {
    e.preventDefault();
    var val = document.getElementById("text").value;
    receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
});

发送消息的基本语法：

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

targetWindow

targetWindow就是接收消息的窗口的引用。获得该引用的方法包括：

Window.open

Window.opener

HTMLIFrameElement.contentWindow

Window.parent

Window.frames +索引值

message

message就是要发送到目标窗口的消息。数据使用结构化克隆算法进行序列化。这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin

targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“”或URI。 表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。

transfer

transfer是可选参数

接收端

目标窗口通过执行下面的JavaScript来侦听发送过来的消息：

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

完整程序 发送程序




    
    42度空间-window.postMessage()跨域消息传递



    
    


    <p>你的浏览器不支持IFrame。</p>

接收程序




    
    42度空间-从www.42du.cn接收消息



    Hello World!

演示地址

[跨域消息传递]（http://www.42du.cn/paper/11）

云服务器 GPU云服务器 js跨域传递数据分布式消息传递服务器消息的传递 linux消息传递隐藏数据

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

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

关于跨域简单总结

摘要：开发者需要在中设置属性为跨域是的简称这是一种利用浏览器漏洞解决跨域的办法脚本元素可以不受浏览器同源策略的限制。什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(...

learning 2019-08-22 16:45 评论0 收藏0
关于跨域

摘要：经历了几场笔试面试，屡次被问到关于如何实现跨域。转自个人博客关于跨域什么是跨域一般来说，如果你在开发中需要进行跨域操作从一个非同源网站发送请求获取数据，一般而言，你在浏览器控制台看到的结果为同源策略说到跨域就不得不提同源策略。前言转眼就是秋招季啦。经历了几场笔试面试，屡次被问到关于如何实现跨域。老实说，之前都是纸上谈兵，也没有项目需要跨域，甚至觉得这个东西没什么意义。直到今天项目中...

CoreDump 2019-08-21 14:27 评论0 收藏0
同源策略与JS跨域（JSONP , CORS）

摘要：由此可以看出，同源策略确实是必不可少的，那么它会带来哪些限制呢和无法读取。由于浏览器的同源策略，在网页端出现了这个跨域的问题，然而我们发现，所有的属性并没有受到相关的限制，比如等。本文按照政治问答题必备套路分为以下3个部分：为什么要跨域？跨域是什么？如何实现跨域？ Section1、为什么要跨域？自古以来（1995年起），为了用户的信息安全，浏览器就引入了同源策略。那么同...

Shisui 2019-08-21 15:52 评论0 收藏0
浏览器安全机制

摘要：书接上文浏览器之引擎本章主要讲解浏览器安全机制的网页的安全和浏览器的安全。总结浏览器的安全机制包括网页安全模型和沙箱模型其中网页安全模型就是利用了同源策略，让不同域中的网页不能相互访问，当然有好几种浏览器跨域的方法可以其相互访问。 showImg(https://segmentfault.com/img/remote/1460000016375575); 前言此文章是我最近在看的【W...

aikin 2019-08-23 11:56 评论0 收藏0