深入分析JSONP跨域的原理


Posted in Javascript onDecember 10, 2014

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的 页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代 码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在 abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述:

假设在http://example1.com/index.php这个页面中向http://example2.com /getinfo.php提交GET请求,我们可以将下面的JavaScript代码放在http://example1.com/index.php这 个页面中来实现:

var eleScript= document.createElement("script");

eleScript.type = "text/javascript";

eleScript.src = "http://example2.com/getinfo.php";

document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

当GET请求从http://example2.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://example1.com/index.php页面中的一个callback函数。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中 都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

再来一个例子:

var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':

$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};

$.ajax({ 

    async:false, 

    url: http://跨域的dns/document!searchJSONResult.action, 

    type: "GET", 

    dataType: 'jsonp', 

    jsonp: 'jsoncallback', 

    data: qsData, 

    timeout: 5000, 

    beforeSend: function(){ 

        //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 

    }, 

    success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 

        if(json.actionErrors.length!=0){ 

            alert(json.actionErrors); 

        } 

        genDynamicContent(qsData,type,json); 

    }, 

    complete: function(XMLHttpRequest, textStatus){ 

        $.unblockUI({ fadeOut: 10 }); 

    }, 

    error: function(xhr){ 

        //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 

        //请求出错处理 

        alert("请求出错(请检查相关度网络状况.)"); 

    } 

});

有时也会看到这样的写法:

$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?", 

    function(json){ 

    if(json.属性名==值){ 

        // 执行代码 

    } 

});

这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了。

这样,jquery就会拼装成如下的url get请求:

http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=

%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15

在响应端(http://跨域的dns/document!searchJSONResult.action),通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501 然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")"; jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 这样就达到了跨域数据交换的目的。

JSONP原理

JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。

这样其实"jQuery AJAX跨域问题"就成了个伪命题,jquery $.ajax方法名有误导人之嫌。

如果设为dataType: 'jsonp',这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。 这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....):是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数

Jsonp的执行过程如下:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用 jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式,生成一个function, function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数, 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换 的)。JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患。

jquery为什么不支持post方式跨域呢?

虽然采用post+动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用。

也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的,万不得已还是不要剑走偏锋。

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。

来个超简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" >  

<head>  

    <title>Test Jsonp</title>  

    <script type="text/javascript">  

            function jsonpCallback(result)  

            {  

            alert(result.msg);  

            }  

        </script>  

    <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>  

</head>  

<body>  

</body>  

</html>

其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。http://crossdomain.com /jsonServerResponse?jsonp=jsonpCallback 这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为:jsonpCallback({msg:'this is json data'})

简述原理与过程:首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。(动态执行回调函数)

Javascript 相关文章推荐
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
node.js中的console.dir方法使用说明
Dec 10 #Javascript
node.js中的console.error方法使用说明
Dec 10 #Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 #Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 #Javascript
JavaScript解析json格式数据简单示例
Dec 09 #Javascript
浅谈页面装载js及性能分析方法
Dec 09 #Javascript
深入分析jquery解析json数据
Dec 09 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
给初学PHP的5个入手程序
2006/11/23 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
js实现点赞效果
2020/03/16 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
解决Python中回文数和质数的问题
2019/11/24 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
python自动生成证件号的方法示例
2021/01/14 Python
研究生毕业鉴定
2014/01/29 职场文书
服务质量承诺书
2014/03/27 职场文书
专业技术职务聘任书
2014/03/29 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python