我的jsonp跨域问题

时间:2022-01-01 19:47:16

关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题:

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制

浏览器的同源策略

古代的楚河汉界明确规定了楚汉两军的活动界限,理应遵守,否则必天下大乱,而事实上天下曾大乱后又统一。这里我们不用管这些“分久必合,合久必分”的问题,关键是看到这里规定的“界限”。

Web世界之所以能如此美好地呈现在我们面前,多亏了浏览器的功劳,不过浏览器不是一个花瓶——只负责呈现,它还制定了一些安全策略,这些安全策略有效地保障了用户计算机的本地安全与Web安全。

计算机的本地与Web是不同的层面,Web世界(通常称为Internet域)运行在浏览器上,而被限制了直接进行本地数据(通常称为本地域)的读写。

同源策略是众多安全策略的一个,是Web层面上的策略,非常重要,如果少了同源策略,就等于楚汉两军没了楚河汉界,这样天下就大乱了。

同源策略规定:不同域的客户端脚本在没明确授权的情况下,不能读写对方的资源。

下面分析同源策略下的这个规定,其中有几个关键词:不同域、客户端脚本、授权、读写、资源。

1.不同域或同域

同域要求两个站点同协议、同域名、同端口,比如:下列所列站点与http://www.foo.com是否同域的情况。

https://www.foo.com不同域,协议不同,https与http是不同的协议

http://xeyeteam.foo.com不同域,域名不同,xeyeteam子域与www子域不同

http://foo.com不同域,域名不同,*域与www子域不是一个概念

http://www.foo.com:8080不同域,端口不同,8080与默认的80端口不同

http://www.foo.com/a/同域,满足同协议、同域名、同端口,只是这里多了一个目录而已

跨域请求的含义特别注意两点:

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

2.客户端脚本

客户端脚本主要指JavaScript(各个浏览器原生态支持的脚本语言)、ActionScript(Flash的脚本语言),以及JavaScript与ActionScript都遵循的ECMAScript脚本标准。Flash提供通信接口,使得这两个脚本语言可以很方便地互相通信。客户端的攻击几乎都是基于这两个脚本语言进行的,当然JavaScript是最广泛的。

 

3.授权

一般情况下,看到这个词,我们往往会想到服务端对客户端访问的授权。客户端也存在授权现象,比如:HTML5新标准中提到关于AJAX跨域访问的情况,默认情况下是不允许跨域访问的,只有目标站点(假如是http://www.foo.com)明确返回HTTP响应头:

Access-Control-Allow-Origin: http://www.evil.com

那么www.evil.com站点上的客户端脚本就有权通过AJAX技术对www.foo.com上的数据进行读写操作。这方面的攻防细节很有趣,相关内容在后面会详细介绍。

4.读写权限

Web上的资源有很多,有的只有读权限,有的同时拥有读和写的权限。比如:HTTP请求头里的Referer(表示请求来源)只可读,而document.cookie则具备读写权限。这样的区分也是为了安全上的考虑。

5.资源

资源是一个很广泛的概念,只要是数据,都可以认为是资源。同源策略里的资源是指Web客户端的资源。一般来说,资源包括:HTTP消息头、整个DOM树、浏览器存储

(如:Cookies、Flash Cookies、localStorage等)。客户端安全威胁都是围绕这些资源进行的。

注:DOM全称为Document Object Model,即文档对象模型,就是浏览器将HTML/XML这样的文档抽象成一个树形结构,树上的每个节点都代表HTML/XML中的标签、

标签属性或标签内容等。这样抽象出来就大大方便了JavaScript进行读/写操作。Web客户端的攻击几乎都离不开DOM操作。

到此,已经将同源策略的规定分析清楚,如果Web世界没有同源策略,当你登录Gmail邮箱并打开另一个站点时,这个站点上的JavaScript就可以跨域读取你的Gmail邮箱数据,

这样整个Web世界就无隐私可言了。这就是同源策略的重要性,它限制了这些行为。当然,在同一个域内,客户端脚本可以任意读写同源内的资源,前提是这个资源本身是可读可写的。

1.  例子1:假设有两个端口(http://www.tutu.com:8080和http://www.tutu.com:8081)
在F:\wamp\www\index1下面有个jsonp.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var localHandler = function(data){
alert('我是本地函数,可以被跨域的jsonp-remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script> <script type="text/javascript" src="http://www.tutu.com:8081/jsonp-remote.js"></script>
</head>
<body> </body>
</html>

  在F:\wamp\www\index2下面有个jsonp-remote.js,代码如下:

/* alert('我是远程文件'); */
localHandler({"result":"我是远程js带来的数据aaaabbb"});
2.  例子2:在F:\wamp\www\index1下面有个jsonp1.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script> </head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://www.tutu.com:8081/jsonp1-flightResult.aspx",
dataType: "jsonp", //jsonp: "callbackkkk",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) ????? //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了??
//上面这句话怎么解释? //加上 jsonp:"callbackkkk" 这句话,为:?callbackkkk=flightHandler,相当于参数
//没有的话:默认?callback=flightHandler jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 //由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,
//所以就带一个QueryString让客户端告诉服务端,回调方法是什么,
//当然,QueryString的key要遵从服务端的约定,这里是callbackkkk或者默认的”callback“。 success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets+'张。'); },
error: function(){
alert('fail');
}
}); //
//
});
</script>
</body>
</html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx,代码如下:

flightHandler({
"code": "CA1998",
"price": ,
"tickets":
});

3.  例子3:在F:\wamp\www\index1下面有个jsonp2.html,代码如下:(例子三有问题,放在这提醒自己)

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://www.tutu.com:8081/jsonp2-flightResult.html?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body> </body>
</html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx,代码如下

<!DOCTYPE html>
<html>
<head>
<title></title> <script type="text/javascript">
var flightHandler = {
"code": "CA1998",
"price": 1780,
"tickets": 5
}
</script>
</head>
<body> </body>
</html>
怎样将Javascript对象转化成json,发送?可以使用jquery.json插件,这里没有使用,所以例三是不完整的

4.  例子4:在F:\wamp\www\index1下面有个jsonp-a.html,代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head> <body> <script>
$(document).ready(function(){
$("#web").click(function(){ $.ajax({
type : "get",
async:false,
url : "http://www.tutu.com:8081/jsonp-b.php",
dataType : "jsonp",
data:{key:6},
//?jsonpcallback=jQuery1830070291701721...
jsonp: "jsonpcallback",//服务端用于接收callback调用的function名的参数 //首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字jsoncallback
//(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,
//要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,
//服务器生成 json 数据才能被客户端正确接收。
//然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
//最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
//客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
//传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数) //jsonpCallback:"flightHandler"//没有这句 success : function(json){
//alert(json);
alert(json[0].name+'777'); var newstr='';
$.each(json,function(i,v){
newstr = newstr +' '+ v.id + " " + v.name;
});
$("#result").append(newstr); },
error:function(){
alert('fail');
}
});
})
})
</script> <button id="web">ajax跨域</button> <div id="result" style="font-size:30px;color:red"></div> </body> </html>

在F:\wamp\www\index2下面有个jsonp-b.php,代码如下

<?php
if( isset($_GET['jsonpcallback']) ){
//php里面的$_GET 变量用于收集来自 method="get" 的表单中的值。
//输出jsonp格式的数据
$a=$_GET['key']+1;
echo $_GET['jsonpcallback']."([{id:".$a.",name:'data001'},{id:2,name:'data002'}])";
exit();
}
以上是参考资料后自己的部分实践