CN105991599B - Jsonp请求方法及装置 - Google Patents

Abstract

本申请公开了一种JSONP请求方法及装置，其中方法包括：第一域页面所在浏览器确定第一域页面需要调用第二域页面资源；所述浏览器在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；所述浏览器通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；所述浏览器通过第三域页面接收所述服务器返回的第二域页面资源；所述浏览器通过第三域页面将第二域页面资源提供至第一域页面。本申请可以保证JSONP请求过程中访问者的页面的安全性，可以节省网络带宽资源和维护成本，能够支持各种类型的浏览器。

Description

JSONP请求方法及装置

技术领域

本申请涉及网页技术领域，尤其涉及JSONP请求方法及装置。

背景技术

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript(Standard ECMA-2623rd Edition-December 1999)的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C，C++，C#，Java，JavaScript，Perl，Python等)。这些特性使JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。

JSONP(JSON with Padding)是JSON的一种“使用模式”，可以让网页从别的网域要资料，可用于解决主流浏览器的跨域数据访问的问题。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。浏览器的同源策略，即只有相同域名、协议、端口的两个站点才能互相访问DOM。由于同源策略，一般来说位于server1.example.com的网页无法与不是server1.example.com的服务器沟通，而HTML的<script>元素是一个例外。利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON资料，而这种使用模式就是所谓的JSONP。用JSONP抓到的资料并不是JSON，而是任意的JavaScript，用JavaScript直译器执行而不是用JSON解析器解析。

JSONP是一种常见的请求的方式，但因为JSONP访问实际是需要在访问者的页面上插入被访问者的脚本资源，而如果这些脚本资源被修改成为不安全的代码则会让访问者受到攻击，所以使用JSONP存在一定的风险。例如，跨网站脚本(Cross-site scripting，通常简称为XSS或跨站脚本或跨站脚本攻击)等。XSS攻击是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。XSS攻击通常用于利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java，VBScript，ActiveX，Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。

这种情况常见于运营活动需要访问第三方JSONP资源，当第三方网站收到攻击后，发起访问的站点也将受到攻击。例如，当被访问的JSONP资源站点受到攻击，则很容易让发起访问的站点受到攻击(用户cookie被盗等)。如A站点发起JSONP请求B站点，当B站点的JSONP资源被修改成为有危害性的代码，这些代码会通过JSONP请求在A站点页面上执行，从而让A站点收到攻击。

现有技术中对于JSONP请求的安全性，采用制定MIME-type("application/json-p"and/or"text/json-p")的方式，让浏览器知道请求的类型是JSONP，再让浏览器去检测是否是这样的格式：

functionName({JSON})；

obj.functionName({JSON})；

obj["function-name"]({JSON})；

然而，这种制定MIME-type的方式需要浏览器支持，但是现有浏览器支持的并不好，而老的浏览器更是无法支持。同时，需要JSONP服务器修改MIME-type类型。

现有技术中还提供一种代理服务器的方式来保证JSON请求的安全性，该方式采用代理服务器去执行JSONP请求，之后由代理服务器验证请求返回的数据格式，验证通过后再将返回数据提供给访问者。然而，这种以服务器作为代理发起JSONP请求的方式，需要一个服务器去请求JSONP，之后验证返回的内容，验证通过后返回给发起调用的页面，将额外占用网络带宽，耗费网络资源，提高维护成本。

发明内容

在本申请的一个实施例中提供一种JSONP请求方法，用以保证JSONP请求过程中访问者的页面的安全性，该方法包括：

第一域页面所在浏览器确定第一域页面需要调用第二域页面资源；

所述浏览器在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；

所述浏览器通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；

所述浏览器通过第三域页面接收所述服务器返回的第二域页面资源；

所述浏览器通过第三域页面将第二域页面资源提供至第一域页面。

在本申请的另一实施例中提供一种JSONP请求装置，用以保证JSONP请求过程中访问者的页面的安全性，该装置应用于第一域页面所在浏览器，该装置包括：

调用确定模块，用于确定第一域页面需要调用第二域页面资源；

页面嵌入模块，用于在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；

请求发起模块，用于通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；

数据接收模块，用于通过第三域页面接收所述服务器返回的第二域页面资源；

数据传输模块，用于通过第三域页面将第二域页面资源提供至第一域页面。

