关于window.postMessage

很久没写东西了,偶尔会对着本文编辑器发呆,不知道自己想写什么,不知道应该写什么。又觉得什么都不应该写,什么也都不值得写。能静下心坐在电脑前写点什么是越来越奢侈的事情。也许,too many mind。

我自己说的

我相信每一个接触过前端开发的程序员都被跨域问题折磨过。

那么什么是跨域问题?
经历过的人脱口而出,“跨域问题就是处于安全考虑,当前域名不允许访问另一个域名的资源”。
这样说其实并不正确。仔细回忆一下,在曾经访问过的网页中,是否包含非本域名的CSS,JS和图片?
实际上获取这些CSS,JS和图片的请求已经跨域了,可是并没有出错。

CORS定义 点这里。严谨点说,是只有通过脚本发出的跨域请求才会被禁止,而通过标签发出的资源请求则可以顺利完成。并且进行拦截动作的,是浏览器本人。
原因显而易见————脚本运行在浏览器,而不是服务器。所以通过服务器,或者非浏览器的客户端(或者魔改版浏览器),可以随意的向任意域名发出请求。
为了绕开这个机制,各路神仙也是各显神通,开了各种各样的脑洞。

但实际上,浏览器并没有赶尽杀绝,至少提供了两条正规的跨域渠道。
一个是在header上加Access-Control-Allow-Origin。
另一个就是window.postMessage方法。

postMessage提供了一个简单易用的跨域通信方法。
简单地说就是用api的方式推送信息给同一浏览器下指定的域名的窗口/iframe,通过listener的方式监听别的域名的窗口/iframe推送过来的信息。
这样在不用动服务器设置的前提下,可以实现页面之间的通信。

举个例子,我的域名https://keal.us/lab/Parent.html页面要与https://keallab.com/lab/child.html页面进行通信。
首先在各自的页面加载完成之后打开消息监听。
之后在parent页面推送消息给child页面,child页面接到消息后回复给parent页面并展示。
需要留意的是,越强大的武器越要小心使用,在监听消息的时候一定要对域名进行审查,以免发生跨域攻击。

亲自试一下

简单的代码示例如下:


发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据