postMessage有哪些使用场景.md

window.postMessage定义

window.postMessage() 方法可以安全地实现跨源通信。window.postMessage()方法提供了一种受机制来规避此限制，只要正确使用，这种方法就很安全。

用途

可用于两个不同的Ifrom不同源之间的通讯

语法：

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

参数说明

• data

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

• origin

调用postMessage时消息发送窗口的 origin 这个字符串由 协议， "://"，域名，":域名号"拼接而成。

• source

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

子框架传递消息

<script> // 子框架向父框架发送信息 function goParentIfromPostMessage(msg,parentUrl){ var parentUrl = window.parent.location.origin; window.onload=function(){ window.parent.postMessage(msg,parentUrl); } } } goParentIfromPostMessage('msgStr',parentIfromUrl) </script>

父框架接收端

<script> window.addEventListener('message',function(e){ console.log(e.origin,e.data); console.log(e.data); }) </script>

这样即可以实现简单的框架跨域通信，但是会有一些安全问题

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

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

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

示例

/*
 * A窗口的域名是<http://example.com:8080>，以下是A窗口的script标签下的代码：
 */

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

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变location（因为targetOrigin设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是我们通过window.open打开的弹出页面 popup
  // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
/*
 * 弹出页 popup 域名是<http://example.org>，以下是script标签中的代码:
 */

//当A页面postMessage被调用后，这个function被addEventListener调用
function receiveMessage(event)
{
  // 我们能信任信息来源吗？
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source 就当前弹出页的来源页面
  // event.data 是 "hello there!"

  // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把event.source
  // 作为回信的对象，并且把event.origin作为targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

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