【前端知识点】跨域之跨域window.postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个  MessageEvent 消息。 该MessageEvent消息有四个属性需要注意： message 属性表示该message 的类型； data 属性为 window.postMessage 的第一个参数；origin 属性表示调用window.postMessage() 方法时调用页面的当前状态； source 属性记录调用 window.postMessage() 方法的窗口信息。

语法Edit

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

otherWindow

其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

message

将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]

targetOrigin

通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

transfer 可选

是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

注意: 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前， 参数 message 必须是一个字符串。 从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始，参数 message被使用结构化克隆算法进行序列化。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而不必自己序列化它们。

Gecko 8.0 note

(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)

Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)引入了在窗口之间发送File 和 FileList 对象的支持。出于安全原因，仅当收件人的主体包含在发件人的主体中时，才允许此操作。

The dispatched eventEdit

执行如下代码, 其他window可以监听派遣的message:

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 的属性有:

data

从其他 window 中传递过来的对象。

origin

调用 postMessage  时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (implying port 443)”、“http://example.net (implying port 80)”、“http://example.com:8080”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。

source

对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。

注意: 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前， 参数 message 必须是一个字符串。 从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始，参数 message被使用结构化克隆算法进行序列化。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而不必自己序列化它们。

安全问题Edit

如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。

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

当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。 恶意网站可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。

示例Edit

/* * 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 calledfunction 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);

注意

任何窗口可以在任何其他窗口访问此方法，在任何时间，无论文档在窗口中的位置，向其发送消息。 因此，用于接收消息的任何事件监听器必须首先使用origin和source属性来检查消息的发送者的身份。 这不能低估：无法检查origin和source属性会导致跨站点脚本攻击。

与任何异步调度的脚本（超时，用户生成的事件）一样，postMessage的调用者不可能检测到侦听由postMessage发送的事件的事件处理程序何时抛出异常。

分派事件的origin属性的值不受调用窗口中document.domain的当前值的影响。

仅对于IDN主机名，origin属性的值不是始终为Unicode或punycode; 在使用此属性时，如果您期望来自IDN网站的消息，则最大程度地兼容性检查IDN和punycode值。 这个值最终将始终是IDN，但现在你应该同时处理IDN和punycode表单。

当发送窗口包含javascript：或data：URL时，origin属性的值是加载URL的脚本的

在扩展中使用window.postMessage

window.postMessage可用于以chrome代码运行的JavaScript（例如，在扩展和特权代码中），但是分派事件的source属性总是为空作为安全限制。 （其他属性具有其期望值。）发送到位于chrome：URL的窗口的消息的targetOrigin参数当前被错误解释，使得将导致发送消息的唯一值为“*”。 由于此值是不安全的，当目标窗口可以导航到其他地方的恶意网站，建议postMessage不用于与chrome：页面的沟通; 使用不同的方法（如打开窗口时的查询字符串）与chrome窗口进行通信。 最后，在文件中向页面发布消息：URL当前要求targetOrigin参数为“*”。 file://不能用作安全限制; 这个限制可能会在将来被修改。

规范Edit

规范状态注释HTML Living Standard
window.postMessageLiving StandardNo change from HTML5 Web MessagingHTML5 Web Messaging
window.postMessageRecommendationInitial definition.

浏览器兼容性Edit

• Desktop 
• Mobile

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Basic support1.06.0 (6.0)[1]
8.0 (8.0)[2]8.0[3]
10.0[4]9.54.0transfer argument?20.0 (20.0)未实现??

[1] 在 Gecko 6.0 之前 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)， message 参数必须是一个字符串。从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 开始，信息参数使用 结构化克隆算法 进行序列化。这意味着您可以将各种各样的数据对象安全地传递到目标窗口而无须自行序列化。

[2] Gecko 8.0 引入了对 File 和 FileList 对象进行传送的支持。 出于安全考虑，这个特性仅在消息接收者被发送者包含时生效。

[3] IE8 和 IE9 仅支持 <frame> 和 <iframe> 之间的通信。

[4] IE10 有重要的限制：详见本文.

参见Edit

• document.domain
• CustomEvent
• Interaction between privileged and non-privileged pages