window.postMessage安全地实现跨源通信

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

从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener),然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。接收消息的窗口可以根据需要*处理此事件 (en-US)。传递给 window.postMessage() 的参数(比如 message )将通过消息事件对象暴露给接收消息的窗口

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

例如:vue项目中,调用iframe子网页中的方法 和在iframe子页面中调用vue父页面中的方法。

父页面代码:

<body>
<h1>我是父页面</h1>
<iframe src="http://127.0.0.1:5050" frameborder="0" style="height: 100%;width: 100%"></iframe>
<script>
function fatherFunction() {
alert('我是父页面中的方法!')
}
window.addEventListener('message', function(e){
console.log(e) //{data:'params'}
fatherFunction()
})
</script>
</body>

子页面代码:

<template>
<div class="weather-app" :class="currentWeatherBG">
<button @click="test">我是子页面按钮,点击调用父页面方法</button>
</div>
</template>
<script>
export default {
methods: {
test() {
window.parent.postMessage({
data :"params"
},'*');
},
}
}
</script>


可以看到,这里关键是子页面通过postMessage方法实现的通信,postMessage的使用方法为:

otherWindow.postMessage(message, targetOrigin, [transfer]);
message为需要传递的信息,
targetOrigin为指定哪些窗口能接收到消息事件,可以为’*’,但是这样很不安全,建议根据实际项目精确匹配。

而父页面则只需要添加事件监听器,在回调中执行需要执行方法或者使用参数。

window.addEventListener('message', function(e){
console.log(e) //{data:'params'}
fatherFunction()
})

上一篇:html5 postMessage解决跨域、跨窗口消息传递


下一篇:iframe 使用注意事项