CN108200126A - 对象上传方法及装置 - Google Patents

Abstract

本说明书实施例提供一种对象上传方法及装置，在一种对象上传方法中，第一域的第一网页页面接收任一域的第二网页页面发送的对象上传消息。对该对象上传消息进行合法性验证，在合法性验证通过后，将对象上传消息中的对象上传至对应的服务器，并获取该对象的链接地址。向上述第二网页页面返回该对象的链接地址。

Description

对象上传方法及装置

技术领域

本说明书一个或多个实施例涉及计算机技术领域，尤其涉及一种对象上传方法及装置。

背景技术

目前，在用户访问不支持对象上传功能的网页页面(以下称为第一页面)的过程中，若有上传对象的需求，第一页面可以在接收到用户发送的待上传的对象之后，将该对象上传至支持对象上传功能的网页页面(以下称为第二页面)对应的服务器。上述第一页面与第二页面之间的通信过程往往是一种跨域、异步通信的过程。其中，跨域是指上述第一页面与第二页面的协议、域名或者端口不全部相同。异步是指第一页面在将对象上传至第二页面对应的服务器的过程中，不需要跳转页面。

因此，如何安全、可靠地实现页面之间的跨域、异步通信就称为要解决的问题。

发明内容

本说明书一个或多个实施例描述了一种对象上传方法及装置，以安全、可靠地实现页面之间的跨域、异步通信。

第一方面，提供了一种对象上传方法，包括：

第一网页页面接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息，所述第一网页页面属于第一域，所述第二网页页面属于任一域；所述对象上传消息包括待跨域上传的对象；

对所述对象上传消息进行合法性验证；

在对所述对象上传消息合法性验证通过后，向对应的服务器上传所述对象；

接收所述服务器返回的所述对象的链接地址；

调用所述API函数向所述第二网页页面发送所述对象的链接地址。

第二方面，提供了一种对象上传方法，包括：

第二网页页面接收对象跨域上传请求，所述对象跨域上传请求包括待跨域上传的对象；所述第二网页页面属于任一域；

调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息，所述对象上传消息用于指示所述第一网页页面在对所述对象上传消息合法性验证通过后将所述对象上传至对应的服务器，并获取所述对象的链接地址；所述第一网页页面属于第一域；

接收所述第一网页页面通过调用所述API函数返回的所述对象的链接地址。

第三方面，提供了一种对象上传装置，包括：

接收单元，用于接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息，所述第一网页页面属于第一域，所述第二网页页面属于任一域；所述对象上传消息包括待跨域上传的对象；

验证单元，用于对所述接收单元接收的所述对象上传消息进行合法性验证；

上传单元，用于在所述验证单元对所述对象上传消息合法性验证通过后，向对应的服务器上传所述对象；

所述接收单元，还用于接收所述服务器返回的所述对象的链接地址；

发送单元，用于调用所述API函数向所述第二网页页面发送所述对象的链接地址。

第四方面，提供了一种对象上传装置，包括：

接收单元，用于接收对象跨域上传请求，所述对象跨域上传请求包括待跨域上传的对象；所述第二网页页面属于任一域；

发送单元，用于调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息，所述对象上传消息用于指示所述第一网页页面在对所述对象上传消息合法性验证通过后将所述对象上传至对应的服务器，并获取所述对象的链接地址；所述第一网页页面属于第一域；

所述接收单元，还用于接收所述第一网页页面通过调用所述API函数返回的所述对象的链接地址。

本说明书一个或多个实施例提供的对象上传方法及装置，第一域的第一网页页面接收任一域的第二网页页面发送的对象上传消息。对该对象上传消息进行合法性验证，在合法性验证通过后，将对象上传消息中的对象上传至对应的服务器，并获取该对象的链接地址。向上述第二网页页面返回该对象的链接地址。由此可以看出，本说明书的实施例中，当任一域的网页页面想要上传对象至第一域的服务器时，可以先将该对象转发至第一域的网页页面，在该第一域的网页页面进行合法性验证后，再将该对象上传至第一域的服务器。由此，可以安全、可靠地实现页面之间的跨域、异步通信。

