WO2019119974A1 - Object uploading method and device - Google Patents

Abstract

Embodiments of the present disclosure provide an object uploading method and a device. The object uploading method comprises: a first webpage in a first domain receiving an object uploading message sent by a second webpage in an arbitrary domain; verifying the validity of the object uploading message; after the message passes the validity verification, uploading an object in the object uploading message to a corresponding server; acquiring a link address of the object; and returning the link address of the object to the second webpage.

Description

Object uploading method and device Technical field

One or more embodiments of the present disclosure relate to the field of computer technologies, and in particular, to an object uploading method and apparatus.

Background technique

At present, in a process of a user accessing a webpage page (hereinafter referred to as a first page) that does not support the object uploading function, if there is a demand for uploading an object, the first page may receive the object to be uploaded sent by the user after receiving the object to be uploaded. The object is uploaded to a server corresponding to a web page supporting the object upload function (hereinafter referred to as a second page). The communication process between the first page and the second page is often a process of cross-domain and asynchronous communication. The cross-domain means that the protocol, the domain name, or the port of the first page and the second page are not all the same. Asynchronous means that the first page does not need to jump to the page during the process of uploading the object to the server corresponding to the second page.

Therefore, how to implement cross-domain and asynchronous communication between pages securely and reliably is called a problem to be solved.

Summary of the invention

One or more embodiments of the present specification describe an object uploading method and apparatus for securely and reliably implementing cross-domain, asynchronous communication between pages.

In a first aspect, an object uploading method is provided, including:

The first webpage page receives the object uploading message sent by the application programming interface API function that can implement cross-domain transmission of the message, where the first webpage page belongs to the first domain, and the second webpage page belongs to any Domain; the object upload message includes an object to be uploaded across domains;

Performing legality verification on the object uploading message;

After the validity of the uploading of the object is verified, the object is uploaded to the corresponding server;

Receiving a link address of the object returned by the server;

The API function is called to send a link address of the object to the second web page.

In a second aspect, an object uploading method is provided, including:

The second webpage page receives an object cross-domain upload request, where the object cross-domain upload request includes an object to be cross-domain uploaded; the second webpage page belongs to any domain;

Sending an object uploading API message to the first webpage page by using an application interface API function that can implement message cross-domain transmission, the object uploading message is used to indicate that the first webpage page is verified after the legality verification of the object uploading message is passed Uploading the object to a corresponding server, and acquiring a link address of the object; the first webpage page belongs to the first domain;

Receiving, by the first web page, a link address of the object returned by calling the API function.

In a third aspect, an object uploading apparatus is provided, including:

a receiving unit, configured to receive an object upload message sent by the second webpage page by using an application programming interface API function that can implement cross-domain transmission of the message, where the first webpage belongs to the first domain, and the second webpage belongs to the first webpage a domain; the object upload message includes an object to be uploaded across domains;

a verification unit, configured to perform legality verification on the object upload message received by the receiving unit;

a uploading unit, configured to upload the object to a corresponding server after the verification unit passes the validity verification of the object upload message;

The receiving unit is further configured to receive a link address of the object returned by the server;

And a sending unit, configured to invoke the API function to send a link address of the object to the second webpage page.

In a fourth aspect, an object uploading apparatus is provided, including:

a receiving unit, configured to receive an object cross-domain upload request, where the object cross-domain upload request includes an object to be uploaded across domains; the second web page belongs to any domain;

a sending unit, configured to send an application interface API function that can implement message cross-domain transmission, to send an object upload message to the first webpage, where the object uploading message is used to indicate that the first webpage page is legally uploaded to the object After the verification is passed, the object is uploaded to the corresponding server, and the link address of the object is obtained; the first webpage page belongs to the first domain;

The receiving unit is further configured to receive a link address of the object returned by the first webpage page by calling the API function.

The object uploading method and apparatus provided by one or more embodiments of the present specification, the first webpage page of the first domain receives an object uploading message sent by the second webpage page of any domain. The validity of the object upload message is verified. After the legality verification is passed, the object in the object upload message is uploaded to the corresponding server, and the link address of the object is obtained. Returning the link address of the object to the second web page. It can be seen that, in the embodiment of the present specification, when a webpage page of any domain wants to upload an object to a server of the first domain, the object may be first forwarded to the webpage of the first domain, where the first After the domain page of the domain is verified for legality, the object is uploaded to the server of the first domain. Thereby, cross-domain and asynchronous communication between pages can be realized safely and reliably.

