jsonp为啥能跨域呢,我们来盗一下这个墓

不知道大家最近看没看《鬼吹灯之寻龙诀 》,感觉IMAX-3D效果真不错,虽然剧情不咋滴,但是效果是出来了。好了,今天我们也来一场盗墓,这次是挖jsonp的坟,挖一挖为啥jsonp就能跨域呢,它咋就那么牛X呢。如果看到了这篇文章,那么大家对于跨域一定不陌生了,通俗说就是不同域请求资源。不过怎么就构成跨域呢,这个问题貌似在《白帽子讲web安全》这本书里讲的比较全面,本文不去深究了,我们今天是来盗墓的,开始干活。

基本思路

大家都知道<script>标签可以通过src来引入js文件,当然它可不是仅仅可以引入js文件,它能引入很多资源。比如看下方:

jsonp-sina-home

这是新浪汽车首页引入了一个新浪汽车图库的php文件。如果你打开ip.php它返回如下信息(其实就是一段js代码,两个js方法get_city和get_ip_city):json-sina-ip

如果你开发或者调试过跨域的接口,也就知道基本上jsonp和json就差一个callback参数,学名叫回调函数。这个回调函数就为我们定了穴,接下来我们从这里开始挖。

接口

为了方便大家测试,我就不单独写接口了,我们找一个现成的:

http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=1&page=1&callback=callback

这个接口是支持跨域的,为啥呢,接下来我们开始挖。

测试跨域

如果接口支持跨域并且没有做其他限制,那么也就意味着这个接口在任何地方都可以调用。所以我们在本地新建一个test.html文件,文件内容如下:

<html>
<head>
<script src="http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1&callback=func"></script>
</head>
<body>
</body>
</html>

用chrome打开上述文件,然后右键审查元素,你将会收获一个错误信息,点击错误信息,可以得到如下图:jsonp-error-func

其实这个报错信息提示我们func未定义,其实就是我们传入的callback的参数未定义,那这个需要在哪里定义呢?当然是在我们的html页面中,我们在html中定义一下,代码如下:

<html>
<head>
<script>
function func(data){
 console.log(data);
}
</script>
<script src="http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1&callback=func"></script>
</head>
<body>
</body>
</html>

上述代码我们添加了一个func方法,这个方法接收一个参数,并且将传入的值打印到console中。在chrome中运行上述代码,并审查源代码,效果如下图:

jsonp-success

这一次并没有报错,并且已经按照我们的预期将返回的值打印到了console中,其中的值其实就是json格式。

js的jsonp请求

这里我们用jQuery.ajax()方法去请求一下上述接口,来体验一下jsonp请求。当然你也可以用XMLHttpRequest/ActiveXObject,不过注意兼容性。代码如下:

<html>
<head>
<!-- 引入jquery包 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
 $.ajax({
     url: 'http://news.auto.sina.com.cn/m/label/get_label_info.php?label=%E8%BD%A6%E8%81%94%E7%BD%91&length=2&page=1',
     dataType:'jsonp',
     success:function(res){
         console.log(res);
     }
 });
});
</script>
</head>
<body>
</body>
</html>

在chrome中打开上述文件,然后审查元素(记得要重新刷新页面哦),效果如下:

jsonp-jquery-succ

揭开谜底,发现宝藏

通过上边两种方式体验了一番,也许你已经知道了谜底。谜底就是js可以引入并运行跨域代码,而不能引入跨域的数据,jsonp通过回调函数来链接远程资源和本地js代码。回调函数在本地,而运行回调函数并传入参数是通过远程实现的。换句话说:jsonp返回来的是代码,而json返回来的是数据,浏览器为了安全起见不允许跨域请求数据,但是并没有限制不能运行远程代码。

那么如果你是一个后端开发人员,你写如下代码(PHP版本):

echo $callback."(".json_encode(['data']).")";

其实是相当于返回了一段调用js方法的代码,调用了js代码里的callback方法,而如果只是返回一串json,那么返回的是数据。如果你是js开发人员,需要注意jsonp返回的值是一段js代码,是有危险的,比如在callback前边加上一个while(1){}那你的代码就彻底歇菜了,不要轻易去使用别人的接口。此外还得提醒大家,jsonp只能通过GET方式传输,不能用POST等方式。

打完收工,今天我们从两个角度去思考了jsonp是怎么完成跨域的,其实本质是一样的,如果你想彻底弄明白这个过程,最好动手试一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注