JSONP

浏览器安全模型规定
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 JSON/BSON开发包
软件类型 开源软件
地区 不详
投 递 者 唐增
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

JSONP (JSON with Padding) 是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域获取资料。另一个解决这个问题的新方法是跨来源资源共享。

浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能在一个域中通信。从安全角度考虑,这个规定很合理;但是,也确实给分布式(面向服务、混搭等等本周提到的概念)Web开发带来了麻烦。

为了实现跨域通信,通常的解决方案有3种:

本地代理:
需要一些硬件设施(没有服务器的客户端无法运行),并且带宽和潜伏时间也要加倍(远程服务器-代理服务器-客户端)。

Flash:
远程主机中需要部署一个crossdomain.xml文件,而且,Flash作为一门专有技术,其前途尚不明朗;换句话说,开发人员很可能要学习一种目标不确定的编程语言。

Script标签:
无法确切知道内容是否有效,没有标准的实现方法,又可能被认为是一种“安全风险”。

 


在此,我建议使用一种新技术,也是一种独立于标准的方法,即通过script标签来跨域获取数据,名为JSON with Padding,或者就叫JSONP。JSONP的原理很简单,但需要服务器端给予相应配合。大致来说,JSONP的实现思路就是在客户端编程时作好使用JSON数据的准备,然后再通过圆括号将这些数据括起来以创建一条有效的JavaScript语句(可能是一次有效的函数调用)。

也就是说,客户端可以使用一个用于命名jsonp的查询参数来决定可以获取的数据。最简单的情况下,如果jsonp参数为空,则返回的数据就是被括在圆括号中的JSON。

下面,我们就以del.icio.us的JSON API为例,来说明JSONP的原理。该API有一个“script tag”变量(即,可以将下面的URL作为script标签的src属性值,用以加载del.icio.us这个API提供的数据。——译者注)如下所示:

http://del.icio.us/feeds/json/bob/mochikit+interpreter:

  1. if(typeof(Delicious) == 'undefined') Delicious = {};
  2. Delicious.posts = [{
  3. "u": "http://mochikit.com/examples/interpreter/index.html",
  4. "d": "Interpreter - JavaScript Interactive Interpreter",
  5. "t": [
  6. "mochikit","webdev","tool","tools",
  7. "javascript","interactive","interpreter","repl"
  8. ]
  9. }]

如果用JSONP的方式来表示,那么与此具有相同语义的URL应该是这样的:

http://del.icio.us/feeds/json/bob/mochikit+interpreter?
jsonp=if(typeof(Delicious)%3D%3D%27undefined%27)
Delicious%3D%7B%7D%3BDelicious.posts%3D

单纯看这个URL似乎没有什么,但我们可以要求服务器在数据有效时给出通知。因此,我可以编写一个用于跟踪数据的小系统:

  1. var delicious_callbacks = {};
  2. function getDelicious(callback, url) {
  3. var uid = (new Date()).getTime();
  4. delicious_callbacks[uid] = function () {
  5. delete delicious_callbacks[uid];
  6. callback();
  7. };
  8. url += "?jsonp=" + encodeURIComponent("delicious_callbacks[" + uid + "]");
  9. // 手工输入代码,向文档中插入script标签
  10. };
  11.  
  12. getDelicious(doSomething, "http://del.icio.us/feeds/json/bob/mochikit+interpreter");

根据以上假设,用于获取数据的URL应该如下所示:
http://del.icio.us/feeds/json/bob/mochikit+interpreter?jsonp=delicious_callbacks%5B12345%5D

  1. delicious_callbacks[12345]([{
  2. "u": "http://mochikit.com/examples/interpreter/index.html",
  3. "d": "Interpreter - JavaScript Interactive Interpreter",
  4. "t": [
  5. "mochikit","webdev","tool","tools",
  6. "javascript","interactive","interpreter","repl"
  7. ]
  8. }])

可见,由于使用圆括号括住了返回的数据,这就相当于把一个JSONP请求转化成了一次函数调用,或者得到了一个纯粹的JSON直接量。服务器所要配合做的,就是在JSON数据的开头添加一小段文本(即回调函数的名称。——译者注)并将JSON数据放在括号中!

当然,接下来最好是使用Mochikit、Dojo等框架来抽象JSONP,从而让自己省去动手编写DOM以插入script标签的麻烦。