附图说明

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

图1为本说明书一个实施例提供的对象上传方法的应用场景示意图；

图2为本说明书一个实施例提供的对象上传方法流程图；

图3为本说明另一个实施例提供的对象上传方法流程图；

图4为本说明书再一个实施例提供的对象上传方法的信息交互图；

图5为本说明书一个实施例提供的对象上传装置示意图；

图6为本说明书另一个实施例提供的对象上传装置示意图。

具体实施方式

在介绍本说明书提供的方案之前，先解释两个概念：同域和跨域。为了保证信息的安全，所有浏览器都实行一个策略：网站协议、网站域名以及访问端口三者都相同的两个网页页面，才可以不受限制访问对方的本地存储(如，Cookie、LocalStorage和IndexDB等)、操作对方文档对象模型(Document Object Model，DOM)、向对方发送异步JavaScript和可扩展标记语言(Extensible Markup Language，XML)(Asynchronous Javascript And XML，AJAX)。本说明书中的域通过网站协议、网站域名以及访问端口来定义。需要说明的是，当两个网页页面不满足上述三者相同的条件时称为跨域，而当满足这三者相同的条件时称为同域。

下面结合附图，对本说明书提供的方案进行描述。

本说明书一个实施例提供的对象上传方法可以应用于如图1所示的场景中，图1中，第一网页(Web)页面属于第一域，该第一域也可以称为自定义域，即由商家自己定义网站协议、网站域名以及访问端口。其可以绑定在任何已有的域下。该第一网页页面具有对应的服务器，该服务器可以提供对象存储功能，或者说可以提供对象存储服务。此处的对象可以包括：文档、图片或者音视频等。图1中的第二网页页面、第三网页页面以及第N网页页面可以分别属于不同的其它域，该其它域可以为不同于第一域的任一域。

需要说明的是，为了能实现第一网页页面与其它网页页面(包括第二网页页面、第三网页页面或者第N网页页面)之间的跨域、异步通信，可以预先在第一网页页面以及其它网页页面进行相应的配置。如，可以在第一网页页面中进行相应的配置，以实现第一网页页面可以监听其它网页页面发送的消息。此外，还可以在其它网页页面中也进行相应的配置，以实现其它网页页面可以监听第一网页页面发送的消息。本说明书中，第一网页页面与其它网页页面之间可以是一对多的关系。

图1中，当第一网页页面与其它网页页面之间通过调用postMessage应用程序编程接口(Application Programming Interface，API)函数来实现跨域、异步消息的传输时，可以通过修改postMessage API函数中的“origin”参数，来进行上述配置。具体地，可以在第一网页页面中，将“origin”参数设为“*”。在具体监听过程中，当第一网页页面接收到其它网页页面发送的消息时，第一网页页面可以将其它网页页面的域与“origin”参数的参数值进行匹配，若匹配成功，则监听该消息。否则不监听。需要说明的是，因为“*”是通配符，任一网页页面的域均能匹配成功，所以第一网页页面可以监听任一网页页面发送的消息。在其它网页页面中，将“origin”参数设为第一网页页面的域。其具体监听过程类似，在此不复赘述。

当然，在实际应用中，也可以通过其它方式来进行相应的配置，如，在第一网页页面中，不对消息的来源进行判断等。本说明书对此不复赘述。

图2为本说明书一个实施例提供的对象上传方法流程图。所述方法的执行主体可以为图1中的第一网页页面。如图2所示，所述方法具体可以包括：

步骤210，第一网页页面接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息。

其中，第一网页页面属于第一域。该第一域可以由商家自己定义，如，可以定义为：“fengdie.alipay.com”。第二网页页面属于任一域，如，该任一域例如可以为：“www.abc.cn”。也即本说明书实施例中的第一网页页面可以接收来自任一域的网页页面(也可以称为外域页面)发送的消息。

步骤210中的对象上传消息可以包括待跨域上传的对象，如，文档、图片或者音视频等。

