跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

4. [HTML5] postMessage

问题:

对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊。
此文仅使用html5的新特性postMessage,演示其执行过程和效果:

方法解释:
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数:
1.data:你需要传递的消息,消息传递的格式有一定要求:参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以建议直接传递string类型参数。json格式使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:该参数指明目标窗口的源。postMessage()方法只会将message传递给指定窗口,也可以设置为"*",表示可以传递给任意窗口。

原理:

1.我的页面是parent.html,接收我发送的消息并按照要求返回消息的页面是child.html;

2.两个页面放在同一个文件夹内;

3.parent.html发送postMessage消息给child.html,child.html收到消息后通过source.postMessage返回所需信息!

具体过程如下:

我的页面是parent.html:

跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))
<html>
<div>
<iframe id="child" src="./child.html"></iframe>
</div>
<script type="text/javascript">
window.addEventListener('message',function(e){
alert("msg from child:" + e.data);
});
window.onload=function(){//页面加载完即向iframe发送消息
//var tmp = document.getElementById("child");
//tmp.postMessage('hello babi','*'); //此处tmp没有postMessage方法,类型错误。
//alert(tmp); //这是object HTMLIFrameElement类型
//alert(window.frames[0]); //这是object Window类型
//以上方式不可行,只有window类型才能调用postMessage方法!
window.frames[0].postMessage('hello babi','*');
}
</script>
</html>
跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

中间的文字全都来自child.html!

我们看看接收消息页面child.html:

parent页面向child页面发送了消息,那么在child页面上如何接收消息呢,监听window的message事件就可以

跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))
<html>
<p id="ll1">I'm child</p>
<p id="ll2">I'm child</p>
<p id="ll3">I'm child</p>
<p id="ll4">I'm child</p>
<script type="text/javascript">
window.addEventListener('message',function(e){//接收信息后返回信息!
alert("msg from parent:" + e.data);
e.source.postMessage('Hello papi', "*");
});
</script>
</html>
跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

这样我们就可以接收任何窗口传递来的消息了!

我们运行一下:

跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

这样就实现了跨域、跨窗口消息传递

服务器端的跨域方法

一、反向代理服务器

基础思想很简单,将你的服务器配置成 需要跨域获取的资源的 反向代理服务器。

也就是说,将其他域名的资源映射到你自己的域名之下,这样浏览器就认为他们是同源的。

用大家钟爱的 Apache2 来举个例子:

首先启用两个模块 proxy 和 proxy_http 来开启代理功能:

sudo a2enmod proxy
sudo a2enmod proxy_http

然后在配置文件里面写入:

ProxyPass "/foo" "http://foo.example.com/bar"
ProxyPassReverse "/foo" "http://foo.example.com/bar"
  • ProxyPass: 远程服务器在本地服务器的映射。(上面的例子将 http://foo.example.com/bar 映射为 /foo

  • ProxyPassReverse: 配置 Apache2 在 HTTP 跳转时调整 LocationContent-Location 和 URI headers 的值,防止反向代理被绕开。

重启 Apache2:

sudo service apache2 restart

大功告成,这样我们请求 /foo 就会得到 http://foo.example.com/bar 的内容了。

这种方法其实不太常用,机智的读者就会发现,每一个资源都要到自己的服务器配置,每次配置都还要重启。

二、CORS

Cross-Origin Resource Sharing 是 W3C 推出的一种跨站资源获取的机制。

首先我们来看一下浏览器的支持情况:

Chrome Firefox (Gecko) Internet Explorer Opera Safari
4 3.5 8 & 9(XDomainRequest), 10 12 4

移动端的浏览器对这种方法的支持比较完善。现在我们看到了,如果不需要兼容 IE6、7的话,就可以使用这种方法。


这种跨域方案主要的思想是:服务器 在响应头中设置相应的选项,浏览器如果支持这种方法的话就会将这种跨站资源请求视为合法,进而获取资源。

可以设置的响应头信息:

Access-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> | *

origin: 被允许跨域访问这个资源的网站,* 代表全部网站。浏览器会检测这个参数,如果符合要求,才会去获取资源。

举个例子,允许 http://jasonkid.github.io/fezone 来跨域访问这个资源:

Access-Control-Allow-Origin: http://jasonkid.github.io/fezone

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials: true | false

表示是否允许浏览器携带 Cookie 来访问这个资源。
这个属性要和 XMLHttpRequest 的 withCredentials 属性来配合使用。

var xhr = new XMLHttpRequest();
var url = 'http://foo.other/resources/credentialed-content/'; if(xhr) {
xhr.open('GET', url, true);
xhr.withCredentials = true; // 设置带有 Cookie 的资源请求
xhr.onreadystatechange = handler;
xhr.send();
}

能够成功使用带有 Cookie 的资源请求需要满足以下几个条件:

  • XMLHttpRequest 对象中指定了 withCredentials = true

  • 服务器响应头中 Access-Control-Allow-Credentials: true

  • 服务器响应头中 Access-Control-Allow-Origin 不能为 *


以下选项主要是安全性配置的问题,主要是服务器的配置问题了,就不展开介绍了:

  • Access-Control-Expose-Headers

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

上一篇:mat(Eclipse Memory Analyzer tool)之二--heap dump分析


下一篇:Github项目推荐-图神经网络(GNN)相关资源大列表