JSONP -- one way of cross-domain data sharing

要说清楚JSONP首先得说Same-origin policy,同源策略。为了安全起见,两个不同得网站之间是不能访问对方的数据的,比如A站的cookies不能被B站访问。但是如果这两个网站是相同domain的,比如是同一个公司的网站,那彼此访问是没有问题的,因为是可信任的。就像同domain的OOS(单点登录)的实现可以用cookie来实现一样。

这样的domain,或者说Same-origin里面的origin指的是 URI
scheme
hostname,
and port number,比如http://和https://是不同的domain,协议不同,server.example.com和www.example.com是不同的domain,必须完全匹配,www.example.com和www.example.com:8080是不同的domain,端口不同。

毋庸置疑,所有的现代浏览器都已经实现了这一原则。一个网页可以自由的嵌入来自其他domain的图片,脚本,视频(html5),flash等(一般理解为带src的标签),但是不能使用AJAX请求去向其他domain请求数据,试想如果你可以在你的网站中调用一个网银的接口,改变他们的数据,那是多么不安全。

但是有的时候就是有这种需求,需要跨域请求数据,比如你想要使用google的一些公共服务,google map API,或者需要实现跨域的OOS。在不能向对方直接请求数据的时候怎么办呢?曾经有这么一个牛人他就想到了用javascript,因为跨域的javascript是可以被嵌入到你的页面的,但是这个javascript必须在他自己的domain完成数据的请求再把结果返回给你的domain,所以他返回给你的只能是某种数据格式--JSON

试想如下的script会返回一个JSON:

<script type="application/javascript"
         src="http://server.example.com/Users/1234">
</script>
{
    "Name": "Foo",
    "Id": 1234,
    "Rank": 7
}

通过这个script成功的从另外一个domain获得了那个domain里面一个用户的信息,但是这样显然是不够的,把一个JSON片段放进一个html页面中,没有任何javascript变量来接收它是不行的,浏览器会报错。

<script type="application/javascript"
        src="http://server.example.com/Users/1234?callback=parseResponse">
</script>

客户端必须提供一个回调方法来接收这些数据,于是JSON+padding就被叫做JSONP了。它实现了一种跨域共享数据的方式。

比如baidu地图API有个方法可以返回某个地方的坐标是多少:

bdary.get("四川省成都市天府新区")

显然这个计算坐标的过程发生再百度的服务器而不可能是你自己的服务器,因为你没有相关的方法计算。那百度返回的就是一个JSON的数据,所以你需要提供一个回调方法:

bdary.get("<span style="font-family: Arial, Helvetica, sans-serif;">四川省成都市天府新区</span><span style="font-family: Arial, Helvetica, sans-serif;">", function(rs){       </span>
//回调方法,根据返回的数据实现你自己的业务逻辑
				});   

一个跨域OOS的设想,比如我有个网站:www.example.com,我想要实现和csdn账号的单点登录,也就是说只要用户在当前浏览器登录了csdn就不用再登录,直接可以使用我的网站,并且用的就是csdn的账号信息。当然这得csdn愿意,它如果愿意得话它会提供一个JSONP的调用给我,我调用它的方法之后就可以得到当前的登录状态以及已经登录的用户的信息。

JSONP是有安全隐患的,这很正常,它并不是一个行业标准,只是人们为了解决跨域访问的问题而自己想出的办法。曾经有人提议定义标准来弥补这一缺陷,但是提议被放弃了,因为当时有了跨域访问的另外一个标准CORS。

所以JSONP并不是跨域访问的唯一方法,也不是一个完美的方式,但是它的确是简单好用的方式,并且安全隐患是可以编码解决的。

其他一些解决跨域数据访问的方式参见维基百科:

https://en.wikipedia.org/wiki/Same-origin_policy

本文的一些概念性论述也参考了维基百科。

时间: 2024-11-11 00:37:39

JSONP -- one way of cross-domain data sharing的相关文章

浅析Cross Origin Resource Sharing

在前面我们已经简单介绍了如何利用XMLHttpRequest Object来进行客户端与服务器之间的通信,但是,基于这种XMLHttpRequest Object的AJAX通信技术有一个局限,出于对于数据安全性的考虑,XMLHttpRequest只能够访问同一个站点的数据(相同的请求协议,相同的域名,相同的服务器端口).但是在日常的开发过程中,我们又的的确确有很多的地方需要跨越站点之间传输数据,比如银行网站,需要通过证监会或者金管局或者其他的第三方金融机构获取一些金融方面的信息,例如最新的金融规

前端开发各种cross之cross domain

作为一个苦逼前端开发工程师,不得不面对各种cross,比如面对五花八门的浏览器我们必须cross browser,面对各种终端,我们必须cross device,在这么多年的前端开发经历中,在不同的域之间穿越中,遭受各种折磨,所以这次和大家分享的是cross domain. 这次分享的cross domain,是包括所有跨域调用,无论是跨域获取数据,还是跨域跨frame调用,所以会分为两部分,这次会先分享跨域获取数据,跨域获取数据大概有以下方式. 1.jsonp方式这是最简单,也是最实用的跨域获

[cross domain] four approachs to cross domain in javascript

four approachs can cross domain in javascript 1.jsonp 2.document.domain(only in frame and they have one same parent domain) 3.window.name 4.window.postMessage(only in Html5) original website:http://www.cnblogs.com/2050/p/3191744.html

On Data Sharing Strategy for Decentralized Collaborative Visual-Inertial Simultaneous Localization and Mapping

张宁 On Data Sharing Strategy for Decentralized Collaborative Visual-Inertial Simultaneous Localization and Mapping Rodolphe Dubois, Alexandre Eudes, Vincent Fr´emont链接:https://pan.baidu.com/s/1DGEZtJ7H7eITfyyns7h06A 提取码:zvcu Abstract—This article intr

JavaScript Cross Domain

一.jsonp jQuery jsonp: 0> 动态script var script = document.createElement('script'); script.type = 'text/javascript; script.src = 'http://......?function_defined_on_server=my_callback_function'; document.head.appendChild(script); function my_callback_fun

Ajax 跨域请求-- Cross Domain

在认识 跨域 之前,先简单了解下域名和协议名,比如下面这个 URL http://mail.163.com/index.html http://              协议名,也就是HTTP超文本传输协议 mail                  服务器名 163.com           域名 mail.163.com    网站名 /                        根目录 index.html         根目录下的默认网页 1.什么是跨域请求? 请求的下一个资源

Ajax Post Cross Domain 跨域请求 WCF RestFull

前段时间做手机WebAPP, 但开发人员习惯在浏览器上先调试基本功能, 但这里就出现了跨域请求问题 当然如果你自己写服务, 自己写WebAPP 都是localhost 就不会跨域, 而且发布到手机上也不会跨域 关键来了!!!! 1. 先要确保你的js写的是对的 $.ajax({ url: url3, data: JSON.stringify({userName:uid,userPass:pwd}), contentType:"application/json; charset=utf-8&quo

Node.js 【CORS(cross origin resource sharing) on ExpressJS之笔记】

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); app.get('/', function(req,

Openresty 数据共享API.Data Sharing within an Nginx Worker

摘要自:https://github.com/openresty/lua-nginx-module/#data-sharing-within-an-nginx-worker 每nginx worker的数据共享 定义一个lua模块,在content_by_lua或者content_by_lua_block中require它. 建议只用于共享只读数据.如果一定要共享可变数据,注意确保写操作是非阻塞的. 如果需要所有worker共享的数据,可选择: ngx.shared.DICT 或者memcach