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裏的監聽函數，並將要傳輸的數據做爲函數參數傳入。

注意：子窗口和父窗口要找到對方的監聽函數必須得事先知道對方在添加監聽函數的時候打上的戳