没错,JSONP只是解决了标准化的问题。假如远程主机想通过script标签向页面中注入恶意代码,而不是返回JSON数据,那么页面安全可能会 随时受到威胁。不过,一旦实现了JSONP,那么对开发人员来说肯定是一件省时省力的大好事,在此基础上各种一般化的抽象、教程及文档也会应运而生的。

  • 一、JSONP的由来 1、Ajax直接请求普通文件存在跨域无权限访问的问题,不管是静态页面、动态页面、web服务,只要是跨域请求,一律不准。 2、不过我们发现,web页面调用js文件则不受跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如<\script>、<\img>、<\iframe>)。 3、于是可以判断,当前阶段如果想通过纯web端跨域访问数据就只有一种

  • 一、JSONP的诞生 首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, <script>标签的src属性是可以跨域的 把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了? json刚好被js支持(object) 调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码) 这种获取远程数据的方式看起来非常像ajax,但其实并不一样 便于

  • JSONP 简介 JSONP 不是一门编程语言,也不是什么特别的技术,它更像一个漏洞,程序员可以利用这个漏洞,实现跨域(可以简单理解为跨域名)传输数据。虽然 JSONP 与 JSON 看起来很像,但它们却是完全不同的,本节我们就来简单介绍以下 JSONP。 在介绍 JSONP 之前,先来介绍一下浏览器的同源策略。 同源策略 同源策略是由 Netscape(网景)提出的一个著名的安全策略,所有支持

  • JSONP 教程 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。 什么是同源策略?它是由Netscape提出的一个著名的安全策略,现在所有支持 JavaScript

  • 什么是JSONP 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。   1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;   2、不过我们又发现,Web页面上调用js文件时则不受是否

  • jsonp的作用,大家都知道jsonp是用来跨域的,那么什么是跨域呢?跨域指的是不同源下面的脚本不能调用其他源下面的对象。这受制于浏览器的同源策略。 1.同源策略以及源的定义 同源策略指的就是不同源的客户端脚本在没有授权的情况下无法访问其他源下面的资源,比如你再baidu.com下面使用ajax请求qq.com的数据会报错的。因为两个网站是不同源的。 源指的就是域名、协议和端口号。只有在三者都相同

  • 一、什么是Jsonp     JSONP是一种非官方跨域数据交互协议。 二、Ajax请求 var param = new Object(); $.ajax({ url: "**、", type: "POST", dataType: "jsonp", //json不支持跨域请求,只能使用jsonp data: para

  • $.jsonp({                 url: "http://localhost:8080/fileapp/fileId.action",                 callbackParameter: "callback",                 success: function (data) {                 alert("success-[

  • 最近有项目组的大佬,问到了json于jsonp的区别,一脸懵的我不知道jsonp,在此将自己对于它的学习记录一下,希望会对搭建有帮助,好了废话不多说了,直接步入正题: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决。 但到目前为止

  • 一、JSONP的诞生 首先,因为ajax无法跨域,然后开发者就有所思考 其次,开发者发现, <script>标签的src属性是可以跨域的 把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了? json刚好被js支持(object) 调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码) 这种获取远程数据的方式看起来非常像ajax,但其实并不一样 便于

  • JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料

  • 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。 2、不过我们又发现,Web页面上调用js文

 相关资料
  • 浏览器模型概述 window 对象 Navigator 对象,Screen 对象 Cookie XMLHttpRequest 对象 同源限制 CORS 通信 Storage 接口 History 对象 Location 对象,URL 对象,URLSearchParams 对象 ArrayBuffer 对象,Blob 对象 File 对象,FileList 对象,FileReader 对象 表单,F

  • 浏览保护 启动安全浏览后,在允许内容开始加载前,所有的URL都会被检查。URL通过两个列表进行检查:恶意软件和钓鱼网站。根据匹配到的列表,我们会在一个中转页面显示不同的警告页面。 检查安全浏览数据库是一个多步骤的过程。 URL首先会被哈希,然后会用内存中前缀列表进行同步的检查。 如果前缀得到匹配,会向安全浏览服务器发起一个异步请求,拉取这个前缀的全量哈希列表。 一旦这个列表返回,完整的哈希会与列表

  • 瑞星卡卡安全浏览器是一款基于Firefox 3开源代码而设计的浏览器,为用户提供了最佳的Web浏览体验。 性能表现:由于建立在功能强大的新的Gecko 1.9引擎之上,瑞星卡卡安全浏览器整体表现更安全、更易用、更个性化。 安全特性:瑞星卡卡安全浏览器的安全性得到了进一步提升。新的防木马、防网络钓鱼功能让你远离病毒、蠕虫、木马以及间谍软件的威胁。 可定制化:每个人都有自己特殊的上网习惯,瑞星卡卡安全

  • ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么 BOM(浏览器对象模型)则无疑才是真正的核心。BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。多年来,缺少事实上的规范导致 BOM 有很多问题,因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中 JavaScript 最基本的部分标准化,已经将

  • JavaScript 语言最初是为 Web 浏览器创建的。此后,它已经发展成为一种具有多种用途和平台的语言。 平台可以是一个浏览器,一个 Web 服务器,或其他 主机(host),甚至可以是一个“智能”咖啡机,如果它能运行 JavaScript 的话。它们每个都提供了特定于平台的功能。JavaScript 规范将其称为 主机环境。 主机环境提供了自己的对象和语言核心以外的函数。Web 浏览器提供了

  • 为了安全地运行CGI等程序,Ruby设置了安全结构。 Ruby的安全模型由“对象的污染”和“安全级别”构成。 对象的污染 Ruby有时会认为对象“遭到了污染”,这主要有两种用途。 第一,以不安全的输入为基础制成的对象就是“受污染”的对象,不能用作“危险操作”的参数。这主要是为了防止恶意数据导致程序作出一些意外的危险动作。 第二,可以使安全对象(未遭污染的对象)得到保护,免遭不安全对象的威胁。若安全

  • 我在Firefox中远程使用Webdriver。 我想全屏打开我的浏览器。浏览器是全屏打开的,但立即最小化,并移动到其他程序,在我的操作系统上打开。当我在本地运行我的webdriver时,broser是全屏打开的,并且不会最小化(它留在浏览器中,不会移动到其他程序)。我希望我的浏览器会在全屏打开,并且保持在浏览器中,即使我运行我的测试Remottley。 原因是我使用了Java机器人,我必须在浏览

  • 浏览器工作原理。 目录 排版引擎 ​渲染​ JavaScript 引擎 ​并发模型​ ​内存管理​ ​执行环境​ 网络通信 ​缓存​ ​Cookie​ ​跨源资源共享​ 安全 ​同源策略​ Web APIs ​事件​ ​存储​ ​定时器​ ​Fetch​ 文档操作 数据通信 图形处理 音视频处理