window方法:postMessage()

2018-09-03 19:05 更新

postMessage()方法

该window.postMessage()方法安全地启用Window对象之间的跨源通信;例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间。

通常,当且仅当它们源自的页面共享相同的协议、端口号和主机(也称为“同源策略”)时,允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规避这种限制(如果使用得当)。

从广义上讲,一个窗口可以获得对另一个窗口的引用(例如,可以使用targetWindow=window.opener),然后使用targetWindow.postMessage() 在其上发送一个MessageEvent。然后,接收窗口可根据需要自由处理此事件。传递给window.postMessage()的参数(即“message”)通过事件对象暴露给接收窗口。

postMessage()方法语法

targetWindow .postMessage(message,targetOrigin,[ transfer ]);
targetWindow
对将接收消息的窗口的引用。获得此类引用的方法包括:
  • Window.open (生成一个新窗口然后引用它),
  • Window.opener (引用产生这个的窗口),
  • HTMLIFrameElement.contentWindow<iframe>从其父窗口引用嵌入式),
  • Window.parent(从嵌入式内部引用父窗口<iframe>
  • Window.frames +索引值(命名或数字)。
message
要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着您可以将各种各样的数据对象安全地传递到目标窗口,而无需自己序列化。
targetOrigin
指定要调度的事件的targetWindow的原点,可以是文字字符串"*"(表示没有首选项),也可以是URI。如果在计划调度事件时,targetWindow文档的方案,主机名或端口与targetOrigin提供的内容不匹配,则不会调度该事件;只有当所有的三个条件都匹配时,将调度该事件。该机制可以控制发送消息的位置;例如,如果postMessage()用于传输密码,则该参数必须是URI,其来源与包含密码的消息的预期接收者相同,以防止恶意第三方拦截密码。始终提供具体的targetOrigin,而不是*,如果您知道其他窗口的文档应该位于何处。未能提供特定目标会泄露您发送给任何感兴趣的恶意站点的数据。
transfer(可选的)
是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端,并且它们在发送端不再可用。

已调度的事件

otherWindow可以通过执行以下JavaScript来侦听已分派的消息:

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

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

调度消息的属性是:

data
从另一个窗口传递的对象。
origin
调用当时发送消息的窗口的原点postMessage。此字符串是协议和“://”的串联,如果存在,则为主机名,如果存在端口,则“:”后跟端口号,并且与给定协议的默认端口不同。典型起源的例子是https://example.org(意味着端口为443),http://example.net(意味着端口为80)和http://example.com:8080。请注意,此来源保证是该窗口的当前或未来来源,该窗口可能已被导航到调用postMessage后的其他位置。
source
对发送消息的window对象的引用;你可以使用它来建立两个不同来源的窗口之间的双向通信。

安全问题部分

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

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

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

postMessage()方法示例

/*
 * 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.com");

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.com")
    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.com>:
 */

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

笔记

无论窗口中文档的位置如何,任何窗口都可以在任何其他窗口上随时访问此方法,以向其发送消息。因此,用于接收消息的任何事件侦听器必须首先使用origin和可能的source属性检查消息发送者的身份。这不容小觑:未能检查origin和可能的source属性可以实现跨站点脚本攻击。

与任何异步调度的脚本(超时,用户生成的事件)一样,postMessage的调用者无法检测事件处理程序何时侦听通过postMessage抛出异常发送的事件。

postMessage()仅在所有挂起的执行上下文完成后才调度MessageEvent。例如,如果在事件处理程序中调用postMessage(),则该事件处理程序将在MessageEvent调度之前运行完成,同一事件的任何剩余处理程序也将运行。

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属性始终为null,以此作为安全限制。(其他属性具有预期值。)

内容或Web上下文脚本无法指定targetOrigin直接与扩展(后台脚本或内容脚本)通信。Web或内容的脚本可以使用带有"*"的targetOrigin的window.postMessage与来广播到每一个侦听器,但是不鼓励这样做,因为扩展不能确定这样的消息,和其他侦听器(包括那些你不控制的侦听器)可以侦听。

内容脚本应使用runtime.sendMessage与后台脚本进行通信。Web上下文脚本可以使用自定义事件与内容脚本进行通信(如果需要,可以随机生成事件名称,以防止从客户页面进行窥探)。

最后,将消息发布到file:URL处的页面,当前要求targetOrigin参数为"*"。file://不能用作安全限制;此限制可能会在将来修改。

规范

规范 状态 注释
HTML Living Standard 
规范中'postMessage()'的定义。
Living Standard
 

浏览器兼容性

新的兼容性表格处于测试阶段

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持:1 支持
支持:8

支持:10

支持:9.5 支持:4 支持 支持 支持
支持:8

支持 支持
transfer参数 支持 支持:20 支持 支持:20
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号