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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python numpy实现rolling滚动案例
2020/06/08 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
考察邀请函范文
2015/01/31 职场文书
教师工作态度自我评价
2015/03/05 职场文书
二婚主持词
2015/06/30 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书