DRAWINGS

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments will be briefly described below. It is obvious that the drawings in the following description are only some embodiments of the present invention, Those skilled in the art can also obtain other drawings based on these drawings without any creative work.

FIG. 1 is a schematic diagram of an application scenario of an object uploading method according to an embodiment of the present disclosure;

2 is a flowchart of an object uploading method provided by an embodiment of the present specification;

FIG. 3 is a flowchart of an object uploading method according to another embodiment of the present disclosure;

4 is an information interaction diagram of an object uploading method provided by another embodiment of the present specification;

FIG. 5 is a schematic diagram of an object uploading apparatus according to an embodiment of the present disclosure;

FIG. 6 is a schematic diagram of an object uploading apparatus according to another embodiment of the present specification.

Detailed ways

Before introducing the solutions provided in this specification, explain two concepts: the same domain and cross-domain. In order to ensure the security of information, all browsers implement a policy: the website protocol, the website domain name and the two web pages with the same access port, so that they can access the other party's local storage without restrictions (eg, Cookie, LocalStorage and IndexDB). Etc., operate the other document object model (DOM), send asynchronous JavaScript to the other party and Extensible Markup Language (XML) (Asynchronous Javascript And XML, AJAX). The fields in this manual are defined by website protocols, website domain names, and access ports. It should be noted that when two webpage pages do not satisfy the same conditions as the above three, they are called cross-domain, and when the same conditions of the three are met, they are called the same domain.

The solution provided in this specification will be described below with reference to the accompanying drawings.

The object uploading method provided by an embodiment of the present disclosure may be applied to the scenario shown in FIG. 1. In FIG. 1, the first webpage (Web) page belongs to the first domain, and the first domain may also be referred to as a custom domain. That is, the merchant itself defines the website agreement, the website domain name, and the access port. It can be bound to any existing domain. The first web page has a corresponding server, which can provide an object storage function, or can provide an object storage service. The objects here may include: documents, pictures, audio and video, and the like. The second webpage page, the third webpage page, and the Nth webpage page in FIG. 1 may belong to different other domains, respectively, and the other domains may be any domain different from the first domain.

It should be noted that, in order to enable cross-domain and asynchronous communication between the first webpage page and other webpage pages (including the second webpage page, the third webpage page, or the Nth webpage page), the first webpage page may be pre- Other web pages are configured accordingly. For example, the corresponding configuration may be performed in the first webpage page to enable the first webpage page to listen to messages sent by other webpage pages. In addition, corresponding configuration may also be performed in other webpage pages, so that other webpages can listen to messages sent by the first webpage. In this specification, the first web page may have a one-to-many relationship with other web pages.

In Figure 1, when the first web page and other web pages are used to implement cross-domain and asynchronous message transmission by calling the postMessage application programming interface (API) function, the "postMessage API function" can be modified. The origin parameter is used to perform the above configuration. Specifically, the "origin" parameter can be set to "*" in the first web page. In the specific monitoring process, when the first webpage receives the message sent by the other webpage, the first webpage may match the domain of the other webpage with the parameter value of the "origin" parameter, and if the matching is successful, the interception is performed. Message. Otherwise it will not be monitored. It should be noted that because "*" is a wildcard, the domain of any webpage page can be successfully matched, so the first webpage page can listen to the message sent by any webpage page. In other web pages, the "origin" parameter is set to the domain of the first web page. The specific monitoring process is similar and will not be repeated here.

Of course, in the actual application, the corresponding configuration may also be performed by other means, for example, in the first webpage page, the source of the message is not judged. This specification will not be repeated here.

FIG. 2 is a flowchart of an object uploading method according to an embodiment of the present disclosure. The execution body of the method may be the first web page in FIG. As shown in FIG. 2, the method may specifically include:

Step 210: The first webpage page receives an object upload message sent by the second webpage page by calling an application programming interface API function that can implement message cross-domain transmission.

The first webpage page belongs to the first domain. The first domain may be defined by the merchant itself, for example, may be defined as: "fengdie.alipay.com". The second web page belongs to any domain, for example, any of the domains may be: "www.abc.cn". That is, the first web page in the embodiment of the present specification can receive a message sent from a web page (also referred to as an outer domain page) of any domain.

