Page processing method and device

Abstract

This invention provides a page processing method and apparatus. A first page is loaded in the front end of a web application, and at least one second page is embedded within the first page. The domain name of the first page is different from that of the second page. The method involves obtaining the first address information of the first page and the second address information of each second page. The first address information and the address information of each second page are used as configuration parameters to configure a proxy interface for the web application backend. For each second page, the target content within the second page is preprocessed through the proxy interface to obtain a third page. The target content includes at least one of the following: a relative path, a raw HTTP path, and a constant. This invention ensures the normal display of cross-domain content when taking screenshots of a page.

Description

Technical Field

[0001] This invention relates to the field of web page processing technology, and in particular to a web page processing method and apparatus. Background Technology

[0002] Third-party pages are often embedded in application websites. This is easily achieved when the third-party page's request header `X-Frame-Options` is not set to `sameorigin`; simply add an `iframe` element to the HTML and specify its `src` attribute as a link to that page. Various interactions can then be performed seamlessly within the embedded third-party page. However, when taking screenshots of the third-party page, cross-origin issues arise, manifesting as blank iframe content or blank images used within the iframe.

[0003] There are currently two methods to achieve cross-domain webpage screenshots: (1) Modify the code of the relevant services of the referenced third-party page; however, this solution cannot handle those third-party services that cannot be modified. (2) Use the third-party page link as a parameter to re-crawl the third-party page from the interface defined on the backend of the application website's own server, take a screenshot and save it, and retrieve the screenshot from the server when needed; although this solution does not require modification of the code of the third-party service, it can only capture the initial static page of the third-party page, and the interactive content of the third-party page (such as the dynamic page that is finally presented after clicking, inputting filters, etc.) cannot be effectively restored in the screenshot. Summary of the Invention

[0004] In view of this, the purpose of the present invention is to provide a page processing method and apparatus to alleviate the above-mentioned problems existing in the related art.

[0005] In a first aspect, embodiments of the present invention provide a page processing method, the method comprising: loading a first page in the front end of a web application, and loading at least one second page in the first page in an embedded manner; wherein the domain name of the first page is different from the domain name of the second page; obtaining first address information of the first page and second address information of each second page; configuring a proxy interface for the back end of the web application using the first address information of the first page and the address information of each second page as configuration parameters; and for each second page, preprocessing the target content in the second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: a relative path, an original HTTP path, and a constant.

[0006] Secondly, embodiments of the present invention also provide a page processing apparatus, the apparatus comprising: a loading module, configured to load a first page in the front end of a web application, and to load at least one second page in the first page in an embedded manner; wherein the domain name of the first page is different from the domain name of the second page; an acquisition module, configured to acquire first address information of the first page and second address information of each second page; a configuration module, configured to use the first address information of the first page and the address information of each second page as configuration parameters to configure a proxy interface for the back end of the web application; and a processing module, configured to preprocess the target content in each second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: a relative path, an original HTTP path, and a constant.

[0007] This invention provides a page processing method and apparatus. A first page is loaded in the front end of a web application, and at least one second page is embedded within the first page. The domain name of the first page is different from that of the second page. The method involves obtaining first address information of the first page and second address information of each second page. The first address information of the first page and the address information of each second page are used as configuration parameters to configure a proxy interface for the web application backend. For each second page, the target content in the second page is preprocessed through the proxy interface to obtain a third page. The target content includes at least one of the following: a relative path, a raw HTTP path, and a constant. Using this technique, when a second page is embedded in the first page, the target content in the second page can be preprocessed through the proxy port, thereby ensuring the normal display of cross-domain content when taking screenshots of the page.

[0008] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention are realized and obtained in accordance with the structures particularly pointed out in the description, claims and drawings.

[0009] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0010] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0011] Figure 1 This is a flowchart illustrating a page processing method according to an embodiment of the present invention;

[0012] Figure 2 This is an example diagram of a page processing method according to an embodiment of the present invention;

[0013] Figure 3 This is a schematic diagram of the structure of a page processing device according to an embodiment of the present invention;

[0014] Figure 4 This is a schematic diagram of another page processing device in an embodiment of the present invention. Detailed Implementation

