PostMessage的原理和实际应用

文章主要想聊的是关于 PostMessage 的用途。虽然搜索引擎里关于 PostMessage 文档一抓一大把，大多是介绍api，说明它能跨域等，但关于它的实际应用方面的探讨说明并不多，没能体现出它的价值。

首先，我们大概解一下PostMessage的原理

PostMessage 是 html5 新引进的一个可跨源通信 api，你可以通过这个 api，让主页面和任意 frame 类页面或 window.open 打开的页面进行双向通信。它的大概运作流程如下图：

简而言之，通过 PostMessage，你可以跨域实现两个网页间的通讯。
关于它的用法，需要注意的几点：

首先，信息传递安全问题。为了你的信息传递能准确传达，无论是作为主页面还是子页面，传递重要信息时都应该填写 origin 而不是 “*”，避免被截获。
其次，iframe 或者 window.open 的 load 事件是不准确的。为了避免漏发漏接的情况，建议在通讯页面里回传加载状态。

另外，它的兼容性也是非常喜人的，一片绿油油，可以放心大胆的使用。（数据来源: caniuse）

如果需要更进一步了解 api 的用法，可以查阅一下【详细文档】，我偷个懒，不详细说明了~

了解过后，开始进入正题

如果仅仅只是为了解决ajax跨域，其实方案很多，像 cors、jsonp等就足够了。PostMessage 的价值体现，应该是能让两个不同的网页之间建立联动。

抛开 PostMessage，直接和某个网站通讯是不可行的，浏览器的安全策略会限制你的所有操作。这种情况下，你能通讯的就只有那个网站的服务器接口，通过跨域支持，实现信息交互。这种方式很稳健，缺点也比较明显：

需要和对方服务器通讯，跨域是需要额外设置才能支持的，这个需要和对方沟通协商。
如果需要提取对方网页里的某个值，或者通知对方有交互变化，除了通过ajax轮询，由服务器代为传递信息，别无它法。

下面，【A】代表主页面，【B】代表 iframe 或者 window.open 打开的页面，简单列举一下 PostMessage的常见应用：

【A】需要【B】中得到信息做适配，如获取网页文档宽高做自适应弹窗等。
当【B】服务器的api接口不对外使用，不提供跨域支持，但【A】又需要使用【B】的api服务支持。此时【B】仅需要提供一个基于 PostMessage 搭建的服务支持，即可完成从校验到调用等操作，【A】在过程中不需要接触 ajax 请求，就能得到相应的结果。
页面实时回调。举个栗子，假设你要做一个商城，在你的订单页进行到支付步骤的时候，采用了 window.open 的方式打开了支付平台的页面。
常规情况下，你需要 ajax 轮询订单状态，或者弹出一个类似【是否已完成支付？】的弹窗，当用户操作时再ajax获取订单状态。
在 PostMessage 的支持下，你可以实时得到支付平台的反馈信息，如用户是否已经完成 / 取消了订单。在用户重新回到你的页面时，就可以展示出相应的结果反馈了。

下面用【第三方登录 SDK】的制作思路拓展说明一下。

首先捋一下思路，记得，我们才是提供服务的一方。面对 cp 和用户，提供的 api 就应该是一键运行的模式，越简明约好，如初始化等逻辑都应该在我们的这边自动完成。
在这个前提下，向 cp 提供一个可引用执行的 sdk.js 是最简单不过的，cp 只需要引用和调用即可。

那么你的 sdk 应当：

自动完成初始化，如实例化 sdk、建立队列暂存任务、监听信息等
静默 iframe 打开通讯支持页面，建立联系
进入可运行状态之后，自动运行积压在队列里的任务
在用户操作页面触发sdk请求时，检测请求数据格式，通过 PostMessage 发出请求
得到来自通讯支持页面的信息，自动过滤，分类执行

而通讯支持页面则：

在被加载打开时，进行第一轮校验
在收到身份验证信息时，检查是否符合白名单
在收到其他请求时，按白名单结果，决定是否提供服务。是则再发起相关请求，得到结果；否则拒绝服务。最后无论成功失败，都通过 PostMessage 响应相应的操作。

运行逻辑流程图如下：

综上所述
PostMessage 简单应用能为你带来跨域支持，不同页面间实现信息交互；在高级应用时，基于它能在服务方和第三方之间架设一个安全实时且不耗带宽【服务平台】，如服务器后端一样工作。PostMessage 使用虽然简单，但只要用得好，真的可以说是一把利刃~

文章到此结束，感谢你的阅读！

PostMessage的原理和实际应用相关推荐

安全基础第五天：跨域
一.同源和非同源含义: 协议相同.域名相同.端口相同目的: 保证用户安全信息,防止恶意网站窃取数据二.利用document.domain降域实现跨域原理: 利用的是document.domai ...
SendMessage、PostMessage原理
SendMessage.PostMessage原理本文讲解SendMessage.PostMessage两个函数的实现原理,分为三个步骤进行讲解,分别适合初级.中级.高级程序员进行理解,三个步骤分别 ...
SendMessage、PostMessage原理和源代码详解
本文讲解SendMessage.PostMessage两个函数的实现原理,分为三个步骤进行讲解,分别适合初级.中级.高级程序员进行理解,三个步骤分别为: 1.SendMessage.PostMessa ...
java sendmessage_SendMessage、PostMessage原理和源代码详解
本文讲解SendMessage.PostMessage两个函数的实现原理,分为三个步骤进行讲解,分别适合初级.中级.高级程序员进行理解,三个步骤分别为: 1.SendMessage.PostMessa ...
win32——消息循环原理函数 GetMessage PeekMessage TranslateMessage SendMessage PostMessage...
//消息循环 MSG 结构体 typedef struct tagMSG {HWND hwnd;UINT message; //消息ID WPARAM wParam;LPARAM lParam;DWO ...
键盘谍影键盘监视器的原理和防范
简介本文将详细讨论一个键盘监视器的C++/C#开发过程并针对反窥探提出了一些建议.希望读者理解基于钩子技术的窥探软件的工作原理以更好地针对自己的软件加以保护. 背景基于软件的键盘事件记录器是一个严 ...
jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
读书笔记之《Windows内核原理与实现》
最近学习<Windows内核原理与实现>发现其博大精深,粗略过了一遍,很多东西比较茫然,看书之余把书中涉及的函数,结构,全局变量的所在页数总结出来,便于以后查阅. 由于半自动半手工,难免有 ...
服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式使用postMessag ...

PostMessage的原理和实际应用

PostMessage的原理和实际应用

PostMessage的原理和实际应用相关推荐

最新文章

热门文章