浅析跨域请求

本文最后更新于:2022年6月25日 凌晨

前言

最近做项目的时候遇到了一些跨域问题,虽然网上对于跨域的问题分享还挺多的。不过当我实际遇到的时候还是有点懵。趁项目刚上线完,写篇文章总结下。

造成跨域的原因

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种

  • DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。
  • XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

为什么要有跨域限制

了解完跨域之后,想必大家都会有这么一个思考,为什么要有跨域的限制,浏览器这么做是出于何种原因呢。其实仔细想一想就会明白,跨域限制主要是为了安全考虑。

AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:

  1. 用户登录了自己的银行页面 http://mybank.comhttp://mybank.com向用户的cookie中添加用户标识。
  2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
  3. http://evil.comhttp://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。
  4. 银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。
  5. 而且由于Ajax在后台执行,用户无法感知这一过程。

DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:

  1. 做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com
  2. 把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。
  3. 这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.com的dom节点,就可以拿到用户的输入了,那么就完成了一次攻击。

所以说有了跨域跨域限制之后,我们才能更安全的上网了。

跨域的解决方式

跨域资源共享(CORS)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。
对于这个方式,阮一峰老师总结的文章特别好,希望深入了解的可以看一下http://www.ruanyifeng.com/blog/2016/04/cors.html

通过在HTTP Header中加入扩展字段,服务器在相应网页头部加入字段表示允许访问的domain和HTTP method,客户端检查自己的域是否在允许列表中,决定是否处理响应。

实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

服务器端在HTTP的响应头中加入(页面层次的控制模式):

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin

Access-Control-Expose-Headers: Content-Range

Access-Control-Max-Age: 3600

多个域名之间用逗号分隔,表示对所示域名提供跨域访问权限。”*”表示允许所有域名的跨域访问。

客户端可以有两种行为:

  1. 发送OPTIONS请求,请求Access-Control信息。如果自己的域名在允许的访问列表中,则发送真正的请求,否则放弃请求发送。

  2. 直接发送请求,然后检查response的Access-Control信息,如果自己的域名在允许的访问列表中,则读取response body,否则放弃。

本质上服务端的response内容已经到达本地,JavaScript决定是否要去读取。

这里我就简单的说一说大体流程。

  1. 对于客户端,我们还是正常使用xhr对象发送ajax请求。
    唯一需要注意的是,我们需要设置我们的xhr属性withCredentials为true,不然的话,cookie是带不过去的哦,设置: xhr.withCredentials = true;
  2. 对于服务器端,需要在 response header中设置如下两个字段:
    Access-Control-Allow-Origin: http://www.yourhost.com
    Access-Control-Allow-Credentials:true
    这样,我们就可以跨域请求接口了。

在django的实际项目中,跨域用CORS技术构建一个中间件,来解决跨域问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class CORSMiddleware(MiddlewareMixin):

def process_response(self, request, response):
"""
解决跨域问题
:param request:
:param response:
:return:
"""
# 添加响应头

# 允许你的域名来获取我的数据
response['Access-Control-Allow-Origin'] = "*"

# 允许你携带Content-Type请求头
# response['Access-Control-Allow-Headers'] = "Content-Type"

# 允许你发送DELETE,PUT
# response['Access-Control-Allow-Methods'] = "DELETE,PUT"

return response

jsonp实现跨域

基本原理就是通过动态创建script标签,然后利用src属性进行跨域。
这么说比较模糊,我们来看个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
//定义一个fun函数
function fun(data) {
console.log(data);
}

// 创建一个脚本,并且告诉后端回调函数名叫fun
var body= document.getElementsByTagName('body')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'demo.js?callback=fun';
body.appendChild(script);
</script>

返回的js脚本,直接会执行。所以就执行了事先定义好的fun函数了,并且把数据传入了进来。

1
fun({"name":"name"})

当然,这个只是一个原理演示,实际情况下,我们需要动态创建这个fun函数,并且在数据返回的时候销毁它。

因为在实际使用的时候,我们用的各种ajax库,基本都包含了jsonp的封装,不过我们还是要知道一下原理,不然就不知道为什么jsonp不能发post请求了~

服务器代理

浏览器有跨域限制,但是服务器不存在跨域问题,所以可以由服务器请求所要域的资源再返回给客户端。

服务器代理是万能的。

document.domain来跨子域

对于主域名相同,而子域名不同的情况,可以使用document.domain来跨域
这种方式非常适用于iframe跨域的情况,直接看例子吧
比如a页面地址为 a.yourhost.com b页面为 b.yourhost.com
这样就可以通过分别给两个页面设置 document.domain = yourhost.com 来实现跨域。
之后,就可以通过 parent 或者 window[‘iframename’]等方式去拿到iframe的window对象了。

使用window.name进行跨域

window.name跨域同样是受到同源策略限制,父框架和子框架的src必须指向统一域名。window.name的优势在于,name的值在不同的页面(或者不同的域名),加载后仍然存在,除非你显示的更改。并且支持的长度达到2M.

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//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>
1
2
3
4
//b页面代码
<script type="text/javascript">
window.name = "hello";
</script>

window.location.hash跨域

location.hash方式跨域,是子框架具有修改父框架src的hash值,通过这个属性进行传递数据,且更改hash值,页面不会刷新。但是传递的数据的字节数是有限的。

注意:父子框架受同源策略的限制

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//a页面的代码
<script type="text/javascript">
iframe = document.createElement('iframe');
iframe.style.display = 'none';
var state = 0;

iframe.onload = function() {
if(state === 1) {
var data = window.location.hash;
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">
parent.location.hash = "world";
</script>

window.top

window.top方法可以访问最顶层的window对象,可以取到最顶层window对象的属性和方法。这样子框架就可以操作父页面的交互了。window.parent可以得到父框架的window对象。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//a页面代码
<script type="text/javascript">
function funa(){
console.log("a页面的方法");
}
iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'http://m.zhuanzhuan.58.com:8887/b.html';
document.body.appendChild(iframe);
</script>
//b页面的代码
<script type="text/javascript">
console.log(window.top.funa());
function funb(){
console.log("b页面的方法");
}
iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'http://m.zhuanzhuan.58.com:8887/c.html';
document.body.appendChild(iframe);
</script>
//c页面的代码
<script type="text/javascript">
console.log(window.parent.funb());
</script>

使用postMessage实现页面之间通信

信息传递除了客户端与服务器之前的传递,还存在以下几个问题:

  • 页面和新开的窗口的数据交互。
  • 多窗口之间的数据交互。
  • 页面与所嵌套的iframe之间的信息传递。

window.postMessage是一个HTML5的api,允许两个窗口之间进行跨域发送消息。这个应该就是以后解决dom跨域通用方法了,具体可以参照MDN。

补充: 其实还有一些方法,比如window.name和location.hash。就很适用于iframe的跨域,不过iframe用的比较少了,所以这些方法也就有点过时了。

这些就是我对跨域的了解了,实际情况下,一般用cors,jsonp等常见方法就可以了。不过遇到了一些非常规情况,我们还是需要知道有更多的方法可以选择的


浅析跨域请求
https://yance.wiki/2018/08/13/跨域/
作者
Yance Huang
发布于
2018年8月13日
许可协议