[0015] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0016] Currently, there are two methods to achieve cross-domain webpage screenshots: (1) Modify the code of the relevant services of the referenced third-party page; however, this solution cannot handle those third-party services that cannot be modified. (2) Use the third-party page link as a parameter to crawl the third-party page again from the interface defined by the application website's own server backend, take a screenshot and save it, and retrieve the screenshot from the server when needed; although this solution does not require modification of the code of the third-party service, it can only capture the initial static page of the third-party page, and the interactive content of the third-party page (such as the dynamic page that is finally presented after clicking, inputting filters, etc.) cannot be effectively restored in the screenshot.

[0017] Based on this, the page processing method and apparatus provided by the present invention can alleviate the above-mentioned problems existing in the related technologies.

[0018] To facilitate understanding of this embodiment, a page processing method disclosed in this invention will first be described in detail, see [link to relevant documentation]. Figure 1 As shown, the method may include the following steps:

[0019] Step S102: Load a first page in the front end of the web application, and load at least one second page in the first page in an embedded manner; wherein the domain name of the first page is different from the domain name of the second page.

[0020] For example, the first page mentioned above can be a local page that the user needs to access in the web application frontend, while the second page mentioned above can be a page to be embedded and displayed in the first page (also known as a "nested page"). Therefore, after responding to the user's page access operation, the web application frontend will send a corresponding page access request to the web application backend (such as a server). After responding to the access request, the web application backend will obtain the corresponding local data resources for page display and send these local data resources to the web application frontend. The web application frontend loads the local page (i.e., the first page) corresponding to these local resources and loads the required nested page (i.e., the second page) in an embedded manner within the local page, and the domain name of the local page is different from the domain name of the required nested page. If the local page and the nested page within it are displayed directly, when taking a screenshot of the local page with one or more nested pages embedded using a page screenshot tool (such as html2canvas), the cross-domain content will usually not be displayed correctly in the screenshot. Therefore, before taking a screenshot, a proxy interface is needed to proxy the cross-domain content in the nested page that needs to be displayed correctly in the screenshot, thereby solving the cross-domain problem.

[0021] Step S104: Obtain the first address information of the first page and the second address information of each second page.

[0022] Step S106: Use the first address information of the first page and the address information of each second page as configuration parameters to configure the proxy interface for the Web application backend.

[0023] For example, continuing from the previous example, after loading a local page in the front end of the web application and loading the required nested pages in an embedded manner in the local page, the addresses of the local page and each nested page can be obtained first. Then, the obtained addresses can be used as configuration parameters to configure a proxy interface for the back end of the web application. After that, a proxy server can be established to establish a data connection with the proxy interface, thereby establishing a data connection between the front end of the web application and the proxy server.

[0024] Step S108: For each second page, the target content in the second page is preprocessed through the proxy interface to obtain the third page; wherein, the target content includes at least one of the following: relative path, original HTTP path, and constant.

[0025] For example, continuing from the previous example, after configuring the proxy interface for the web application backend, for each second page, at least one of the following (i.e., the target content) in each nested page can be preprocessed through the proxy interface: relative path, raw HTTP path, and constant.

[0026] This invention provides a page processing method that loads a first page in the front end of a web application and embeds at least one second page within the first page; wherein the domain name of the first page is different from that of the second page; the method obtains the first address information of the first page and the second address information of each second page; configures a proxy interface for the web application backend using the first address information of the first page and the address information of each second page as configuration parameters; for each second page, preprocesses the target content in the second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: a relative path, a raw HTTP path, and a constant. Using the above technique, when a second page is embedded in the first page, the target content in the second page can be preprocessed through the proxy port, thereby ensuring the normal display of cross-domain content when taking screenshots of the page.

[0027] As one possible implementation, the step of preprocessing the target content in the second page through the proxy interface to obtain the third page may include: changing the target content in the second page to the corresponding proxy path through the proxy interface to obtain the third page.

[0028] For example, continuing from the previous example, the target content (such as relative paths, original HTTP paths, and constants) in each nested page can be modified to the corresponding proxy path through the proxy interface pre-configured in the web application backend, thereby obtaining a new nested page. The specific modification method may include at least one of the following operations: (1) changing the relative path to the proxy path; (2) changing the original HTTP path to the proxy path; (3) changing the value of constants (such as the context path) to the proxy path.

[0029] As one possible implementation, the above page processing method may further include: for each second page, if the target content of the second page includes a relative path, then matching all relative paths in the second page using a pre-constructed regular expression.