The object upload message in step 210 may include an object to be uploaded across domains, such as a document, a picture, or an audio or video.

In a specific implementation, the first webpage page may be loaded in the second webpage page in a hidden manner (ie, the first webpage page is bound to the domain of the second webpage page). Specifically, the second web page loads the first web page by generating an iframe tag having a height of 0 and a width of 0 (the tag is a basic unit in a markup language for creating a web page). In this manner, the first web page and the second web page run on the same terminal. For example, it runs on the computer or mobile terminal currently used by the user. Only the browser installed on the terminal only displays the second web page. The second web page can be directly interacted by the user, and the first web page is invisible to the user. When the user wants to upload an object through the second webpage page, that is, when the second webpage page receives the object uploading request sent by the user, the second webpage page sends the object uploading message to the hidden first webpage page.

It should be noted that the first webpage page and the second webpage page belong to different domains. That is to say, the communication between the two web pages is cross-domain communication. In the process of the cross-domain communication, the second webpage page may send the object uploading message to the first webpage by calling an API function that can implement cross-domain transmission of the message. In one example, the above API function that enables message cross-domain transfer can be a postMessage API function.

It should also be noted that for some browsers, the postMessage can not pass the file list (Filelist), because this part of the browser can usually pass the string directly, so before sending the above object upload message, the second web page can The object to be uploaded is first converted to the corresponding string (also known as serialization). Taking the object to be uploaded as an example, the second web page can convert the image into a base64 encoded string using the readAsDataURL method in the FileReader class. It can be understood that when the object to be uploaded is first serialized, the object upload message includes the serialized object. Correspondingly, after receiving the object upload message, the first web page first determines whether the object in the message is a serialized object. As in the previous example, it is first determined whether the object in the message is a base64 encoded string. If so, the serialized object is deserialized to obtain the original object. This achieves better compatibility.

For some browsers, postMessage can pass the filelist. The two web pages can directly transfer objects (for example, can directly transfer images) without serialization.

Step 220: Perform legality verification on the object upload message.

Step 230: After verifying the validity of the object uploading message, upload the object to the corresponding server.

For security, the first web page may perform legality verification on the object upload message before uploading the object to the corresponding server. After the validity of the object upload message is verified, the object is uploaded to the corresponding server. Here, the verification of the legality of the message belongs to the conventional conventional technology, and will not be repeated here.

In a specific implementation manner, the first webpage page may upload an object to the corresponding server by using an AJAX post() method.

Step 240: Receive a link address of an object returned by the server.

In one example, after storing the object, the server may return a Uniform Resource Locator (URL) address of the object to the first web page.

Step 250, calling an API function to send a link address of the object to the second webpage page.

As in the foregoing example, the first web page may return the URL address of the object to the second web page by calling the postMessage API function described above. After receiving the URL address of the object, the second web page may display the URL address to the user. When the user receives a click command for the URL address, the corresponding object can be presented to the user.

In summary, the object uploading method provided in the foregoing embodiment of the present disclosure may first send an object upload message to a webpage of the first domain when the webpage of any domain wants to upload the object to the server of the webpage of the first domain. The webpage of the first domain can verify the validity of the message, and after the legality verification is passed, upload the object to the corresponding server. Thereby, the security of the communication is ensured. In addition, since the method only involves communication between two cross-domain web pages, and communication between web pages in the domain and the server, there is an advantage that the scheme is simple in design.

In practical applications, the process for implementing the above solution can be packaged in a software development kit (SDK). When the web page of any domain wants to have the object upload function, you can install the SDK package first. After that, the web page can transmit the object to be uploaded by the user to the SDK, and the SDK can return the link address of the object. The web page of any of the domains does not need to perceive what the server is, nor does it need to know how to send AJAX between the webpage of the first domain and the corresponding server.

FIG. 3 is a flowchart of an object uploading method according to another embodiment of the present specification. The execution body of the method may be the second web page in FIG. As shown in FIG. 3, the method may specifically include:

Step 310: The second webpage page receives the object cross-domain upload request.

The second web page here can be a web page of any domain. The web page can be directly interacted with the user after being loaded by the browser. In the case of a user uploading a picture, the above cross-domain upload request may be sent when the user selects a picture to upload and clicks the send button.

The above object cross-domain upload request may include an object to be uploaded across domains, such as the above picture, document, audio and video, and the like.

