web跨域解决方案

围绕以下几点介绍:

  • 什么是跨域?
  • 常用的几种跨域处理方法?
  • crossdomain.xml解决跨域问题

什么是跨域

在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。
这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。
根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;

甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。

对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。

为什么浏览器要实现同源限制?

比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过javascript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了.

又比如你登录了OSC,同时浏览了恶意网站,如果没有同源限制,该恶意 网站就可以构造AJAX请求频繁在OSC发广告帖.

常用的几种跨域处理方法:

1、JSONP

JSONP的不足之处:

  1、只能使用get方法,不能使用post方法:
  我们知道 script,link, img 等等标签引入外部资源,都是 get 请求的,那么就决定了 jsonp 一定是 get 的。
       但有时候我们使用的 post 请求也成功,为啥呢?这是因为当我们指定dataType:'jsonp',
不论你指定:type:"post" 或者type:"get",其实质上进行的都是 get 请求!

  2、没有关于 JSONP 调用的错误处理。
       如果动态脚本插入有效,就执行调用;
       如果无效,就静默失败。
       失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。

不过,等待一段时间还没有响应的话,就不用理它了。

2、CORS策略


image.png
CORS原理: 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。
浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。

只要服务器实现了CORS接口,就可以跨源通信。

3、document.domain+iframe的设置

4、HTML5的postMessage

5、使用window.name来进行跨域

6、 crossdomain.xml

crossdomain.xml解决跨域问题

在跨域的网站根目录放crossdomain.xml文件,下面是允许所有的网站(一般不采取这样的方式,我只是方便调试)均可以跨越访问资源配置如下:

<cross-domain-policy>
<allow-access-from domain="" />
<allow-http-request-headers-from domain="
" headers="*"/>
</cross-domain-policy>

我们看看淘宝的crossdomain.xml,直接在浏览器上输入:https://www.taobao.com/crossdomain.xml即可得到如下配置。

<cross-domain-policy>
<allow-access-from domain="*.taobao.com"/>
<allow-access-from domain="*.taobao.net"/>
<allow-access-from domain="*.taobaocdn.com"/>
<allow-access-from domain="*.tbcdn.cn"/>
<allow-access-from domain="*.alicdn.com"/>
</cross-domain-policy>

crossdomain.xml 该文件为安全策略文件,使用时需放置在网站根目录下。

作用

是定义该域名下面的xml文件,json文件,m3u8文件是否允许其它网站的flashplayer来访问。这个文件是格式是由adobe公司制定的。

具体可设置的功能是允许所有网站访问或只允许指定的网站访问。

示例如下:

该格式作用是允许所有网站的flashplayer访问本站的xml,json,m3u8文件

<?xml version="1.0" encoding="utf-8"?>
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>

该格式是只允许ckplayer.com(包括所有二级域名)和ckvcms.com(包括所有二级域名)的flashplayer访问本站的xml,json,m3u8文件

<?xml version="1.0" encoding="utf-8"?>
<cross-domain-policy>
<allow-access-from domain=".ckplayer.com"/>
<allow-access-from domain="
.ckvcms.com"/>
</cross-domain-policy>