老生常谈的跨域处理

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

跨域的原理解析及实现方法

总结

摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。

什么是跨域

在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、如果是协议和端口造成的跨域问题“前台”是无能为力的

 2、在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。比如上面的,。虽然域名和域名的ip对应,不过还是被认为是跨域。

“URL的首部”指window.location.protocol +window.location.host。其中,

window.location.protocol:指含有URL第一部分的字符串,如http:

window.location.host:指包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/

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

1、JSONP

2、CORS策略

3、document.domain+iframe的设置

4、HTML5的postMessage

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

跨域的原理解析及实现方法

1、JSONP(JSON with padding)

原理 :

我们知道,在页面上有三种资源是可以与页面本身不同源的。它们是:js脚本,css样式文件,图片,像淘宝等大型网站,肯定会将这些静态资源放入cdn中,然后在页面上连接,如下所示,所以它们是可以链接访问到不同源的资源的。

1)<script type="text/javascript" src="https://www.jb51.net/某某cdn地址" ></script>

2)<link type="text/css" href="https://www.jb51.net/某个cdn地址" />

3)<img src="https://www.jb51.net/某个cdn地址" alt=""/>

而jsonp就是利用了script标签的src属性是没有跨域的限制的,从而达到跨域访问的目的。因此它的最基本原理就是:动态添加一个<script>标签来实现。

实现方法:

这里是使用ajax来请求的,看起来和ajax没啥区别,其实还是有区别的。

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

$.ajax({ url:"http://crossdomain.com/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result) { // some code } });

上面的代码中,callback是必须的,callback是什么值要跟后台拿。获取到的jsonp数据格式如下:

flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });

jsonp的全称为json with padding,上面的数据中,flightHandler就是那个padding.

JSONP的不足之处:

1、只能使用get方法,不能使用post方法:

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

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

2、CORS策略

原理:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdspz.html