浏览器跨域问题，top与iframe之间的通信问题

最新推荐文章于 2024-08-14 09:30:44 发布

iteye_9473

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/iteye_9473/article/details/82638256

版权

本文介绍了window.postMessage作为跨域通信工具的工作原理和安全使用注意事项。通过示例展示了如何在不同源的窗口间传递消息，以及在iframe中实现双向通信，特别强调了在设置targetOrigin时避免使用通配符'*'以防止潜在的安全风险。

摘要由CSDN通过智能技术生成

window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的 document.domain 的值相同）。在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

useage：


otherWindow.postMessage(message, targetOrigin);

otherWindow指定需要获得消息的窗体window，
message是字符串，指定要从当前窗体发送到otherWindow的消息，是字符串。targetOrigin指定otherWindow的来源（src）。想要被发送message的otherWindow的origin。可以是 '*'或者是uri ，如果搞错了，使得targetOrigin中的
协议，主机名，端口号与想要被发送message的窗体来源URI中的不一致，
那么这条消息不会被派遣到目标otherWindow内。所以别把协议等等搞错了。深层意思是会忽略路径！
只有都相同时指目标窗体otherWindow才会收到。这条指令告诉了我们在哪里发送消息，传输密码时一定要保证一致！不然会被第三方侦听。
[b]在你知道otherWindow的来源时，请提供一个特殊化的uri,不要使用‘*’，一但没有特殊化targetOrigin会使它被发往一些不坏好意的地方。[/b]
然后再在otherWindow里绑定onmessage事件，用来监听传来的message。
一旦监听到，会将一个对象传入onmessage的事件处理函数。由事件处理函数进行处理。该对象（设为a）有3个属性，a.data a.origin指在postMessage被调用时发送消息的对象otherWindow，包括协议，主机名，端口例子（http://www.baidu.com:8080;或者https://example.org 默认端口443，http://example.net默认端口80） a.source，指代发送message的window对象，（这是按照官方文档翻译的，但是有点不明白？照下面的例子它分明指的是消息来源所在的window。因为此时调用另一个window对于它是不可见的，因为同源策略）你可以用这个属性去建立两个不同源的window之间的双向通信，
其中a.data存储的是传来的message。
下面用例子实现双向通信。

http://bbs.example.com


js
function sendIt(){
		document.getElementById("otherPage").contentWindow.postMessage(document.getElementById("message").value, 
				"http://hui.example.com");
	}

		window.onmessage=function(e){
		document.getElementsByClassName('h')[0].innerHTML+=e.data+"<br>";
		setTimeout(function(){
				e.source.postMessage(document.getElementById("message").value,e.origin);
//获取发送message的源地址。
		},4000);
	}

html
<body>
	<iframe src="http://hui.example.com/TestHTML5/WebContent/other-domain.html" id="otherPage"></iframe>
	<br/><br/>
	<input type="text" id="message"><input type="button" value="Send to hui.example.com" onclick="sendIt()" />
</body>

http://hui.example.com


js

window.onmessage=function(event){

			document.getElementById("message").innerHTML+=event.data+"<br/>";

		event.source/*或者window.top*/.postMessage('hello',event.origin);
}
html
<body>
	Web page from http://hui.example.com
	<div id="message"></div>
	<input type="text" id="message"><input type="button" value="Send to child.com" onclick="postIt()" />
</body>

这样可以使两个不同域名间的window互发短消息。
但是先修改下host文件，使域名主机不同

以下举一个实际运用的列子。
一般网站为了缓解流量压力，会在全国各地部署cdn系统（CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。）一般存放图片，css，js等等，
但是有时cdn可能会出现问题，访问不上，用户无法查看到图片啊等等，那么我们怎么知道是哪个cdn出问题了呢？或者哪个ip的客户无法访问呢？答案就是利用浏览器跨域通信，
在cdn上放一个测试文件比如，test.html.然后在网站里插入一个iframe，一般本站的网址与这个测试文件是不同主机的（因为测试文件与缓存放在cdn上面），所以不同源，
现在在iframe里用postMessage发送一条消息到外部window。
外部window用一个dom元素，接受这条消息，在等待1s去获取这条消息，如果没有获取到，说明有延时。
假如，cdn有延时，不正常。