在一种具体实现方式中，第一网页页面可以以隐藏的方式在第二网页页面中加载(也即第一网页页面绑定在了第二网页页面的域下)。具体地，第二网页页面通过生成一个高度为0、宽度为0的iframe标签(标签是创建网页页面的标记语言中的基本单位)加载第一网页页面。在该方式中，第一网页页面和第二网页页面运行在同一个终端上。如，同时运行在用户当前使用的电脑或者移动终端上。只不过终端上安装的浏览器只显示第二网页页面。用户直接可以交互的是第二网页页面，而第一网页页面对用户来说是不可见的。当用户想要通过第二网页页面上传对象时，也即在第二网页页面接收到用户发送的对象上传请求时，该第二网页页面会向隐藏的第一网页页面发送上述对象上传消息。

需要说明的是，第一网页页面与第二网页页面属于不同的域。也就是说，该两个网页页面之间的通信是跨域通信。在该跨域通信的过程中，第二网页页面可以通过调用能实现消息跨域传输的API函数，来向第一网页页面发送上述对象上传消息。在一个例子中，上述能实现消息跨域传输的API函数可以为postMessage API函数。

还需要说明的是，针对部分浏览器还未实现postMessage可以传递文件列表(Filelist)的情况，因为这部分浏览器通常可以直接传递字符串，所以在发送上述对象上传消息之前，第二网页页面可以对待上传的对象先转化为对应的字符串(也称为序列化)。以待上传的对象为图片为例来说，第二网页页面可以使用FileReader类里的readAsDataURL方法将图片转换成base64编码的字符串。可以理解的是，当对待上传的对象先进行序列化时，上述对象上传消息中包括序列化后的对象。相应的，第一网页页面在接收到对象上传消息之后，首先会判断该消息中的对象是否为序列化后的对象。如前述例子，首先会判断消息中的对象是否为base64编码的字符串。若是，则对该序列化后的对象进行反序列化，从而得到原来的对象。由此，实现了更好的兼容性。

而针对部分浏览器实现了postMessage可以传递Filelist的情况，则该两个网页页面之间可以直接进行对象传递(如，直接可以传递图片)，不需要做序列化。

步骤220，对对象上传消息进行合法性验证。

步骤230，在对对象上传消息合法性验证通过后，向对应的服务器上传对象。

为了安全性，第一网页页面在向对应的服务器上传对象之前，可以对上述对象上传消息进行合法性验证。在对象上传消息合法性验证通过后，再向对应的服务器上传对象。此处，对消息进行合法性验证属于传统常规技术，在此不复赘述。

在一种具体实现方式中，第一网页页面可以通过AJAX post()方法来向对应的服务器上传对象。

步骤240，接收服务器返回的对象的链接地址。

在一个例子中，服务器在存储该对象之后，可以向第一网页页面返回该对象的统一资源定位符(Uniform Resource Locator，URL)地址。

步骤250，调用API函数向第二网页页面发送对象的链接地址。

如前述例子，第一网页页面可以通过调用上述postMessage API函数来向第二网页页面返回对象的URL地址。第二网页页面在接收到对象的URL地址之后，可以向用户展示该URL地址。当接收到用户对该URL地址的点击指令时，可以向用户展示对应的对象。

综上，本说明书上述实施例提供的对象上传方法，当任一域的网页页面想要上传对象至第一域的网页页面的服务器时，可以先向第一域的网页页面发送对象上传消息。该第一域的网页页面可以对消息进行合法性验证，在合法性验证通过后，再将对象上传至对应的服务器。由此，保证了通信的安全性。此外，由于该方法只涉及两个跨域网页页面之间的通信，以及域内网页页面与服务器之间的通信，从而有方案设计简单的优点。

在实际应用中，可以将实现上述方案的流程封装在软件开发工具包(SoftwareDevelopment Kit，SDK)中。当任一域的网页页面想要具有对象上传功能时，可以先安装该SDK包。之后，该网页页面可以将用户要上传的对象传给SDK，SDK就可以返回对象的链接地址。该任一域的网页页面不需要感知服务器是什么，也不需要知道第一域的网页页面与对应的服务器之间如何发AJAX。

图3为本说明书另一个实施例提供的对象上传方法流程图。所述方法的执行主体可以为图1中的第二网页页面。如图3所示，所述方法具体可以包括：

