深入分析Javascript跨域问题


Posted in Javascript onApril 17, 2015

跨域是什么?

假设a.com/get.html需要获取b.com/data.html中的数据,而这里a.com和b.com并不是同一台服务器,这就是跨域跨域会涉及到Javascript的同源策略,简单来说就是为了保护网站的安全,不被外域(非同源)服务器的js修改本网站内容。
引用一个表格,看一下引起跨因的条件有哪些:

深入分析Javascript跨域问题

但是有时候我们确实需要这么做,那么我们有哪些方法呢?

1、JsonP

提到跨域不能不先提及jsonp。jsonp其实是JavacScript Object Notation with Padding的简称,可以理解成填充了内容的json格式数据。
因为以上声明了callback并且调用外域b.com的data.js,而data.js中调用:
callback({msg:"tqtan"});
这样当调用引用外域的js就会调用本地的callback()从而实现数据传输。
上面是只是简单的跨域,我们来看jQuery的真正的运用。

jQuery中的ajax可拉取外域的数据,通过两种方法:

1、$.getJSON()

这种方法简单粗暴,请求外域Json。

$.getJSON("http://b.com/dataServlet?callback=?",function(data){

console.log(data.msg);

});

假设上述请求访问b.com下的servlet页面,传的参数为callback=?,jQuery会自动生成字符串填补占位符?,例如callback=jQuery17207481773362960666_1332575486681。这就声明了与服务器的唯一标示,服务器只需要返回带有这个callback值的json格式数据即可,例如:

//dataServlet.java

String callback = req.getParameter("callback");

PrintWriter out = resp.getWriter();

out.print(callback+"('msg','tqtan')");

这样就能成功获取非同源服务器的数据了。

2、$.ajax()

实现原理和上面一样,只是可以自定义更多链接。

$.ajax({
url:'http://b.com/dataServlet?words=hi',
dataType:'jsonp',
jsonp : 'jsoncallback',
jsoncallback : 'tqtan',
success:function(data){
console.log(data.msg);
},
error: function (e) {
console.log(e);
}
});

可以自定义callback的名字,这里改为'tqtan',同时这里可以传值words=hi。
注意了,JsonP格式只能是以GET形式请求服务器。

2、document.domain

这种方法只适用于主域相同,而子域不同的跨域。
也就是get.a.com和data.a.com的跨域问题,解决方法很简单:
若get.a.com/get.html需要获取data.a.com/data.html的数据,首先在get.html插入一个iframe,src指向data.a.com/data.html,然后在data.html写上document.domain='a.com';即可操纵data.html内的内容。

//get.html
var iframe = document.creatElement("iframe");
iframe.src="http://data.a.com/data.html";
iframe.style.display="none";
document.body.appendChild(iframe);
document.domain = 'a.com';
iframe.onload = function(){
var otherDocument = iframe.contentDocument || iframe.contentWindow.document;
//otherDocument就是另一个页面的document
//do whatever you want..
};
//data.html
document.domain = 'a.com';

3、url hash

你也可以通过url的hash来实现跨域。hash就是url#后面的内容,例如http://targetkiller.net/index.html#data,这里#data就是hash。怎么用这个实现跨域呢?

还是那个例子,a.com/get.html需要获取b.com/data.html,首先在get.html建立一个iframe,src还是指向data.html,后面带上hash值实现传参。另一端data.html根据获取的hash作出响应,自身也创建一个iframe,src指向a.com/proxy.html,并把响应数据添加到hash。之后,a.com/proxy.html只需要修改在同一a.com父域的get.html的hash即可。最后,怎样获取数据呢?只需要在get.html写一个定时器setInterval,定期监听有无新的hash即可。

看到这里,你可能感到开始乱了,几个问题:

1.proxy.html的作用?
由于get.html和data.html不在一个域上,所以不能修改location.hash值,于是运用proxy.html,先跳到找个代理页面,然后通过parent.location.hash,也就是修改父亲,让儿子(get.html)也得到响应。
a.com/get.html

