window方法:postMessage()
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 | ? | ? |