[0030] For example, continuing the previous example, for each nested page already embedded in a local page, if the nested page contains relative paths, it is necessary to find as many relative paths as possible within that nested page and change them to proxy paths via a proxy interface. This can be achieved by first constructing a regular expression on the proxy server that communicates with the proxy interface to match and find relative paths. Then, if a nested page contains relative paths, the proxy interface can use the constructed regular expression to match as many relative paths as possible within that nested page, thereby changing the matched relative paths to proxy paths. This approach further ensures the comprehensiveness of relative path changes, guaranteeing the proper display of cross-domain content in screenshots of local pages containing nested pages.

[0031] As one possible implementation, the above page processing method may further include: for each third page, if the third page contains the third address information of the fourth page, then a preset forward proxy tool is used to perform forward proxy on the third page based on the second address information corresponding to the third page and the third address information in the third page, to obtain the fifth page.

[0032] The fourth page mentioned above refers to any page other than the third page. For each third page, if the third page contains the third address information of the fourth page, the second address information corresponding to the third page and the third address information in the third page can be obtained through a preset forward proxy tool. The second address information corresponding to the third page and the third address information in the third page can be modified to the fourth address information. Then, the fourth address information is used to perform a forward proxy on the third page to obtain the fifth page.

[0033] For example, continuing the previous example, for a nested page (i.e., the second page) within a local page (i.e., the first page) that contains the addresses of other pages (i.e., the third address information of the fourth page), after modifying the target content of this nested page to the corresponding proxy path to obtain a new nested page (i.e., the third page), a pre-set forward proxy tool (such as nginx) can be used to forward proxy the website of this nested page and the website of the other page to the same address. Taking nginx as an example, during the configuration of location rules, requests sent from the web application frontend to the web application backend to access this nested page and requests to access the other page can be intercepted to the same proxy address. This allows subsequent page accesses to obtain relevant data of this nested page and / or the other page from the external network through nginx using this proxy address, thereby achieving cross-domain content retrieval. If a nested webpage with domain 127.0.0.1 contains another webpage with domain 127.11.11.11, nginx can be used to rewrite both domains to the same domain 127.0.0.2. Then, when accessing the nested webpage and / or the other webpage, the relevant data will be retrieved using domain 127.0.0.2, thus achieving cross-domain page content retrieval through a forward proxy.

[0034] For ease of understanding, here we will use Figure 2 The above page processing method is described as an example as follows:

[0035] See Figure 2As shown, when a user of a web application needs to access a local page with two nested pages (i.e., the first nested page and the second nested page), the web application frontend can send a corresponding page access request to the web application backend. After responding to the access request, the web application backend will send the corresponding local data resources to the web application frontend, and the web application frontend will load the local page, the first nested page, and the second nested page. Both the first nested page and the second nested page contain the cross-domain content that the user needs to capture when taking a screenshot of the page. Based on this, the addresses of the local page, the first nested page, and the second nested page can be obtained first. These addresses are then used as configuration parameters to configure a proxy interface for the web application backend. A data connection between the web application frontend and the backend proxy server is then established through this proxy interface. Taking the first nested page as an example, the first nested page can be used as a proxy page on the backend proxy server through this proxy interface. The target content (such as relative paths, raw HTTP paths, and constants) within this nested page can be rewritten. Then, the data resources (such as images, static resources like JS, and asynchronous interface requests) contained in this nested page are forward-proxied through the proxy tool nginx. This allows nginx to obtain these data resources and send them to the web application frontend. Upon receiving these data resources, the web application frontend displays the page, showing the final display page corresponding to the local page, and embedding the nested page 1 corresponding to the first nested page within this final display page. Similarly, the web application frontend also embeds the nested page 2 corresponding to the second nested page within this final display page, which will not be elaborated further.

[0036] Based on the above page processing method, embodiments of the present invention also provide a page processing apparatus, see below. Figure 3 As shown, the device may include the following modules:

[0037] The loading module 302 can be used to load a first page in the front end of a web application and to load at least one second page in an embedded manner within the first page; wherein the domain name of the first page is different from the domain name of the second page.

[0038] The acquisition module 304 can be used to acquire the first address information of the first page and the second address information of each second page.

[0039] The configuration module 306 can be used to configure a proxy interface for the backend of the web application by taking the first address information of the first page and the address information of each of the second pages as configuration parameters.

[0040] The processing module 308 can be used to preprocess the target content in each second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: relative path, original HTTP path, and constant.