本申请的实施例中，在第一域页面需要调用第二域页面资源时，第一域页面所在浏览器在第一域页面嵌入与第一域页面不同源的第三域页面，通过第三域页面向第二域页面对应服务器发起调用第二域页面资源的JSONP请求，再通过第三域页面接收第二域页面资源并跨域传输第二域页面资源至第一域页面，使第一域页面避免执行第二域页面资源可能的攻击性脚本，保证了第一域页面的安全性；在此过程中，JSONP请求的发起方仍是第一域页面所在浏览器，无需单独建立一个代理服务器去发起JSONP请求，不必额外占用网络带宽和耗费网络资源，节省了维护成本；并且能够支持各种类型的浏览器，也不需要JSONP服务器修改MIME-type类型。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为现有技术中常规的JSONP调用流程示例图；

图2为本申请实施例中JSONP调用流程的示例图；

图3为本申请实施例中JSONP请求方法的流程图；

图4为本申请实施例中JSONP请求装置的示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本申请实施例做进一步详细说明。在此，本申请的示意性实施例及其说明用于解释本申请，但并不作为对本申请的限定。

本申请实施例提供一种安全的JSONP请求方法，避免JSONP请求可能带来的攻击(XSS攻击等，这种情况常见于运营活动需要访问第三方JSONP资源，当第三方网站收到攻击后，发起访问的站点也将受到攻击)。下面通过对比现有技术详细说明本申请的JSONP请求方法。

图1为现有技术中常规的JSONP调用流程示例图。如图1所示，本例中JSONP调用流程可以包括：

步骤101、A域页面所在浏览器确定A域页面需要通过JSONP方式调用B域页面资源；

步骤102、A域页面向B域页面对应服务器发起调用B域页面资源的JSONP请求；该JSONP请求由A域页面所在浏览器通过A域页面发起；

步骤103、B域页面对应服务器向A域页面返回B域页面资源；

步骤104、A域页面获得B域页面资源。

图1所示流程中，A域页面直接向B域页面对应服务器发起调用B域页面资源的JSONP请求，在此过程中，A域页面将执行B域页面资源脚本，若B域页面资源脚本中包含攻击性脚本，则A域页面将受到攻击。本例中，若使用代理服务器的方式避免A域页面受到攻击，则需单独建立一代理服务器，由代理服务器代替A域页面向B域页面对应服务器发起JSONP请求，当B域页面对应服务器向代理服务器返回B域页面资源后，代理服务器验证返回的数据格式，验证通过后再将返回数据提供给A域页面，验证不通过则报错。虽然代理服务器的方式避免了A域页面因执行B域页面资源脚本而受到攻击，并以验证的方式在一定程度上保证了数据安全，但是需要单独建立一服务器作为代理来完成整个JSONP请求过程，服务器发起请求、接收数据等均需要额外占用网络带宽，耗费网络资源，这也使得维护成本大大提高。

下面再来看本申请的JSONP调用流程示例。

图2为本申请中JSONP调用流程的示例图。如图2所示，本例中JSONP调用流程可以包括：

步骤201、A域页面所在浏览器确定A域页面需要通过JSONP方式调用B域页面资源；

步骤202、A域页面所在浏览器在A域页面中嵌入C域页面；

步骤203、A域页面所在浏览器通过C域页面向B域页面对应服务器发起调用B域页面资源的JSONP请求；

步骤204、B域页面对应服务器向C域页面返回B域页面资源；

步骤205、C域页面获得B域页面资源；

步骤206、A域页面所在浏览器通过C域页面将B域页面资源传给A域页面；

步骤207、A域页面获得B域页面资源。

图2所示流程中，A域页面需要调用B域页面资源时，A域页面不直接向B域页面所在服务器发起调用B域页面资源的JSONP请求，而是由A域页面所在浏览器在A域页面中嵌入C域页面，通过C域页面向B域页面所在服务器发起调用B域页面资源的JSONP请求，C域页面在接收到B域页面资源后，再向A域页面传送B域页面资源。在此过程中，A域页面不执行B域页面资源脚本，而是由发起JSONP请求的C域页面执行B域页面资源脚本，在C域页面与A域页面不同源的情况下，C域页面通过跨域数据传输将B域页面资源提供给A域页面，从而避免了A域页面因执行B域页面资源脚本而受到攻击。完成整个JSONP请求处理过程均是由A域页面所在浏览器进行，无需建立代理服务器，这样就无需额外占用网络带宽和耗费网络资源，节省了维护成本。

图2流程处理过程中需要保证的是，C域页面和A域页面不同源，这样才能利用浏览器的同源策略保护A域页面内容。图2流程可直接用于现有JSONP请求的应用中。通过在另外的域下建立一个中间代理页面(而不是代理服务器)来发起JSONP请求，让浏览器的同源策略保护实际调用者，流程指向过程如下：

