微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

同源策略与jsonp

同源策略

浏览器对运行其中的javascript代码设置了诸多安全性限制,其中包括同源策略

简单来说,就是认情况下,来自于A源的js代码,无法访问B源的document,也无法向B源发送ajax请求

源的定义包括协议,主机,端口号,比如http://www.example.com和http://www.example.com:8080就是不同的源。因此,http://www.example.com/index.html加载的index.js中的代码认情况下不能向http://www.example.com:8080/users发送ajax请求,但是可以发往http://www.example.com/users

重要的是,一段js代码属于哪个源,并不是看它是从哪里加载的,而是看它是被谁加载的

举个例子,很多页面引用angular,jquery等js框架时,并不从自己的服务器上获取js文件,而是从公共的CDN上获取。比如说某网站www.abc.com,使用angular作为前端MVC框架,那么它的angular.js来自google CDN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

这种情况下,angular.min.js虽然来自https://ajax.googleapis.com,但是它是属于www.abc.com这个源,可以往此服务器上的REST服务,webservice,servlet发送ajax请求,但是反而不能往https://ajax.googleapis.com上发送任何请求

jsonp

这个限制有时候是需要被违反的,比如news.abc.com和games.abc.com虽然是不同的源,但是是同一个域的不同子站点,互相之间的通信被允许是合情合理的。这种场景下,就需要有办法来克服同源策略的限制

现在的方法有很多种,包括html5里的postMessage方法等。jsonp也是其中的一种方法

原理上,就是通过把请求构造在<script src>的地址中,其中拼接好目标服务的URL和参数,比如:

<script src="http://games.abc.com/user/123456"></src>

浏览器认为这是一个普通的js加载请求,而不是一个ajax请求,于是就会向src发起http get请求,而在games.abc.com,这个服务返回的响应是一段js代码,于是当news.abc.com的js代码得到响应之后,就可以取出代码并执行

业界的通常做法,这个响应里包含的是请求发起页面的js方法名,以及用来表示数据的json,请求方对这段json进行解析(parse),因此这种跨域请求的做法,被称为jsonp

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