Step 320: Call an application interface API function that can implement message cross-domain transmission to send an object upload message to the first webpage page.

Here, the first webpage page may be loaded in the second webpage page in a hidden manner (ie, the first webpage page is bound to the domain to which the second webpage page belongs). In one example, the above API function that enables message cross-domain transfer can be a postMessage API function.

It should be noted that, in the case that some browsers have not implemented a file list (postlist), the second web page may serialize the object to be uploaded before sending the object upload message. Taking the object to be uploaded as an example, the second web page can convert the image into a base64 encoded string using the readAsDataURL method in the FileReader class. It can be understood that when the object to be uploaded is first serialized, the object upload message includes the serialized object. Correspondingly, after receiving the object upload message, the first webpage first determines whether the object in the message is a serialized object, and if so, deserializes the serialized object, thereby obtaining the original Object. This achieves better compatibility.

For some browsers, postMessage can pass the filelist. The two web pages can directly transfer objects (for example, can directly transfer images) without serialization.

Step 330: Receive a link address of an object returned by the first webpage page by calling an API function.

The first web page may return the URL address of the object to the second web page by calling the postMessage API function described above. After receiving the URL address of the object, the second web page may display the URL address to the user. When the user receives a click command for the URL address, the corresponding object can be presented to the user.

Referring to FIG. 4, the scheme given in this specification is further described in detail by taking the user uploading the image to the xxx domain image server as an example:

It should be noted that, before performing the steps shown in FIG. 4, the following initialization operations may be performed: performing corresponding configuration on the external domain page, so that the external domain page can listen to the message sent by the×× domain page, for example, the postMessage can be The "origin" parameter in the API function is set to the domain name of the ×× domain page. In addition, the corresponding configuration is also performed on the XX domain page, so that the XX domain page can listen to the message sent by the global page. For example, the "origin" parameter in the postMessage API function can be set to "*". After performing the above initialization operation, the following steps can be performed.

In step 410, the foreign domain page receives the picture selected by the user.

In step 420, the foreign domain page converts the image into a base64 encoded string using the readAsDataURL method in the FileReader class.

In step 430, the foreign domain page calls the postMessage API function to send a string to the XX domain page.

In step 440, the ×× domain page converts the string into a picture.

Step 450: The ×× domain page uploads a picture to the×× domain picture server by using the AJAX post() method.

In step 460, the ×× domain picture server returns the URL address of the picture to the ×× domain page.

In step 470, the ×× domain page calls the postMessage API function to send the URL address of the image to the outbound domain page.

Corresponding to the above object uploading method, an object uploading device is also provided in an embodiment of the present specification. As shown in FIG. 5, the device includes:

The receiving unit 501 is configured to receive an object upload message sent by the second webpage page by using an application programming interface API function that can implement cross-domain transmission of the message, where the first webpage belongs to the first domain, and the second webpage belongs to any domain. The object upload message includes objects to be uploaded across domains.

The objects here can include any of the following: documents, pictures, and audio and video.

The verification unit 502 is configured to perform legality verification on the object upload message received by the receiving unit 501.

The uploading unit 503 is configured to upload an object to the corresponding server after the verification unit 502 verifies the validity of the object upload message.

The receiving unit 501 is further configured to receive a link address of an object returned by the server.

The sending unit 504 is configured to invoke an API function to send a link address of the object to the second webpage page.

Optionally, the device may further include:

The determining unit 505 is configured to determine whether the object has been serialized.

The processing unit 506 is configured to deserialize the object.

The uploading unit 503 is specifically configured to: upload the deserialized object to the corresponding server.

The functions of the functional modules of the apparatus in the foregoing embodiments of the present invention can be implemented by the steps of the foregoing method embodiments. Therefore, the specific working process of the apparatus provided in one embodiment of the present specification is not described herein.

In an object uploading apparatus provided by an embodiment of the present specification, the receiving unit 501 receives an object uploading message sent by the second webpage page by calling an application programming interface API function capable of realizing message cross-domain transmission. The verification unit 502 performs legality verification on the object upload message. After the validity verification of the object upload message is passed, the uploading unit 503 uploads the object to the corresponding server. The receiving unit 501 receives the link address of the object returned by the server. The sending unit 504 calls the API function to send the link address of the object to the second web page. Thereby, cross-domain and asynchronous communication between websites can be realized safely and reliably.