实际调用者->中间代理页面进行JSONP请求->将数据给到实际调用者。

图2流程中的A域页面、B域页面、C域页面仅为一例，实施中可以应用于三个不同域的页面。为便于描述，将三个不同域的页面称为第一域页面、第二域页面和第三域页面，在第一域页面、第二域页面和第三域页面之间应用本申请的JSONP请求方法，给出本申请JSONP请求方法的流程，如图3所示，流程中可以包括：

步骤301、第一域页面所在浏览器确定第一域页面需要调用第二域页面资源；

步骤302、所述浏览器在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；

步骤303、所述浏览器通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；

步骤304、所述浏览器通过第三域页面接收所述服务器返回的第二域页面资源；

步骤305、所述浏览器通过第三域页面将第二域页面资源提供至第一域页面。

由图3所示流程可以得知，本申请实施例中，在第一域页面需要调用第二域页面资源时，第一域页面所在浏览器在第一域页面嵌入与第一域页面不同源的第三域页面，通过第三域页面向第二域页面对应服务器发起调用第二域页面资源的JSONP请求，再通过第三域页面接收第二域页面资源并跨域传输第二域页面资源至第一域页面，使第一域页面避免执行第二域页面资源可能的攻击性脚本，保证了第一域页面的安全性；在此过程中，JSONP请求的发起方仍是第一域页面所在浏览器，无需单独建立一个代理服务器去发起JSONP请求，不必额外占用网络带宽和耗费网络资源，节省了维护成本；并且能够支持各种类型的浏览器，也不需要JSONP服务器修改MIME-type类型。

具体实施时，第三域页面可以是静态HTML(HyperText Mark-up Language，超文本标记语言)页面，例如流程图2中的C域页面可以是一个通用的静态HTML页面。实施例中，第三域页面可以部署在CDN(Content Delivery Network，内容分发网络)上，这样便于加快第一域页面所在浏览器访问第三域页面时的速度。例如将流程图2中的C域页面部署为：a.alipayobjects.com/jsonp.html。

实施例中，第二域页面与第一域页面可以同源，或者，也可以不同源。无论第二域页面与第一域页面是否同源，只需第三域页面与第一域页面不同源，即可应用本申请的JSONP请求方法。

下需再举一实例说明本申请的JSONP请求方法。本例中，假设第一域页面www.alipay.com/index.html需要通过JSONP请求第二域页面www.abc.com/data中的资源，主要流程可以包括：

1、www.alipay.com/index.html所在浏览器在www.alipay.com/index.html中嵌入第三域页面，第三域页面与www.alipay.com/index.html不同源，例如创建一个隐藏iframe，设置iframe的地址为a.alipayobjects.com/jsonp.html#www.abc.com/data；

2、a.alipayobjects.com/jsonp.html通过获得url hash，获得需要请求的实际jsonp地址www.abc.com/data；

3、通过跨域数据传输将a.alipayobjects.com/jsonp.html的获取的数据传给www.alipay.com/index.html。

具体实施时，第三域页面与第一域页面间的跨域数据传输可以采用window.name方法，或者也可以采用postMessage方法等，window.name方法和postMessage方法仅为举例，实施时也可以根据实际需求采用其它的跨域数据传输方法。

采用window.name方法来进行跨域数据传输是基于：window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在于一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。下面举例说明如何通过window.name来跨域获取数据。

比如有一个www.example.com/a.html页面，需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。

data.html页面里的代码是给当前的window.name设置一个a.html页面想要得到的数据值。在a.html页面中，可以使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，需要把这个iframe的src设成跟a.html页面同一个域。

采用postMessage方法进行跨域数据传输时，调用postMessage方法的window对象是要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符*。需要接收消息的window对象，可以通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

基于同一发明构思，本申请实施例中还提供了一种JSONP请求装置，如下面的实施例所述。由于JSONP请求装置解决问题的原理与JSONP请求方法相似，因此JSONP请求装置的实施可以参见JSONP请求方法的实施，重复之处不再赘述。

图4为本申请实施例中JSONP请求装置的示意图，如图4所示，本申请实施例中JSONP请求装置可以包括：

调用确定模块401，用于确定第一域页面需要调用第二域页面资源；调用确定模块401是JSONP请求装置中负责确定需要进行JSONP调用的部分，可以是软件、硬件或二者的结合，例如可以是完成该调用确定功能的处理芯片等元器件；

