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

首页

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

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

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

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

See all articles