步骤310，第二网页页面接收对象跨域上传请求。

此处的第二网页页面可以为任一域的的网页页面。该网页页面通过浏览器加载后可以直接与用户进行交互。以用户上传图片来说，上述跨域上传请求可以是在用户选择了要上传的图片，并点击发送按钮时发送的。

上述对象跨域上传请求可以包括待跨域上传的对象，如，上述图片、文档以及音视频等。

步骤320，调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息。

此处，第一网页页面可以以隐藏的方式在第二网页页面中加载(也即第一网页页面绑定在了第二网页页面所属的域下)。在一个例子中，上述能实现消息跨域传输的API函数可以为postMessage API函数。

需要说明的是，针对部分浏览器还未实现postMessage可以传递文件列表(Filelist)的情况，在发送上述对象上传消息之前，第二网页页面可以对待上传的对象先进行序列化。以待上传的对象为图片为例来说，第二网页页面可以使用FileReader类里的readAsDataURL方法将图片转换成base64编码的字符串。可以理解的是，当对待上传的对象先进行序列化时，上述对象上传消息中包括序列化后的对象。相应的，第一网页页面在接收到对象上传消息之后，首先会判断该消息中的对象是否为序列化后的对象，若是，则对该序列化后的对象进行反序列化，从而得到原来的对象。由此，实现了更好的兼容性。

而针对部分浏览器实现了postMessage可以传递Filelist的情况，则该两个网页页面之间可以直接进行对象传递(如，直接可以传递图片)，不需要做序列化。

步骤330，接收第一网页页面通过调用API函数返回的对象的链接地址。

第一网页页面可以通过调用上述postMessage API函数来向第二网页页面返回对象的URL地址。第二网页页面在接收到对象的URL地址之后，可以向用户展示该URL地址。当接收到用户对该URL地址的点击指令时，可以向用户展示对应的对象。

下面结合图4，以用户上传图片至××域图片服务器为例，对本说明书给出的方案作进一步详细描述：

需要说明的是，在执行图4所示的各步骤之前，可以先执行如下初始化操作：在外域页面进行相应的配置，以使外域页面可以监听××域页面发送的消息，如，可以将postMessage API函数中的“origin”参数设为××域页面的域名。此外，在××域页面也进行相应的配置，以使××域页面可以监听全域的页面发送的消息，如，可以将postMessageAPI函数中的“origin”参数设为“*”。在执行完上述初始化操作之后，就可以执行如下步骤了。

步骤410，外域页面接收用户选择的图片。

步骤420，外域页面使用FileReader类里的readAsDataURL方法将图片转换成base64编码的字符串。

步骤430，外域页面调用postMessage API函数向××域页面发送字符串。

步骤440，××域页面将字符串转化为图片。

步骤450，××域页面通过AJAX post()方法向××域图片服务器上传图片。

步骤460，××域图片服务器向××域页面返回图片的URL地址。

步骤470，××域页面调用postMessage API函数向外域页面发送图片的URL地址。

与上述对象上传方法对应地，本说明书一个实施例还提供的一种对象上传装置，如图5所示，该装置包括：

接收单元501，用于接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息，该第一网页页面属于第一域，第二网页页面属于任一域；对象上传消息包括待跨域上传的对象。

此处的对象可以包括以下任意一种：文档、图片以及音视频。

验证单元502，用于对接收单元501接收的对象上传消息进行合法性验证。

上传单元503，用于在验证单元502对对象上传消息合法性验证通过后，向对应的服务器上传对象。

接收单元501，还用于接收服务器返回的对象的链接地址。

发送单元504，用于调用API函数向第二网页页面发送对象的链接地址。

可选地，该装置还可以包括：

判断单元505，用于判断对象是否已被序列化。

处理单元506，用于对对象进行反序列化。

上传单元503具体可以用于：向对应的服务器上传反序列化后的对象。

本说明书上述实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本说明书一个实施例提供的装置的具体工作过程，在此不复赘述。