页面嵌入模块402，用于在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；页面嵌入模块402是JSONP请求装置中负责嵌入页面的部分，可以是软件、硬件或二者的结合，例如可以是完成该页面嵌入功能的处理芯片等元器件；

请求发起模块403，用于通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；请求发起模块403是JSONP请求装置中负责发起JSONP请求的部分，可以是软件、硬件或二者的结合，例如可以是完成该请求发起功能的通信接口等；

数据接收模块404，用于通过第三域页面接收所述服务器返回的第二域页面资源；数据接收模块404是JSONP请求装置中负责接收JSONP请求返回的数据资源的部分，可以是软件、硬件或二者的结合，例如可以是完成该数据接收功能的通信接口等；

数据传输模块405，用于通过第三域页面将第二域页面资源提供至第一域页面；数据传输模块405是JSONP请求装置中负责进行跨域数据传输的部分，可以是软件、硬件或二者的结合，例如可以是完成该跨域数据传输功能的处理芯片等元器件。

在一个实施例中，第三域页面可以是静态HTML页面。

在一个实施例中，第三域页面可以部署于CDN上，这样可以使第一域页面所在浏览器直接访问第三域页面，加快访问速度。

在一个实施例中，数据传输模块405具体可以用于：

采用window.name方法或postMessage方法进行跨域数据传输，将第二域页面资源通过第三域页面提供至第一域页面。这里，window.name方法和postMessage方法仅为举例，实施时也可以根据实际需求采用其它的跨域数据传输方法。

在一个实施例中，第二域页面与第一域页面可以同源；或，第二域页面与第一域页面可以不同源。

综上所述，本申请实施例中，在第一域页面需要调用第二域页面资源时，第一域页面所在浏览器在第一域页面嵌入与第一域页面不同源的第三域页面，通过第三域页面向第二域页面对应服务器发起调用第二域页面资源的JSONP请求，再通过第三域页面接收第二域页面资源并跨域传输第二域页面资源至第一域页面，使第一域页面避免执行第二域页面资源可能的攻击性脚本，保证了第一域页面的安全性；在此过程中，JSONP请求的发起方仍是第一域页面所在浏览器，无需单独建立一个代理服务器去发起JSONP请求，不必额外占用网络带宽和耗费网络资源，节省了维护成本；并且能够支持各种类型的浏览器，也不需要JSONP服务器修改MIME-type类型。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述的具体实施例，对本申请的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施例而已，并不用于限定本申请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种JSONP请求方法，其特征在于，包括：

第一域页面所在浏览器确定第一域页面需要调用第二域页面资源；

所述浏览器在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；

所述浏览器通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；

所述浏览器通过第三域页面接收所述服务器返回的第二域页面资源；

所述浏览器通过第三域页面将第二域页面资源提供至第一域页面。

2.如权利要求1所述的方法，其特征在于，第三域页面为静态超文本标记语言HTML页面。

3.如权利要求1或2所述的方法，其特征在于，第三域页面部署于内容分发网络CDN上。

4.如权利要求1所述的方法，其特征在于，所述浏览器通过第三域页面将第二域页面资源提供至第一域页面，包括：

所述浏览器采用window.name方法或postMessage方法进行跨域数据传输，将第二域页面资源通过第三域页面提供至第一域页面。

5.如权利要求1所述的方法，其特征在于，第二域页面与第一域页面同源；或，第二域页面与第一域页面不同源。

6.一种JSONP请求装置，其特征在于，所述装置应用于第一域页面所在浏览器，所述装置包括：

调用确定模块，用于确定第一域页面需要调用第二域页面资源；

页面嵌入模块，用于在第一域页面嵌入第三域页面，其中，第三域页面与第一域页面不同源；

请求发起模块，用于通过第三域页面向第二域页面对应的服务器发起调用第二域页面资源的JSONP请求；

数据接收模块，用于通过第三域页面接收所述服务器返回的第二域页面资源；

数据传输模块，用于通过第三域页面将第二域页面资源提供至第一域页面。

7.如权利要求6所述的装置，其特征在于，第三域页面为静态HTML页面。

8.如权利要求6或7所述的装置，其特征在于，第三域页面部署于CDN上。

9.如权利要求6所述的装置，其特征在于，所述数据传输模块具体用于：

采用window.name方法或postMessage方法进行跨域数据传输，将第二域页面资源通过第三域页面提供至第一域页面。

10.如权利要求6所述的装置，其特征在于，第二域页面与第一域页面同源；或，第二域页面与第一域页面不同源。