[0041] This invention provides a page processing apparatus that loads a first page in the front end of a web application and embeds at least one second page within the first page; wherein the domain name of the first page is different from the domain name of the second page; obtains the first address information of the first page and the second address information of each second page; uses the first address information of the first page and the address information of each second page as configuration parameters to configure a proxy interface for the back end of the web application; for each second page, preprocesses the target content in the second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: a relative path, a raw HTTP path, and a constant. Using the above technology, when a second page is embedded in the first page, the target content in the second page can be preprocessed through the proxy port, thereby ensuring the normal display of cross-domain content when taking screenshots of the page.

[0042] The aforementioned processing module 308 can also be used to: change the target content in the second page to the corresponding proxy path through the proxy interface to obtain the third page.

[0043] Based on the above Figure 3 The page processing apparatus shown in the embodiment of the present invention also provides another page processing apparatus, see [link to embodiment]. Figure 4 As shown, the device may further include:

[0044] The proxy module 310 can be used to perform a forward proxy on each of the third pages if the third page contains the third address information of the fourth page, based on the second address information corresponding to the third page and the third address information in the third page, to obtain the fifth page.

[0045] The matching module 312 can be used to match all relative paths in the second page by using a pre-built regular expression if the target content of the second page includes a relative path.

[0046] The aforementioned proxy module 310 can also be used to: obtain the second address information corresponding to the third page and the third address information in the third page through a preset forward proxy tool, modify the second address information corresponding to the third page and the third address information in the third page into fourth address information, and then use the fourth address information to perform forward proxy on the third page to obtain the fifth page.

[0047] The page processing apparatus provided in this embodiment of the invention has the same implementation principle and technical effect as the aforementioned page processing method embodiment. For the sake of brevity, any parts not mentioned in the apparatus embodiment can be referred to the corresponding content in the aforementioned method embodiment.

[0048] Unless otherwise specifically stated, the relative steps, numerical expressions, and values ​​of the components and steps described in these embodiments do not limit the scope of the invention.

[0049] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0050] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0051] Finally, it should be noted that the above-described embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A page processing method, characterized in that, The method includes: A first page is loaded in the front end of a web application, and at least one second page is loaded in an embedded manner within the first page; wherein the domain name of the first page is different from the domain name of the second page; Obtain the first address information of the first page and the second address information of each of the second pages; The first address information of the first page and the address information of each of the second pages are used as configuration parameters to configure a proxy interface for the backend of the web application. For each of the second pages, the target content in the second page is preprocessed through the proxy interface to obtain the third page; wherein the target content includes at least one of the following: relative path, original HTTP path, and constant; For each of the third pages, if the third page contains the third address information of the fourth page, then the second address information corresponding to the third page and the third address information in the third page are obtained through a preset forward proxy tool, and the second address information corresponding to the third page and the third address information in the third page are modified into the fourth address information. Then, the fourth address information is used to perform a forward proxy on the third page to obtain the fifth page.

2. The method according to claim 1, characterized in that, The steps for preprocessing the target content of the second page through the proxy interface to obtain the third page include: The target content on the second page is changed to the corresponding proxy path through the proxy interface to obtain the third page.

3. The method according to claim 1, characterized in that, The method further includes: For each of the second pages, if the target content of the second page includes relative paths, then all relative paths in the second page are matched using a pre-constructed regular expression.

4. A page processing apparatus, characterized in that, The device includes: A loading module is used to load a first page in the front end of a web application and to load at least one second page in an embedded manner within the first page; wherein the domain name of the first page is different from the domain name of the second page; The acquisition module is used to acquire the first address information of the first page and the second address information of each second page; The configuration module is used to configure a proxy interface for the backend of the web application by taking the first address information of the first page and the address information of each of the second pages as configuration parameters. The processing module is used to preprocess the target content in each second page through the proxy interface to obtain a third page; wherein the target content includes at least one of the following: relative path, original HTTP path, and constant; The proxy module is used to, for each of the third pages, if the third page contains the third address information of the fourth page, obtain the second address information corresponding to the third page and the third address information in the third page through a preset forward proxy tool, modify the second address information corresponding to the third page and the third address information in the third page to the fourth address information, and then use the fourth address information to perform forward proxy on the third page to obtain the fifth page.

5. The apparatus according to claim 4, characterized in that, The processing module is also used for: The target content on the second page is changed to the corresponding proxy path through the proxy interface to obtain the third page.

6. The apparatus according to claim 4, characterized in that, The device further includes: The matching module is used to match all relative paths in the second page using pre-built regular expressions if the target content of the second page includes relative paths.

Images