在介绍JSONP之前,先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写,是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本,因此可通过许多途径进行JSON消息的传递。
1. JSONP定义
JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成 一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢?那就要借助浏览器 的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊, 它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程 序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理与实现
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp.
然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。
最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。
其实 JSONP是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。(其实也可以用eval函数)
JSONP实现代码:
- < script type=" text/javascript" >
- function jsonpCallback(result){
- alert(result.msg);
- }
- < /script>
- < script type=" text/javascript" src=" http://mydomain.com/jsonService?jsonp=jsonpCallback">
- < /script>
注解:
jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。
http://mydomain.com/jsonService?jsonp=jsonpCallback是获取跨域服务器JSON数据的接口,参数为回调函数的名字。返回的格式为:
- jsonpCallback({ msg:'this is json data'} )
4. jQuery与JSONP
从 1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调,就可以加载位于另一个域的 JSON 数据,回调的语法为:url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。
jQuery回调函数:
- jQuery.getJSON(url+"&callback=?", function(data) {
- alert("Name: " + data.name + ", Phone: " + data.phone);
- });
为此,jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外,jQuery 也能优化非跨域调用。如果向同一个域发出请求,jQuery 就将其转化为普通 Ajax 请求。
5. JSONP的安全问题
在JavaScript 程序中有多种方法可动态地生成代码,最著名的函数之一就是 eval()。该函数允许您将任意字符串做为 JavaScript 代码执行。然而,随意使用该函数是非常危险的。遗憾的是,一些使用广泛的 JavaScript 库在内部都直接使用 eval() 函数。JSON本身是安全的,不含有赋值和调用。但由于 JSON 是以 JavaScript 的一个子集为基础的,所以脚本内容会潜在地包含恶意代码。由于许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象,利用这点,攻击者就可以向这些库发送畸形的 JSON 对象,这样 eval() 函数就会执行这些恶意代码。为保护 JSON 的使用,可使用RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分。
JavaScript代码:
- var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
- text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
- eval('(' + text + ')');
6. JSONP的缺陷
JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,必须认真考虑它们。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
第二, JSONP 被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
相关推荐
### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一种新格式,而是一种利用动态创建`<script>`标签来绕过同源策略的技巧。由于浏览器允许不同源的`<script>`标签加载和执行,开发者可以利用这一点来实现...
### JSONP简介 JSONP全称是"JSON Padding",它利用了`<script>`标签可以跨域加载资源的特性。因为`<script>`标签不受同源策略的约束,所以可以通过动态创建`<script>`标签来请求不同源的数据。JSONP的核心思想是...
### JSONP简介 JSONP是一种解决跨域问题的技术,其核心思想是利用`<script>`标签不受同源策略限制的特性。当浏览器解析到`<script>`标签时,会发出一个GET请求,而无论该URL是否与当前页面的源相同。服务器返回的...
### JSONP简介 JSONP全称为“JSON with Padding”,其核心思想是动态插入`<script>`标签来加载一个外部源的JavaScript文件,这个文件返回的数据包裹在一个函数调用中,这样JavaScript代码就可以执行这个函数并处理...
**一、JSONP简介** JSONP(JSON with Padding)是一种规避同源策略的技术,它利用HTML `<script>`标签不受同源策略限制的特性,通过动态创建`<script>`标签来加载跨域的JavaScript代码。这种代码通常是一个函数调用...
### JSONP简介 JSONP的核心思想是动态创建`<script>`标签,并将其`src`属性指向提供服务的服务器端接口。这个接口会返回一个JavaScript函数调用,其中包含着我们需要的数据。由于JavaScript代码可以在任何域下执行,...
#### 一、JSONP简介 JSONP(JSON with Padding)是一种跨域数据请求的方法,通常用于解决浏览器同源策略限制下的数据获取问题。同源策略是浏览器的一种安全措施,它限制了一个网页脚本只能读取来自同一源的文档或...
JSON简介** JSON是一种轻量级的数据交换格式,它基于JavaScript的一个子集。由于其简洁性和易读性,被广泛用于服务器向客户端发送数据。JSON格式的数据可以直接被JavaScript解析,无需额外转换。一个简单的JSON对象...
1. **JSON简介** JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,基于JavaScript编程语言的简单数据结构和关联数组。它以文本形式存储和传输数据,易于人阅读和编写,也便于机器解析和生成。JSON...
#### 重要概念简介 - **JSONP**:一种允许从一个域加载另一个域中的脚本的技术,它通过动态创建`<script>`标签并插入到DOM中来实现。 - **跨域限制**:浏览器的安全策略之一,限制了从一个源加载的脚本获取或设置另...
**JSONP简介** JSONP全称为“JSON with Padding”,其核心思想是利用HTML中的`<script>`标签可以跨域加载资源的特性。JSONP允许服务端提供一个可执行的JavaScript函数,并返回JSON格式的数据作为参数,客户端通过...
### JSONP简介 JSONP(JSON with Padding)是一种简单的跨域请求技术,它通过使用标签的跨域特性来实现。因为标签可以跨域请求脚本资源,JSONP利用这一点,把需要的数据封装在JS脚本中返回,然后在客户端定义一个回...
1. Jsonp简介: Jsonp(JSON with Padding)是一种通过动态创建script标签跨域请求数据的技术。其原理是将JSON数据放入一个函数调用中,由于script标签不受同源策略限制,故可以实现跨域数据请求。但是它存在一定的...
一、JSONP简介 JSONP全称为"JSON Padding",并非真正的JSON标准,而是为了跨域数据交互而设计的一种技术。它通过动态创建`<script>`标签,将请求的URL作为src属性插入到HTML文档中,服务器返回的响应数据是...
hypertext表示标题文字链接广告,hyperTextWithTitle表示标题简介文字链接广告,banner表示单页图片广告,rotateBanner表示多页图片轮播广告。 如果接口返回失败,那么将返回msg字段,表示错误信息,requestId字段...
### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一个标准,而是一种解决浏览器同源策略限制的方法。由于JavaScript不能直接通过Ajax请求获取不同源的数据,JSONP提供了一种绕过这一限制的手段。 ### 工作...
### JSONP简介 JSONP是一种解决跨域问题的方法,它利用了HTML中的`<script>`标签不受同源策略限制的特点。JSONP的基本思想是,服务端提供一个动态生成的JavaScript文件,该文件包含一个函数调用,函数参数是JSON...
##### 3.1 CORS简介 CORS(Cross-Origin Resource Sharing,跨域资源共享)是W3C标准中定义的一种机制,允许浏览器与服务器通过HTTP头部协商,实现跨域请求。相比JSONP,CORS提供了更全面的安全性和灵活性。 #####...
#### 一、JSON简介 **JSON**(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 ##### JSON的基本数据类型包括: 1. **数字**:...
JSOP简介 JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而...