跨域傳輸信息postMessage

widnow.postMessage()方法容許安全的跨域傳輸。

Syntax

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

指向另外一個窗口的引用：。

message

傳輸給另外一個窗口的信息

targetOrigin

一個字符串，指定消息來源（URL形式）。記住老是提供一個特定的URL地址若是你知道的話，不要老是使用「*」（針對全部的URL），由於指定一個特定的URL能夠防止惡意的網站來攻擊。

The dispatched event

其餘的窗口能夠經過如下代碼來監聽被髮送的信息：

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

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

  // ...
}

被髮送的信息的屬性以下：

data

從其餘窗口傳遞的data

origin

當postMessage調用的時候，發送信息窗口的origin。這個字符串是協議和"://"和主機名和後面用":"鏈接了一個接口名稱，若是這個接口名和默認的接口名不同的話。好比http://example.org(默認的接口是443),http://example.net(默認的接口是80)和http://example.com:8080。注意，這個origin並不必定要是當前亦或將來的那個窗口的origin，因此這將有可能當調用postMessage的時候，致使跳轉到另外一個徹底不一樣的地址。

source

發送信息的window對象。你可使用這個在不一樣origin之間在兩個窗口之間創建兩個通訊。

Security concerns

若是你不想接受到其餘網站的信息，不要在message對象上增長任何監聽。

使用origin（有可能也會使用source）屬性來肯定發送者的身份，若是你不想接受到其餘網站的信息的話。

任何的window（包括，例如http://evil.example.com）能夠向任何的其餘window發送信息，你沒有任何的保障來保證未知的發送者不會發送惡意的信息。確保了發送信息者的身份以後，你還須要確驗證接收到的內容的語法。不然，發送信任信息的受信網站可能在你的網站上建立一個跨域的腳本漏洞。

不要使用「*」，而是肯定的目標origin，當你使用postMessage來發送信息給其餘的windows的時候，防止其餘網站在你postMessage的時候攔截髮送的信息。

Example

/*
 * In window A's scripts, with A being on <http://example.com:8080>:
 */

var popup = window.open(...popup details...);

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org")
    return;

  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
/*
 * In the popup's scripts, running on <http://example.org>:
 */

// Called sometime after postMessage is called
function receiveMessage(event)
{
  // Do we trust the sender of this message?
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source is window.opener
  // event.data is "hello there!"

  // Assuming you've verified the origin of the received message (which
  // you must do in any case), a convenient idiom for replying to a
  // message is to call postMessage on event.source and provide
  // event.origin as the targetOrigin.
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

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

 

Notes

任何window能夠在任何其餘的window上使用這個方法，在任何的時候，無論當前頁面在window中的location，來發送信息。

因此，任何的對象監聽被使用來接受信息時必須先檢查信息發送着的身份，使用origin和可能使用的屬性source來判斷。

這個必須再三聲明：不檢查origin和source可能會致使跨站點腳本攻擊。

和任何的異步執行的腳本（timeout,用戶生成的腳本），調用postMessage來監聽什麼時候事件處理函數監聽postMessage發送的事件對象是不可能的，將會拋出錯誤。

發送對象的origin屬性是不會受到當前在調用窗口的document.domain值的影響。

 

For IDN host names only, the value of the origin property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.

The value of the origin property when the sending window contains a javascript: or data:URL is the origin of the script that loaded the URL.

Using window.postMessage in extensions 

window.postMessage is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source property of the dispatched event is always null as a security restriction. (The other properties have their expected values.) The targetOrigin argument for a message sent to a window located at a chrome: URL is currently misinterpreted such that the only value which will result in a message being sent is "*". Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended thatpostMessage not be used to communicate with chrome: pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a file: URL currently requires that the targetOriginargument be "*". file:// cannot be used as a security restriction; this restriction may be modified in the future.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	6.0 (6.0)[1] 8.0 (8.0)[2]	8.0[3] 10.0[4]	9.5	4.0
transferargument	?	20.0 (20.0)	Not supported	?	?

 

[1] Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the message parameter must be a string. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), themessage parameter is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.

[2] Gecko 8.0 introduced support for sending File and FileList objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.

[3] IE8 and IE9 only support it for <frame> and <iframe>.

[4] IE10 has important limitations: see this article for details.