var iframe = document.createElement('iframe');
iframe.src = 'http://a.com/get.html#data';
iframe.style.display = 'none';
document.body.appendChild(iframe);
//周期检测hash更新
function getHash() {
var data = location.hash ? location.hash.substring(1) : '';
console.log(data);
}
var hashInt = setInterval(function(){getHash()}, 1000);
a.com/proxy.html
parent.location.hash = self.location.hash.substring(1);
b.com/data.html
//模拟一个简单的参数处理操作
if(location.hash){
var data = location.hash;
doSth(data);
}
function doSth(data){
console.log("from a.com:"+data);
var msg = "hello i am b.com";
var iframe = document.createElement('iframe');
iframe.src = "http://a.com/proxy.html#"+msg;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}

4、window.name

这种方法比较巧妙,引用圆心的解释,name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
具体例子依旧如上,同时也是需要一个代理页面。
a.com/get.html请求b.com/data.html,首先get.html创建一个iframe,src指向data.html,然后监听iframe的onload事件。与此同时,在data.html设置window.name = data;把window.name赋值。然后onload事件后马上把iframe的跳到本地a.com/proxy.html。因此window.name就共享到了src为proxy.html的找个iframe中,接下来,就是同源间获取值的事了。
a.com/get.html

var state = 0,
iframe = document.createElement('iframe'),
iframe.src = 'http://b.com/data.html";
iframe.style.display = 'none';
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name;
console.log(data);
} else if (state === 0) {
state = 1;
//跳到proxy.html
iframe.contentWindow.location = "http://a.com/proxy.html";
}
};
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
a.com/proxy.html
// proxy.html的操作主要是删除get.html的iframe,避免安全问题发生
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
b.com/data.html
var data = "hello,tqtan";
window.name = data;

5、 postMessage()

html5的新方法postMessage()优雅地解决了跨域,也十分容易理解。
发送方调用postMessage()内容,接受方监听onmessage接受内容即可。
假设发送方为a.com/send.html,接受方为b.com/receive.html。
a.com/send.html

var iframe = document.createElement("iframe");
iframe.src = "http://b.com/receive.html";
document.body.appendChild(iframe);
iframe.contentWindow.postMessage("hello","http://b.com");
b.com/receive.html
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://a.com') {
console.log(event.data);
console.log(event.source);//发送源的window值
}
}, false);

6、CORS(后台实现)

以上5点都是前端实现的跨域,但是后台参与会让跨域更容易解决,也就是用CORS。
CORS是Cross-Origin Resource Sharing的简称,也就是跨域资源共享。它有多牛逼?之前说JsonP只能get请求,但CORS则可以接受所有类型的http请求,然而CORS只有现代浏览器才支持。
怎样使用?前端只需要发普通ajax请求,注意检测CORS的支持度。引用自蒋宇捷。

function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// 此时即支持CORS的情况
// 检查XMLHttpRequest对象是否有“withCredentials”属性
// “withCredentials”仅存在于XMLHTTPRequest2对象里
xhr.open(method, url, true);
}
else if (typeof!= "undefined") {
// 否则检查是否支持XDomainRequest,IE8和IE9支持
// XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// 否则,浏览器不支持CORS
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}

与此同时,服务器端只需要设置Access-Control-Allow-Origin头即可。

java中你只需要设置

response.setHeader("Access-Control-Allow-Origin", "*");

为了安全,也可以将*改为特定域名,例如a.com。

Javascript 相关文章推荐
javascript 获取浏览器版本
Jan 21 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 #Javascript
JavaScript中split() 使用方法汇总
Apr 17 #Javascript
javascript模拟命名空间
Apr 17 #Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 #Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 #Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 #Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
joomla数据库操作示例代码
2016/01/06 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php设计模式之单例模式代码
2016/06/11 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
js实现选项卡效果
2020/03/07 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
Python实现队列的方法
2015/05/26 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python绘制热力图heatmap
2020/03/23 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
初三新学期计划书
2014/05/03 职场文书
学用政策心得体会
2014/09/10 职场文书
工作总结与自我评价
2014/09/18 职场文书
公司授权委托书范文
2014/09/21 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP