经过postMessage进行跨域通讯

最近工做中遇到一个需求，场景是：将一个pc端a页面做为主要展现内容内嵌在另外一个pc端b页面中，用户在a页面中点击关闭的时候，而后b页面也实现关闭的效果。

这里首先想到就是经过iframe将a页面内嵌到b页面中，而后a页面经过postMessage方法，把变化的数据发送给b页面，b页面经过addEventListener接收数据，进行关闭操做。

postMessage()语法以及相关api说明

targetWindow.postMessage（message，targetOrigin，[ transfer ]）;复制代码

targetWindow

对将接收消息的窗口的引用。得到此类引用的方法包括：

• window.open （生成一个新窗口而后引用它），
• window.opener （引用产生这个的窗口），
• HTMLIFrameElement.contentWindow（<iframe>从其父窗口引用嵌入式，可简单理解为从父级页面向本身页面进行数据传递），
• window.parent（从嵌入式内部引用父窗口<iframe>，可简单理解为从子级页面向父级页面传递数据）（当前场景下所用的window.parent）
• window.frames +索引值（命名或数字）。

message

要发送到其余窗口的数据。使用结构化克隆算法序列化数据。这意味着能够将各类各样的数据对象安全地传递到目标窗口，而无需本身序列化。

targetOrigin

指定要调度的事件的 targetWindow的原点，能够是文字字符串 "*"（表示没有首选项），也能够是URI。若是在计划调度事件时， targetWindow文档的方案，主机名或端口与 targetOrigin提供的内容不匹配，则不会调度该事件；只有当全部的三个条件都匹配时，将调度该事件。该机制能够控制发送消息的位置；例如，若是 postMessage()用于传输密码，则该参数必须是URI，其来源与包含密码的消息的预期接收者相同，以防止恶意第三方拦截密码。始终提供具体的 targetOrigin，而不是 *，若是您知道其余窗口的文档应该位于何处。未能提供特定目标会泄露您发送给任何感兴趣的恶意站点的数据。

transfer（可选的）

是与消息一块儿传输的 Transferable 对象序列。这些对象的全部权将提供给目标端，而且它们在发送端再也不可用。

能够经过执行如下JavaScript来侦听已分派的消息：

window.addEventListener("message", msgHandler, false);
function msgHandler(event){
  if (event.origin !== "http://yourhost.com")    return;

  // ...
}复制代码

相关属性说明：

data

从另外一个窗口传递的对象。

origin

调用当时发送消息的窗口的原点 postMessage 。此字符串是协议和“：//”的串联，若是存在，则为主机名，若是存在端口，则“：”后跟端口号，而且与给定协议的默认端口不一样。典型起源的例子是 https://example.org （意味着端口为 443 ）， http://example.net （意味着端口为 80 ）和 http://example.com:8080 。请注意，此来源

不

保证是该窗口的当前或将来来源，该窗口可能已被导航到调用 postMessage后的其余位置。

source

对发送消息的 window对象的引用；你可使用它来创建两个不一样来源的窗口之间的双向通讯。

问题解决：

那么，在a页面中，能够经过下面代码发送消息：

window.parent.postMessage('isClosed', 'http://yourhost.com');复制代码

在b页面中，经过下面代码便可接收到消息：

window.addEventListener('message', msgHandler, false);复制代码

relevant  and important

安全问题部分

若是您不但愿从其余站点接收消息，请不要为message事件添加任何事件侦听器。这是避免安全问题的彻底万无一失的方法。

若是您确实但愿从其余站点接收消息，则请始终使用origin和可能的source属性验证发件人的身份。任何窗口（例如，包括http://evil.example.com）均可以向任何其余窗口发送消息，而且您没法保证未知发件人不会发送恶意消息。可是，在验证了身份后，您仍应始终验证收到的消息的语法。不然，您信任的站点中的安全漏洞只能发送受信任的消息，而后能够在站点中打开跨站点脚本漏洞。

在postMessage用于将数据发送到其余窗口时，始终指定精确的目标原点，而不是*。恶意站点能够在您不知情的状况下更改窗口的位置，所以它能够拦截使用postMessage发送的数据。

在扩展中使用window.postMessage

window.postMessage可用于在chrome代码中运行的JavaScript（例如，在扩展和特权代码中），但调度事件的source属性始终为null，以此做为安全限制。（其余属性具备预期值。）

内容或Web上下文脚本没法指定targetOrigin直接与扩展（后台脚本或内容脚本）通讯。Web或内容的脚本可使用带有"*"的targetOrigin的window.postMessage与来广播到每个侦听器，可是不鼓励这样作，由于扩展不能肯定这样的消息，和其余侦听器（包括那些你不控制的侦听器）能够侦听。

内容脚本应使用runtime.sendMessage与后台脚本进行通讯。Web上下文脚本可使用自定义事件与内容脚本进行通讯（若是须要，能够随机生成事件名称，以防止从客户页面进行窥探）。

最后，将消息发布到file:URL处的页面，当前要求targetOrigin参数为"*"。file://不能用做安全限制；此限制可能会在未来修改。