iframe跨域通讯方案

概述

JavaScript出于安全方面的考虑，不容许跨域调用其余页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了很多麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是由于JavaScript同源策略的限制，a.com 域名下的js没法操做b.com或是c.a.com域名下的对象。更详细的说明能够看下表：

 

对于主域相同子域不一样的通讯方法这里不一一列举了，这里主要讲解一下跨主域的通讯问题。

postMessage方法

window.postMessage 是一个用于安全的使用跨源通讯的方法。一般，不一样页面上的脚本只在这种状况下被容许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（一般都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。 在正确使用的状况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

兼容性

http://caniuse.com/#search=postMessage

具体用法

• 发送消息：destination.postMessage(message, targetOrigin);
  • destination: 目标窗口
  • message:发送的消息
  • targetOrigin: 定义发送消息的范围
• 监听接受消息：window.addEventListener(‘message’,callback,false);

已知问题

1. 部分版本IE8/9浏览器只支持iframe通讯，不支持tabs之间通讯。
2. IE8/9不能传输对象，只能传输string。

参考资料

• mozlia官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window.postMessage
• IE官方文档:https://status.modern.ie/postmessage
• webplatform文档:https://docs.webplatform.org/wiki/apis/web-messaging/MessagePort/postMessage
• HTML5官方文档:https://html.spec.whatwg.org/multipage/comms.html#web-messaging

window.navigator(适用于ie6/7)

ie6/7有个漏洞,父窗口与全部的iframe共享window.navigator对象，能够利用这个漏洞，因为ie6/7不支持postMessage,因此能够利用这个漏洞对ie6/7作兼容跨域通讯支持。

具体用法

途中A过程和B过程都是初始化监听事件，相似于onmessage事件。只不过实现方法不同而已。

按执行顺序来描述的话，以下：

• B: 父窗口向window.navigator添加一个监听函数，并打上父窗口的戳。
• A: 子窗口向window.navigator添加一个监听函数，并打上子窗口的戳。

• C: 父窗口执行post的时候，调用原先子窗口添加在navigator里的监听函数，并将要传输的数据做为函数参数传入。
• D: 子窗口执行post的时候，调用原先父窗口添加在navigator里的监听函数，并将要传输的数据做为函数参数传入。

注意：子窗口和父窗口要找到对方的监听函数必须得事先知道对方在添加监听函数的时候打上的戳