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 相关文章推荐
深入了解javascript中的prototype与继承
Apr 14 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS自定义滚动条效果
Mar 13 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
浅谈php提交form表单
2015/07/01 PHP
JavaScript的parseInt 取整使用
2011/05/09 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
微信跳一跳python代码实现
2018/01/05 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python flask安装和命令详解
2019/04/02 Python
django富文本编辑器的实现示例
2019/04/10 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
django 取消csrf限制的实例
2020/03/13 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
《夜晚的实验》教学反思
2014/02/19 职场文书
企业节能减排实施方案
2014/03/19 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
民事纠纷协议书
2016/03/23 职场文书
神州牡丹园的导游词
2019/11/20 职场文书