本说明书一个实施例提供的对象上传装置，接收单元501接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息。验证单元502对对象上传消息进行合法性验证。在对对象上传消息合法性验证通过后，上传单元503向对应的服务器上传对象。接收单元501接收服务器返回的对象的链接地址。发送单元504调用API函数向第二网页页面发送对象的链接地址。由此，可以安全、可靠地实现网站之间的跨域、异步通信。

与上述对象上传方法对应地，本说明书一个实施例还提供的一种对象上传装置，如图6所示，该装置包括：

接收单元601，用于接收对象跨域上传请求，该对象跨域上传请求包括待跨域上传的对象；该第二网页页面属于任一域。

发送单元602，用于调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息，该对象上传消息用于指示第一网页页面在对所述对象上传消息合法性验证通过后将对象上传至对应的服务器，并获取对象的链接地址；该第一网页页面属于第一域。

接收单元601，还用于接收第一网页页面通过调用API函数返回的对象的链接地址。

本说明书上述实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本说明书一个实施例提供的装置的具体工作过程，在此不复赘述。

本说明书一个实施例提供的对象上传装置，可以安全、可靠地实现网站之间的跨域、异步通信。本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。

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

Claims (8)

1.一种对象上传方法，其特征在于，包括：

第一网页页面接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息，所述第一网页页面属于第一域，所述第二网页页面属于任一域；所述对象上传消息包括待跨域上传的对象；

对所述对象上传消息进行合法性验证；

在对所述对象上传消息合法性验证通过后，向对应的服务器上传所述对象；

接收所述服务器返回的所述对象的链接地址；

调用所述API函数向所述第二网页页面发送所述对象的链接地址。

2.根据权利要求1所述的方法，其特征在于，在所述向对应的服务器上传所述对象之前，还包括：

判断所述对象是否已被序列化；

若是，则对所述对象进行反序列化；

所述向对应的服务器上传所述对象，包括：

向对应的服务器上传反序列化后的所述对象。

3.根据权利要求1或2所述的方法，其特征在于，所述对象包括以下任意一种：文档、图片以及音视频。

4.一种对象上传方法，其特征在于，包括：

第二网页页面接收对象跨域上传请求，所述对象跨域上传请求包括待跨域上传的对象；所述第二网页页面属于任一域；

调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息，所述对象上传消息用于指示所述第一网页页面在对所述对象上传消息合法性验证通过后将所述对象上传至对应的服务器，并获取所述对象的链接地址；所述第一网页页面属于第一域；

接收所述第一网页页面通过调用所述API函数返回的所述对象的链接地址。

5.一种对象上传装置，其特征在于，包括：

接收单元，用于接收第二网页页面通过调用能实现消息跨域传输的应用程序编程接口API函数发送的对象上传消息，所述第一网页页面属于第一域，所述第二网页页面属于任一域；所述对象上传消息包括待跨域上传的对象；

验证单元，用于对所述接收单元接收的所述对象上传消息进行合法性验证；

上传单元，用于在所述验证单元对所述对象上传消息合法性验证通过后，向对应的服务器上传所述对象；

所述接收单元，还用于接收所述服务器返回的所述对象的链接地址；

发送单元，用于调用所述API函数向所述第二网页页面发送所述对象的链接地址。

6.根据权利要求5所述的装置，其特征在于，还包括：

判断单元，用于判断所述对象是否已被序列化；

处理单元，用于对所述对象进行反序列化；

所述上传单元具体用于：

向对应的服务器上传反序列化后的所述对象。

7.根据权利要求5或6所述的装置，其特征在于，所述对象包括以下任意一种：文档、图片以及音视频。

8.一种对象上传装置，其特征在于，包括：

接收单元，用于接收对象跨域上传请求，所述对象跨域上传请求包括待跨域上传的对象；所述第二网页页面属于任一域；

发送单元，用于调用能实现消息跨域传输的应用程序接口API函数向第一网页页面发送对象上传消息，所述对象上传消息用于指示所述第一网页页面在对所述对象上传消息合法性验证通过后将所述对象上传至对应的服务器，并获取所述对象的链接地址；所述第一网页页面属于第一域；

所述接收单元，还用于接收所述第一网页页面通过调用所述API函数返回的所述对象的链接地址。