注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

那些星星点点的微芒,终会成为燃烧生命的熊熊之光

 
 
 
 
 

日志

 
 

JSONP  

2012-11-16 17:57:06|  分类: 学习在路上 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
不得不说自己前端的知识真是有待提高...记录下先,回头再深入。

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

原理

为了理解这种模式的原理,先想像有一个回传 JSON 文件的 URL,而 JavaScript 程式可以用 XMLHttpRequest 跟这个 URL 要资料。假设我们的 URL 是http://server2.example.com/RetrieveUser?UserId=xxx 。假设小明的 UserId 是 1823,且当浏览器透过 URL 传小明的 UserId,也就是抓取http://server2.example.com/RetrieveUser?UserId=1823 ,得到:

   {"Name": "小明", "Id" : 1823, "Rank": 7} 

这个 JSON 资料可能是依据传过去 URL 的查询参数动态产生的。


这个时候,把 <script> 元素的 src 属性设成一个回传 JSON 的 URL 是可以想像的,这也代表从 HTML 页面透过 script 元素抓取 JSON 是可能的。

然而,一份 JSON 文件并不是一个 JavaScript 程式。为了让浏览器可以在 <script> 元素执行,从 src 里 URL 回传的必须是可执行的 JavaScript。在 JSONP 的使用模式里,该 URL 回传的是由函数呼叫包起来的动态生成 JSON,这就是JSONP 的“填充(padding)”或是“前辍(prefix)”的由来。

惯例上浏览器提供回调函数的名称当作送至服务器的请求中命名查询参数的一部份,例如:

 <script type="text/javascript"          src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=parseResponse">  </script> 

服务器会在传给浏览器前将 JSON 回应用这个前辍(或称作填充)包起来。浏览器得到的回应已不是单纯的资料叙述而是一个脚本。在本例中,浏览器得到的是:

   parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

安全
使用远端网站的 script 标签会让远端网站得以注入任何的内容至网站里。如果远端的网站有 JavaScript 注入漏洞,原来的网站也会受到影响。

相关案例
http://www.wooyun.org/bugs/wooyun-2010-012746
  评论这张
 
阅读(24)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017