JS跨域问题详解


Posted in Javascript onNovember 25, 2014

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在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请求,等等。

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。本文就这个问题,概括了跨域所需要的一些技术。

下面我们分两种情况讨论跨域技术:首先讨论不同子域的跨域技术,然后讨论完全不同域的跨域技术。

(一)不同子域的跨域技术。

我们分两个问题来分别讨论:第一个问题是如何跨不同子域进行JavaScript调用;第二个问题是如何向不同子域提交Ajax请求。

先来解决第一个问题,假设example.com域下有两个不同子域:abc.example.com和def.example.com。现在假设在def.example.com下面有一个页面,里面定义了一个JavaScript函数:

function funcInDef() {

   .....

}

我们想在abc.example.com下的某个页面里调用上面的函数。再假设我们要讨论的abc.example.com下面的这个页面是以iframe形式嵌入在def.example.com下面那个页面里的,这样我们可能试图在iframe里做如下调用:

window.top.funcInDef();

 

好,我们注意到,这个调用是被前面讲到的“同源策略”所禁止的,JavaScript引擎会直接抛出一个异常。

为了实现上述调用,我们可以通过修改两个页面的domain属性的方法做到。例如,我们可以将上面在abc.example.com和def.example.com下的两个页面的顶端都加上如下的JavaScript代码片段:

<script type="text/javascript">

    document.domain = "example.com";

</script>

这样,两个页面就变为同域了,前面的调用也可以正常执行了。

这里需要注意的一点是,一个页面的document.domain属性只能设置成一个更顶级的域名(除了一级域名),但不能设置成比当前域名更深层的子域名。例如,abc.example.com的页面只能将它的domain设置成example.com,不能设置成sub.abc.example.com,当然也不能设置成一级域名com。

上面的例子讨论的是两个页面属于iframe嵌套关系的情况,当两个页面是打开与被打开的关系时,原理也完全一样。

下面我们来解决第二个问题:如何向不同子域提交Ajax请求。

通常情况下,我们会用与下面类似的代码来创建一个XMLHttpRequest对象:

factories = [

    function() { return new XMLHttpRequest(); },

    function() { return new ActiveXObject("Msxml2.XMLHTTP"); },

    function() { return new ActiveXObject("Microsoft.XMLHTTP"); }

];

function newRequest() {

    for(var i = 0; i <</SPAN> factories.length; i++) {

        try{

            var factory = factories[i];

            return factory();

        } catch(e) {}

    }

    return null;

}

 

上面的代码中引用ActiveXObject,是为了兼容IE6系列浏览器。每次我们调用newRequest函数,就获得了一个刚刚创建的Ajax对象,然后用这个Ajax对象来发送HTTP请求。例如,下面的代码向abc.example.com发送了一个GET请求:

var request = newRequest();

request.open("GET", "http://abc.example.com" );

request.send(null);

假设上面的代码包含在一个abc.example.com域名下的页面里,则这个GET请求可以正常发送成功,没有任何问题。然而,如果现在要向def.example.com发送请求,则出现跨域问题,JavaScript引擎抛出异常。

解决的办法是,在def.example.com域下放置一个跨域文件,假设叫crossdomain.html;然后将前面的newRequest函数的定义移到这个跨域文件中;最后像之前修改document.domain值的做法一样,在crossdomain.html文件和abc.example.com域下调用Ajax的页面顶端,都加上:

<script type="text/javascript">

    document.domain = "example.com";

</script>
为了使用跨域文件,我们在abc.example.com域下调用Ajax的页面中嵌入一个隐藏的指向跨域文件的iframe,例如:

[code]

<iframe name="xd_iframe" style="display:none" src="http://def.example.com/crossdomain.html"></iframe>

这时abc.example.com域下的页面和跨域文件crossdomain.html都在同一个域(example.com)下,我们可以在abc.example.com域下的页面中去调用crossdomain.html中的newRequest函数:

var request = window.frames["xd_iframe"].newRequest();

这样获得的request对象,就可以向http://def.example.com发送HTTP请求了。

(二)完全不同域的跨域技术。

如果顶级域名都不相同,例如example1.com和example2.com之间想通过JavaScript在前端通信,则所需要的技术更复杂些。

在讲解不同域的跨域技术之前,我们首先明确一点,下面要讲的技术也同样适用于前面跨不同子域的情况,因为跨不同子域只是跨域问题的一个特例。当然,在恰当的情况下使用恰当的技术,能够保证更优的效率和更高的稳定性。

简言之,根据不同的跨域需求,跨域技术可以归为下面几类:

1、JSONP跨域GET请求
2、通过iframe实现跨域
3、flash跨域HTTP请求
4、window.postMessage

本文先到这里,后续我们再详细介绍上面提到的4种跨域技术,稍后就奉上!

Javascript 相关文章推荐
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
javascript 中__proto__和prototype详解
Nov 25 #Javascript
js 加密压缩出现bug解决方案
Nov 25 #Javascript
js Object2String方便查看js对象内容
Nov 24 #Javascript
js的[defer]和[async]属性
Nov 24 #Javascript
使用JavaScript 编写简单计算器
Nov 24 #Javascript
JS和JQ的event对象区别分析
Nov 24 #Javascript
JavaScript实现大数的运算
Nov 24 #Javascript
You might like
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
express.js中间件说明详解
2019/03/19 Javascript
vuex入门最详细整理
2020/03/04 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
基于python实现地址和经纬度转换
2020/05/19 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
抽象类和接口的区别
2012/09/19 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
运动会100米解说词
2014/01/23 职场文书
《影子》教学反思
2014/02/21 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
离婚起诉书范文2015
2015/05/19 职场文书