學習postMessage

前言

本文主要介紹postMessgae的基本使用，它主要用來解決跨域的頁面通信，固然你能夠用來做爲跨頁面的常規方案。

基本使用

發送方

otherWindow.postMessage(message, targetOrigin, [transfer]); 備註：Transferable 接口表明一個能在不一樣可執行上下文中相互傳遞的對象，列如主線程和 Worker 間。咱們通常只須要知道前面兩個傳參就能夠了。

window.postMessage() 方法被調用時，會在全部頁面腳本執行完畢以後（e.g., 在該方法以後設置的事件、以前設置的timeout 事件,etc.）向目標窗口派發一個 MessageEvent 消息。 該MessageEvent消息有四個屬性須要注意： message 屬性表示該message 的類型； data 屬性爲 window.postMessage 的第一個參數；origin 屬性表示調用window.postMessage() 方法時調用頁面的當前狀態； source 屬性記錄調用 window.postMessage() 方法的窗口信息。

var message='hello world ';
var target='*'
var transfer=[]
window.postMessage('hello',target,transfer)
複製代碼

監聽方

通常用來收取發送的信息，message 的屬性有:

• data 從其餘 window 中傳遞過來的對象。
• origin 調用 postMessage 時消息發送方窗口的 origin . 這個字符串由 協議、「://「、域名、「 : 端口號」拼接而成。例如 「https://example.org (隱含端口 443)」、「http://example.net (隱含端口 80)」、「http://example.com:8080」。請注意，這個origin不能保證是該窗口的當前或將來origin，由於postMessage被調用後可能被導航到不一樣的位置。
• source 對發送消息的窗口對象的引用; 您可使用此來在具備不一樣origin的兩個窗口之間創建雙向通訊。

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  var origin = event.origin || event.originalEvent.origin; 
  if (origin !== "http://example.org:8080")
    return;

  // ...
}
複製代碼

安全性

若是您不但願從其餘網站接收message，請不要爲message事件添加任何事件偵聽器。 這是一個徹底萬無一失的方式來避免安全問題。

若是您確實但願從其餘網站接收message，請始終使用origin和source屬性驗證發件人的身份。 任何窗口（包括例如http://evil.example.com）均可以向任何其餘窗口發送消息，而且您不能保證未知發件人不會發送惡意消息。 可是，驗證身份後，您仍然應該始終驗證接收到的消息的語法。 不然，您信任只發送受信任郵件的網站中的安全漏洞可能會在您的網站中打開跨網站腳本漏洞。

當您使用postMessage將數據發送到其餘窗口時，始終指定精確的目標origin，而不是*。 惡意網站能夠在您不知情的狀況下更改窗口的位置，所以它能夠攔截使用postMessage發送的數據。

兼容性

• pc：

  

• 手機

  

參考文檔

• mdn- postMessage
• postMessage-codepen案例