Corresponding to the above object uploading method, an object uploading device is also provided in an embodiment of the present specification. As shown in FIG. 6, the device includes:

The receiving unit 601 is configured to receive an object cross-domain upload request, where the object cross-domain upload request includes an object to be uploaded across the domain; the second web page belongs to any domain.

The sending unit 602 is configured to send an object uploading message to the first webpage by using an application interface API function that can implement message cross-domain transmission, where the object uploading message is used to indicate that the first webpage is in the legality verification of uploading the message to the object. After the object is uploaded to the corresponding server, and the link address of the object is obtained; the first web page belongs to the first domain.

The receiving unit 601 is further configured to receive a link address of the object returned by the first webpage page by calling an API function.

The functions of the functional modules of the apparatus in the foregoing embodiments of the present invention can be implemented by the steps of the foregoing method embodiments. Therefore, the specific working process of the apparatus provided in one embodiment of the present specification is not described herein.

The object uploading apparatus provided in one embodiment of the present specification can implement cross-domain and asynchronous communication between websites securely and reliably. Those skilled in the art will appreciate that in one or more examples described above, the functions described herein can be implemented in hardware, software, firmware, or any combination thereof. When implemented in software, the functions may be stored in a computer readable medium or transmitted as one or more instructions or code on a computer readable medium.

The specific embodiments of the present invention have been described in detail with reference to the preferred embodiments of the present invention. The scope of the protection, any modifications, equivalent substitutions, improvements, etc., which are made on the basis of the technical solutions of the present invention, are included in the scope of the present invention.

Claims (8)

An object uploading method, comprising: The first webpage page receives the object uploading message sent by the application programming interface API function that can implement cross-domain transmission of the message, where the first webpage page belongs to the first domain, and the second webpage page belongs to any Domain; the object upload message includes an object to be uploaded across domains; Performing legality verification on the object uploading message; After the validity of the uploading of the object is verified, the object is uploaded to the corresponding server; Receiving a link address of the object returned by the server; The API function is called to send a link address of the object to the second web page. The method according to claim 1, wherein before the uploading the object to the corresponding server, the method further comprises: Determining whether the object has been serialized; If so, deserializing the object; The uploading the object to a corresponding server includes: The deserialized object is uploaded to the corresponding server. The method according to claim 1 or 2, wherein the object comprises any one of the following: a document, a picture, and an audio and video. An object uploading method, comprising: The second webpage page receives an object cross-domain upload request, where the object cross-domain upload request includes an object to be cross-domain uploaded; the second webpage page belongs to any domain; Sending an object uploading API message to the first webpage page by using an application interface API function that can implement message cross-domain transmission, the object uploading message is used to indicate that the first webpage page is verified after the legality verification of the object uploading message is passed Uploading the object to a corresponding server, and acquiring a link address of the object; the first webpage page belongs to the first domain; Receiving, by the first web page, a link address of the object returned by calling the API function. An object uploading device, comprising: a receiving unit, configured to receive an object upload message sent by the second webpage page by using an application programming interface API function that can implement cross-domain transmission of the message, where the first webpage belongs to the first domain, and the second webpage belongs to the first webpage a domain; the object upload message includes an object to be uploaded across domains; a verification unit, configured to perform legality verification on the object upload message received by the receiving unit; a uploading unit, configured to upload the object to a corresponding server after the verification unit passes the validity verification of the object upload message; The receiving unit is further configured to receive a link address of the object returned by the server; And a sending unit, configured to invoke the API function to send a link address of the object to the second webpage page. The device according to claim 5, further comprising: a determining unit, configured to determine whether the object has been serialized; a processing unit, configured to deserialize the object; The uploading unit is specifically configured to: The deserialized object is uploaded to the corresponding server. The apparatus according to claim 5 or 6, wherein the object comprises any one of the following: a document, a picture, and an audio and video. An object uploading device, comprising: a receiving unit, configured to receive an object cross-domain upload request, where the object cross-domain upload request includes an object to be uploaded across domains; the second web page belongs to any domain; a sending unit, configured to send an application interface API function that can implement message cross-domain transmission, to send an object upload message to the first webpage, where the object uploading message is used to indicate that the first webpage page is legally uploaded to the object After the verification is passed, the object is uploaded to the corresponding server, and the link address of the object is obtained; the first webpage page belongs to the first domain; The receiving unit is further configured to receive a link address of the object returned by the first webpage page by calling the API function.

Images