jsonp为啥能跨域呢，我们来盗一下这个墓_html/css

基本思路

接口

测试跨域

js的jsonp请求

揭开谜底，发现宝藏

首页

web前端

html教程

jsonp为啥能跨域呢，我们来盗一下这个墓_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

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

基本思路

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

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

如果你开发或者调试过跨域的接口，也就知道基本上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打开上述文件，然后右键审查元素，你将会收获一个错误信息，点击错误信息，可以得到如下图：

其实这个报错信息提示我们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中运行上述代码，并审查源代码，效果如下图：

这一次并没有报错，并且已经按照我们的预期将返回的值打印到了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中打开上述文件，然后审查元素（记得要重新刷新页面哦），效果如下：

揭开谜底，发现宝藏

通过上边两种方式体验了一番，也许你已经知道了谜底。谜底就是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是怎么完成跨域的，其实本质是一样的，如果你想彻底弄明白这个过程，最好动手试一下。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7697

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。