为什么会有跨域问题?
我想大家开始也会存在疑问:为什么会有跨域问题呢?它到底有什么作用呢?它又是什么所导致的呢?
首先是浏览器的同源策略导致的跨域问题,这里同源策略又分为以下两种:
1、DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
2、XMLHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
注解:只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。
这时又有疑问了:为什么要有同源策略呢?即然是同源策略导致的跨域,那么为什么就一定要有同源策略呢?其实,这主要是基于安全的考虑。
相信很多人都知道CSRF(跨站请求伪造)攻击。而AJAX同源策略就是用来防止CSRF的,因为我们平时发起的每一次HTTP请求都会带上请求地址对应的cookie,所以就可以做如下攻击:
1、用户登录了自己的银行页面mybank.com,mybank.com向用户的cookie中添加用户标识。
2、用户浏览了恶意页面evil.com/index.jsp。执行了页面中的恶意AJAX请求代码。
3、evil.com/index.jsp向mybank.com发起AJAX HTTP请求,请求会默认把mybank.com对应cookie也同时发送过去。
4、银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。
5、而且由于Ajax在后台执行,用户无法感知这一过程。
DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:
1、做一个假网站,里面用iframe嵌套一个银行网站mybank.com。
2、把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何区别。
3、这时如果用户输入账户密码,我们的主网站可以跨域访问到mybank.com的dom节点,
就可以拿到用户的输入了,那么就完成了一次攻击。
因此,有了跨域限制之后,我们才能更安全的上网了。
跨域的解决方式
这里主要讲的是跨域资源共享、jsonp实现跨域、服务器代理三种方式,另外我也有看到说将浏览器以不安全启动的方式也可以实现跨域,但感觉这种方式没有什么实际的意义,不过知道有这样一种方式就好了。
跨域资源共享(CORS)
“跨域资源共享”(Cross-origin resource sharing)。对于这个方式,阮一峰老师总结的文章比较好,可以深入去了解一下跨域资源共享CORS详解。
1、对于客户端,我们还是正常使用xhr对象发送ajax请求。
唯一需要注意的是,我们需要设置我们的xhr属性withCredentials为true,不然的话,cookie是带不过去的哦,设置:xhr.withCredentials = true;
2、对于服务器,需要在response.header中设置如下两个字段:
Access-Control-Allow-Origin:yourhost.com
Access-Control-Allow-Credentials:true
这样,我们就可以跨域请求接口了。
JSONP实现跨域
基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
// 定义一个fun函数
function fun(fata) {
console.log(data);
};
// 创建一个脚本,并且告诉后端回调函数名叫fun
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=fun';
body.appendChild(script);
返回的js脚本,直接会执行。所以就执行了事先定义好的fun函数了,并且把数据传入了进来。
fun({"name":"name"})
当然,这个只是一个原理演示,实际情况下,我们需要动态创建这个fun函数,并且在数据返回的时候销毁它。
因为在实际使用的时候,我们用的各种ajax库,基本都包含了jsonp的封装,不过我们还是要知道一下原理,不然就不知道为什么jsonp不能发post请求了。
服务器代理
//a页面的代码
<script type="text/javascript">
iframe = document.createElement('iframe');
iframe.style.display = 'none';
var state = 0;
iframe.onload = function() {
if(state === 1) {
var data = iframe.contentWindow.name;
console.log(data);
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
} else if(state === 0) {
state = 1;
iframe.contentWindow.location =
'http://m.zhuanzhuan.58.com:8887/b.html';
}
};
document.body.appendChild(iframe);
</script>
//b页面代码
<script type="text/javascript">
window.name = "hello";
</script>
使用postMessage实现页面之间通信
信息传递除了客户端与服务器之前的传递,还存在以下几个问题:
- 页面和新开的窗口的数据交互。
- 多窗口之间的数据交互。
- 页面与所嵌套的iframe之间的信息传递。
window.postMessage是一个HTML5的api,允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了,具体可以参照MDN。
补充: 其实还有一些方法,比如window.name和location.hash。就很适用于iframe的跨域,不过iframe用的比较少了,所以这些方法也就有点过时了。
这些就是我对跨域的了解了,实际情况下,一般用cors,jsonp等常见方法就可以了。不过遇到了一些非常规情况,我们还是需要知道有更多的方法可以选择的