js实现跨域的多种方法


Posted in Javascript onDecember 25, 2015

从域说起

域: 域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”,这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域。在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系。当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享
域树:域树由多个域组成,这些域共享同一表结构和配置,形成一个连续的名字空间。树中的域通过信任关系连接起来,活动目录包含一个或多个域树。域树中的域是通过双向可传递信任关系连接在一起。由于这些信任关系是双向的而且是可传递的,因此在域树或树林中新创建的域可以立即与域树或树林中每个其他的域建立信任关系。这些信任关系允许单一登录过程,在域树或树林中的所有域上对用户进行身份验证,但这不一定意味着经过身份验证的用户在域树的所有域中都拥有相同的权利和权限。因为域是安全界限,所以必须在每个域的基础上为用户指派相应的权利和权限。
域树中的域层次越深级别越低,一个“.”代表一个层次。
如域zhidao.baidu.com(百度知道)就比 baidu.com(百度)这个域级别低,因为它有两个层次关系,而baidu.com只有一个层次。

何为跨域

默认情况下,,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。
只要协议、域名、端口有任何一个不同,都被当作是不同的域

比如在http://www.a.com/a.js 页面向以下页面发送一个ajax请求,以下是其请求结果及说明

js实现跨域的多种方法

对于端口和协议的不同,只能通过后台来解决。我们要解决的是域名不同的问题

如何跨域

(一) CORS(Cross-Origin Resource Sharing,跨源资源共享)

1.CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C 的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
2.实现此功能非常简单,只需由服务器发送一个响应标头即可。

浏览器支持情况:

  • IE 8+
  • Firefox 3.5+
  • Opera 12+
  • Safari 4+
  • Chrome 3+

假设我们页面或者应用已在 http://www.a.com/ 上了,而我们打算从 http://www.b.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回错误。
利用 CORS,http://www.b.com 只需添加一个标头,就可以允许来自 http://www.a.com 的请求。
下面是用php进行的设置,“*”号表示允许任何域向我们的服务端提交请求:

header{"Access-Control-Allow-Origin: *"}

CORS的兼容性写法

function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://www.somewhere-else.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }

(二) JSONP(JSON with Padding 填充式JSON 或参数式JSON)

在js中,我们虽然不能直接用XMLHttpRequest请求不同域上的数据时,但是在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

例如:

<script type="text/javascript">
 function dosomething(jsondata){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

首先第一个script便签定义了一个处理数据的函数;
然后第二个script标签载入一个js文件,http://example.com/data.php 是数据所在地址,但是因为是当做js来引入的,所以http://example.com/data.php 返回的必须是一个能执行的js文件;
最后js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以php应该是这样的

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

最终,输出结果为:dosomething(['a','b','c']);
从上面可以看出jsonp是需要服务器端的页面进行相应的配合的。

JSONP的优缺点
优点:

它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;
能够直接访问响应文本,支持在浏览器与服务器之间双向通信
缺点:

JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的Web 服务时,一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

这里有三个页面:

a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

app.html

<iframe src="b.com/data.html" id="iframe"></iframe>
<script>
 var iframe = document.getElementById("iframe");
 iframe.src = "a.com/proxy.html";//这是一个与a.com/app.html同源的页面
 iframe.onload = function(){
 var data = iframe.contentWindow.name; //取到数据
 }

</script>

data.html

<script>
 // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
 // 数据格式可以自定义,如json、字符串
 window.name = "数据"
</script>

iframe首先的地址是b.com/data.html,所以能取到window.name数据;
但是iframe现在跟app.html并不同源,app.html无法获取到数据,所以又将iframe的链接跳转至a.com/proxy.html这个代理页面,现在app.html跟iframe就同源了。

注意:iframe由b.com/data.html跳转到a.com/proxy.html页面,window.name的value是不变的

获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)

<script type="text/javascript">
 iframe.contentWindow.document.write('');
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
</script>

(四) document.domain + iframe

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。
具体的做法是可以在http://www.a.com/a.html 和http://script.a.com/b.html 两个文件中分别设置document.domain = 'a.com',然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。
http://www.a.com/a.html页面

<iframe src="http://script.a.com/b.html" frameborder="0"></iframe>
<script>
 document.domain = 'a.com';
</script>

http://script.a.com/b.html页面

<script>
 document.domain = 'a.com';
</script>

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲,window.postMessage是一个跨域的无服务器垫片的Ajax。

用法:
otherWindow.postMessage(message, targetOrigin);

  • otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.+open的返回值;通过name或下标从window.frames取到的值。
  • message: 所要发送的数据,string类型。
  • targetOrigin: 用于限制otherWindow,“*”表示不作限制

数据发送端
a.com/index.html中的代码:

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById('ifr');
 var targetOrigin = 'http://b.com'; // 设定接收端的域,*则为不限制
   
 ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

数据接收端
b.com/index.html中的代码:

<script type="text/javascript">
 window.addEventListener('message', function(event){
 // 通过origin属性判断消息来源地址
 if (event.origin == 'http://a.com') {
 alert(event.data); // 弹出"I was there!"
 alert(event.source); // 对a.com、index.html中window对象的引用
   // 但由于同源策略,这里event.source不可以访问window对象
 }
 }, false);
</script>

以上就是js实现跨域的多种方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
学习JavaScript鼠标响应事件
Dec 25 #Javascript
理解javascript中DOM事件
Dec 25 #Javascript
理解JavaScript中worker事件api
Dec 25 #Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
定义select的边框颜色
2008/04/28 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python去掉行尾的换行符方法
2017/01/04 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python pip使用超时问题解决方案
2020/08/03 Python
酒店出纳岗位职责
2013/12/29 职场文书
办公室前台岗位职责
2014/01/04 职场文书
全神贯注教学反思
2014/02/03 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
小学班级特色活动方案
2014/08/31 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
2015年政风行风工作总结
2015/04/21 职场文书