A front-end sensitive data processing method, device, equipment and storage medium

Abstract

The present application relates to the technical field of data processing, and discloses a front-end sensitive data processing method, device, equipment and storage medium, the present application increases the desensitization processing function in the front-end component template, and compiles the front-end component template into a rendering function, can desensitize the sensitive data in the source of data analysis, is favorable to the reuse of desensitized data, further, after the change of the front-end page data set, the reuse of the original data and the desensitized data which do not change, can make the desensitized value stored in the same node be repeatedly obtained and utilized, that is, only desensitization processing is needed when template analysis and compilation, and multiple repeated desensitization is not needed.Finally, the front-end component template is rendered by using the updated target JavaScript desensitized object file, avoids the reprocessing and full rendering of the whole front-end page data, reduces unnecessary operation, optimizes the page rendering process, and further improves the page rendering performance and response speed.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, and in particular to a front-end sensitive data processing method, device, equipment and storage medium. BACKGROUND

[0002] With the rapid development of Internet information and big data technology, data leakage events are increasing, and data security protection of Web application systems is becoming more and more important. Data desensitization is an important technical means to protect system user privacy and data security, and has a wide range of application scenarios in different Web application system projects. By desensitizing rules, some sensitive information is transformed to reduce the sensitivity of the system public data and achieve reliable protection of sensitive data.

[0003] Currently, in the development process of the front-end and back-end separated Web application system, the sensitive data processing is usually placed in the back-end. After the client sends a data request, the server obtains the requested data from the database, matches the sensitive fields through various desensitization rules for desensitization processing, and finally returns the desensitized data to the client and renders it to the page. Facing massive data that needs to be processed in real time, due to the different roles and permissions of the users, the interface request parameter values sent by the client are different, and the desensitized data to be presented on the page will also be different, which will cause a large number of desensitization processing of the same field column, and reduce the interface data response speed and Web page response speed. SUMMARY

[0004] Therefore, the present application provides a front-end sensitive data processing method, device, equipment and storage medium to solve the problem that in the front-end and back-end separated Web application system, due to the large amount of data, user role and permission management mechanism and other factors, the back-end repeatedly desensitizes the massive sensitive data, wasting the interface response time and page response speed.

[0005] In a first aspect, the present application provides a front-end sensitive data processing method, wherein the front-end includes a front-end component template and a front-end page; the method comprises:

[0006] The template compilation is performed after the desensitization processing function is added in the front-end component template to obtain a rendering function; a front-end page data set is obtained, and the front-end page data set is processed by using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file, the first JavaScript object file is used to mount a full-data node, and the first JavaScript desensitization object file is used to mount a full-data desensitization node; when the front-end page data set changes, the changed front-end page data set is processed by using the rendering function and the desensitization processing function based on the first JavaScript object file and the first JavaScript desensitization object file to obtain a target JavaScript desensitization object file; and the front-end component template is rendered by using the target JavaScript desensitization object file, so that the changed front-end page data is updated and displayed on the front-end page.

[0007] The front-end sensitive data processing method provided by the application can desensitize sensitive data at the source of data analysis by adding a desensitization processing function in a front-end component template and compiling the front-end component template into a rendering function, which is beneficial to the reuse of desensitized data. Further, the rendering function and the desensitization processing function are called respectively to process the front-end page data set, which can effectively manage the desensitized values of the nodes corresponding to the front-end page data set. Further, after the front-end page data set changes, the first JavaScript object file and the first JavaScript desensitization object file can be combined directly, and the rendering function and the desensitization processing function are called respectively to process the changed front-end page data set to obtain an updated target JavaScript desensitization object file. By reusing the original data and the desensitized data that have not changed when the front-end page data is refreshed, the desensitized values stored in the same node can be obtained repeatedly, that is, desensitization needs to be performed only once during template analysis and compilation, and repeated desensitization is not needed. Finally, the front-end component template is rendered by using the updated target JavaScript desensitization object file, and the changed front-end page data can be updated and displayed on the front-end page only by re-rendering the node data that has changed, which avoids reprocessing and full rendering of the entire front-end page data, reduces unnecessary operations, optimizes the page rendering process, and further improves the page rendering performance and response speed. Therefore, by implementing the application, dynamic processing of front-end sensitive data can be realized, and only the node data that has changed needs to be re-rendered during page rendering. The old original node data or the old desensitized node data of the node data that has not changed can be reused directly regardless of the sensitive state, which is beneficial to avoiding frequent updating of full node data, reducing the number of operations on the real DOM of the page, improving the page rendering performance and response speed, and protecting the privacy and data security of users.

[0008] In an optional implementation, the front-end page data set is acquired, and the front-end page data set is processed by using a rendering function and a desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file, including:

[0009] The front-end page data set is acquired, the front-end page data set is processed by using a rendering function to obtain a first JavaScript object file, and the front-end page data set is desensitized by using a desensitization processing function to obtain a first JavaScript desensitization object file.

[0010] The front-end sensitive data processing method provided by the application can desensitize sensitive data at the source of data analysis, and is beneficial to the reuse of desensitized data.

[0011] In an optional implementation, the front-end page data set is processed by using a rendering function to obtain a first JavaScript object file, including:

[0012] A plurality of page data nodes corresponding to the front-end page data set are acquired, the plurality of page data nodes are encoded and node object structure data set is determined, the node object structure data set includes type node type attribute data, key value unique identifier attribute data, ref node original value attribute data and newRef node desensitization value attribute data, and based on the node object structure data set, the plurality of page data nodes and child nodes of each page data node are hierarchically rendered by using a rendering function to obtain a first JavaScript object file.

[0013] The front-end sensitive data processing method provided by the application can make the front-end page data have a clear and standard structure in the processing process by encoding the plurality of page data nodes and determining the node object structure data set. Further, the plurality of page data nodes and child nodes of each page data node are hierarchically rendered by using a rendering function, which can be sequentially processed according to the hierarchical relationship between the data nodes, so as to ensure that each node and its child nodes are correctly associated and organized in the rendering process, and further make the obtained first JavaScript object file be used for efficiently mounting the data nodes, so that the data can be displayed and used in the front-end page related scene in a reasonable structure.

[0014] In an optional implementation, when the current front-end page data set changes, the changed front-end page data set is processed based on the first JavaScript object file and the first JavaScript de-sensitization object file by using the rendering function and the de-sensitization processing function to obtain a target JavaScript de-sensitization object file, including:

[0015] When the current front-end page data set changes, the changed front-end page data set is processed by using the rendering function and the de-sensitization processing function respectively to obtain a second JavaScript object file and a second JavaScript de-sensitization object file; based on the node object structure data set, the first JavaScript object file and the second JavaScript object file are compared in terms of node attributes to determine a changed node; based on the changed node, the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file, the target JavaScript de-sensitization object file is obtained by processing through the de-sensitization processing function.

[0016] The front-end sensitive data processing method provided by the application can accurately determine the changed node through node attribute comparison, avoid unnecessary processing of unchanged nodes, and realize accurate positioning of the changed node. Further, in combination with the determined changed node, the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file, and by using the de-sensitization processing function to obtain the target JavaScript de-sensitization object file, the de-sensitized data corresponding to the changed node can be quickly and accurately updated when the front-end page data is updated, so that the sensitive data is always presented in a de-sensitized state in the page display scenario, effectively protecting the privacy and data security of the user. At the same time, the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file are used to process the changed node, so that the de-sensitized data is reused, and there is no need to re-perform de-sensitization operation on all data, thereby improving the processing efficiency.

[0017] In an optional implementation, based on the changed node, the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file, the target JavaScript de-sensitization object file is obtained by processing through the de-sensitization processing function, including:

[0018] The flag mark is added to the node position of the changed node, and the flag mark is used for matching a replacement rule; the changed node is desensitized by using a desensitization processing function to obtain desensitized node data; the first JavaScript desensitized object file and the second JavaScript desensitized object file are compared based on the flag mark to obtain a comparison result; and the first JavaScript desensitized object file is updated based on the comparison result to obtain a target JavaScript desensitized object file.

[0019] The front-end sensitive data processing method provided by the application can accurately locate and identify the changed node by adding the flag mark for matching the replacement rule to the node position of the changed node. Further, the changed node is desensitized by using the desensitization processing function, so that the sensitive information still exists in the desensitized form in the new node data when the front-end page data changes, the privacy of the user is effectively protected, the risk of sensitive data leakage in the page updating process is prevented, the front-end page can always follow the data security principle when displaying the changed content, and the requirement for protecting the privacy of the user data is met. Finally, the desensitized node data is accurately replaced into the corresponding position in the first JavaScript desensitized object file by using the flag mark when the first JavaScript desensitized object file is updated, and the efficient updating of the desensitized data file is realized.

[0020] In an optional implementation, the desensitization processing function includes a hooks set function, and the hooks set function includes a text type processing function, a picture type processing function and a hyperlink type processing function.

[0021] The front-end sensitive data processing method provided by the application can desensitize a variety of common sensitive data at the source of data analysis by using the text type processing function, the picture type processing function and the hyperlink type processing function, and the reuse of the desensitized data is facilitated. Meanwhile, the situation that part of the sensitive data is omitted due to the difference in data types is effectively avoided.

[0022] In a second aspect, the application provides a front-end sensitive data processing device, and the front-end includes a front-end component template and a front-end page. The device includes:

[0023] The increasing module is configured to compile a template to obtain a rendering function after adding the desensitization processing function in the front-end component template; the obtaining and processing module is configured to obtain a front-end page dataset, and process the front-end page dataset by using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file, the first JavaScript object file being used to mount a full-data node, and the first JavaScript desensitization object file being used to mount a full-desensitization data node; the processing module is configured to, when the front-end page dataset changes, process the changed front-end page dataset by using the rendering function and the desensitization processing function based on the first JavaScript object file and the first JavaScript desensitization object file to obtain a target JavaScript desensitization object file; and the rendering module is configured to render the front-end component template by using the target JavaScript desensitization object file, so that the changed front-end page data is updated and displayed on the front-end page.

[0024] In a third aspect, the present application provides a computer device, comprising a memory and a processor, the memory and the processor are connected with each other in communication, the memory stores computer instructions, and the processor executes the computer instructions to perform the front-end sensitive data processing method in the first aspect or any of the corresponding embodiments.

[0025] In a fourth aspect, the present application provides a computer readable storage medium, which stores computer instructions, and the computer instructions are used to make a computer execute the front-end sensitive data processing method in the first aspect or any of the corresponding embodiments.

[0026] In a fifth aspect, the present application provides a computer program product, which comprises computer instructions, and the computer instructions are used to make a computer execute the front-end sensitive data processing method in the first aspect or any of the corresponding embodiments. BRIEF DESCRIPTION OF DRAWINGS

[0027] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the drawings needed in the specific embodiments or the prior art description will be briefly introduced as follows. Obviously, the drawings in the following description are some embodiments of the present application, and those skilled in the art can obtain other drawings according to these drawings without creative labor.

[0028] Figure 1 is a flowchart of the front-end sensitive data processing method according to an embodiment of the present application;

[0029] Figure 2is a flowchart of another front-end sensitive data processing method according to an embodiment of the present application;

[0030] Figure 3 is a flowchart of still another front-end sensitive data processing method according to an embodiment of the present application;

[0031] Figure 4 is a flowchart of a dynamic front-end sensitive data processing method according to an embodiment of the present application;

[0032] Figure 5 is a structural block diagram of a front-end sensitive data processing device according to an embodiment of the present application;

[0033] Figure 6 is a hardware structure schematic diagram of a computer device according to an embodiment of the present application. DETAILED DESCRIPTION

[0034] To make the objectives, technical solutions and advantages of embodiments of the present application clearer, the technical solutions in embodiments of the present application will be described clearly and completely below with reference to the drawings in embodiments of the present application. Obviously, the described embodiments are some but not all of embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work fall within the scope of protection of the present application.

[0035] Embodiments of the present application provide a front-end sensitive data processing method, which dynamically processes sensitive data in the front end to achieve the rendering speed of the front-end page and improve the use experience effect of Web users.

[0036] According to embodiments of the present application, a front-end sensitive data processing method embodiment is provided. It should be noted that the steps shown in the flowchart of the drawings can be executed in a computer system such as a group of computer executable instructions, and although the logical order is shown in the flowchart, in some cases, the steps shown or described herein can be executed in an order different from that shown herein.

[0037] In this embodiment, a front-end sensitive data processing method is provided, which can be used in a front-end and back-end separated Web application system. Figure 1 is a flowchart of a front-end sensitive data processing method according to an embodiment of the present application, as shown in Figure 1 The flowchart includes the following steps:

[0038] Step S101, after adding a desensitization processing function in the front-end component template, template compilation is performed to obtain a rendering function.

[0039] The front end can include a front-end component template and a front-end page.

[0040] Further, the front-end component template can include a front-end popular framework component template such as Vue, React, etc.

[0041] Further, the desensitization processing function is built-in with a hooks collection function, which can be used for sensitive data judgment and desensitization processing on page data.

[0042] Further, the hooks collection function can include a text type processing function, a picture type processing function, and a hyperlink type processing function, and the input parameters include a unique identifier key value of a data label, a data label value, and a data value.

[0043] The text type processing function globally introduces a filter, judges whether desensitization processing is needed through a data field name feature, and combines character length characteristics to use a manual closure method to support different regular matching processing of multiple character lengths. For example, a phone field with 11 digits of mobile phone characters can call a mobile phone filter to perform key digit hiding processing on the phone field; a card field with 18 digits of ID card characters can call an ID card filter to perform key digit hiding processing on the card field.

[0044] The picture type processing function can fill the sensitive area in the form of mosaic through Canvas technology, or can identify and similarity fill the sensitive area through image recognition technology.

[0045] The hyperlink type processing function can combine the role permission management mechanism of the user to make a sensitive judgment. If the URL path cannot be accessed by the current user, the URL path is replaced with an empty link # value, so that the hyperlink jump is invalid.

[0046] Specifically, the desensitization processing function can be added in the parsing process of the front-end component template, and then the corresponding template can be compiled into a rendering function.

[0047] In step S102, the front-end page data set is obtained, and the rendering function and the desensitization processing function are used to process the front-end page data set respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file.

[0048] The front-end page data set can include static loading data and request response data.

[0049] Further, the page data label type corresponding to the front-end page data set can include a text type, a picture type, and a hyperlink type. The text type can include a title label, a paragraph label, a table label, a form label, etc.

[0050] Further, the first JavaScript object file is used to mount full data nodes, which are original data nodes without desensitization.

[0051] The first JavaScript desensitization object file is used to mount full desensitization data nodes, which can include data nodes without desensitization and data nodes after desensitization.

[0052] Specifically, the front-end page data set can be processed by using the rendering function and the desensitization processing function respectively, and the first JavaScript object file for mounting full data nodes and the first JavaScript desensitization object file for mounting full desensitization data nodes can be obtained.

[0053] In step S103, when the front-end page data set changes, the changed front-end page data set is processed by using the rendering function and the desensitization processing function based on the first JavaScript object file and the first JavaScript desensitization object file, and a target JavaScript desensitization object file is obtained.

[0054] Specifically, when the front-end page data set changes, i.e., the front-end page data is refreshed, the changed front-end page data set can be obtained by reusing the original data (the first JavaScript object file) and the desensitization data (the first JavaScript desensitization object file) that do not change, and combining the rendering function and the desensitization processing function. By using the original data and the desensitization data that do not change, the desensitization values stored in the same node can be repeatedly obtained and used, i.e., the desensitization processing only needs to be performed once during template parsing and compilation, and does not need to be repeatedly performed multiple times.

[0055] In step S104, the front-end component template is rendered by using the target JavaScript desensitization object file, so that the changed front-end page data is updated and displayed on the front-end page.

[0056] Specifically, the Patch feature of the front-end component template can be triggered according to the obtained target JavaScript desensitization object file, and by triggering the Patch feature, it can be accurately identified which data is the changed node data and which data is the unchanged node data.

[0057] Further, for the changed node data, with the help of the Patch feature, the front-end component template can re-render these node data according to the relevant information in the target JavaScript desensitization object file. Through this re-rendering process, the changed front-end page data can be accurately updated and displayed on the front-end page in the latest state, ensuring that the user sees the latest and accurate content.

[0058] Further, for those node data that have not changed, in order to improve rendering efficiency and avoid unnecessary repeated processing, the old original node data or old desensitized node data is directly reused, which not only ensures the integrity of the overall data display of the front-end page, but also greatly saves rendering resources and time, reduces the performance loss caused by frequent updating of full node data, effectively improves the rendering performance and response speed of the front-end page, and at the same time ensures that users can smoothly browse the front-end page and obtain accurate information, further maintaining the stability and continuity of the front-end page data display.

[0059] In front-end development, especially in component-based development frameworks (such as Vue and React), the Patch feature mainly refers to a mechanism for efficiently updating the DOM (Document Object Model). It is used to compare the structure of new and old virtual DOM (in Vue and React, the state changes of components are first calculated and updated on the virtual DOM) and then only update the actual changed part of the real DOM.

[0060] For example, in React, when the state or properties of a component change, a new virtual DOM tree is generated. React's "Reconciliation" process uses the Patch feature to compare the new and old virtual DOM trees, and uses an algorithm called "Diffing" (such as depth-first traversal) to find the difference part. This difference part may be the addition, deletion, property change or text content change of a node, etc.

[0061] The front-end sensitive data processing method provided in the embodiment can desensitize sensitive data at the source of data analysis, which is beneficial to the reuse of desensitized data. Further, the rendering function and the desensitization processing function are respectively called to process the front-end page data set, which can effectively manage the desensitized values of the nodes corresponding to the front-end page data set. Further, after the front-end page data set changes, the first JavaScript object file and the first JavaScript desensitization object file can be directly combined, and the rendering function and the desensitization processing function are respectively called to process the changed front-end page data set to obtain an updated target JavaScript desensitization object file. By reusing the original data and the desensitized data that do not change when the front-end page data is refreshed, the desensitized values stored in the same node can be repeatedly obtained and utilized, that is, the desensitization processing needs to be performed only once during template analysis and compilation, and multiple repeated desensitization is not needed. Finally, the front-end component template is rendered by using the updated target JavaScript desensitization object file, and the changed front-end page data can be updated and displayed on the front-end page only by re-rendering the node data that changes, which avoids reprocessing and full rendering of the entire front-end page data, reduces unnecessary operations, optimizes the page rendering process, and further improves the page rendering performance and response speed. Therefore, by implementing the application, dynamic processing of front-end sensitive data can be realized, and only the node data that changes needs to be re-rendered during page rendering. Regardless of the sensitive state of the node data that does not change, the old original node data or the old desensitized node data can be directly reused, which is beneficial to avoiding frequent updating of full node data, reducing the operation frequency of the real DOM of the page, improving the page rendering performance and response speed, and protecting the privacy and data security of users.

[0062] A front-end sensitive data processing method is provided in the embodiment, which can be used in a front-end and back-end separated Web application system. Figure 2 The flowchart of the front-end sensitive data processing method according to the embodiment of the application is shown in FIG. 1, which includes the following steps: Figure 2 The flowchart of the front-end sensitive data processing method according to the embodiment of the application is shown in FIG. 1, which includes the following steps:

[0063] In step S201, the template is compiled after the desensitization processing function is added to the front-end component template, and a rendering function is obtained. For details, refer to step S101 of the embodiment shown in FIG. 1, which will not be described herein again. Figure 1 In step S201, the template is compiled after the desensitization processing function is added to the front-end component template, and a rendering function is obtained. For details, refer to step S101 of the embodiment shown in FIG. 1, which will not be described herein again.

[0064] In step S202, a front-end page data set is obtained, and the front-end page data set is processed by using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file. In step S202, a front-end page data set is obtained, and the front-end page data set is processed by using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file.

[0065] Specifically, the step S202 comprises:

[0066] Step S2021, obtaining the front-end page dataset.

[0067] The specific process can refer to the description in the step S102 described above, which will not be repeated here.

[0068] Step S2022, processing the front-end page dataset by using the rendering function to obtain the first JavaScript object file.

[0069] Specifically, the front-end page dataset can be processed by using the rendering function to obtain the first JavaScript object file mounting full data nodes.

[0070] In some optional embodiments, the step S2022 comprises:

[0071] Step a1, obtaining a plurality of page data nodes corresponding to the front-end page dataset.

[0072] Step a2, encoding the plurality of page data nodes and determining the node object structure dataset.

[0073] Step a3, based on the node object structure dataset, using the rendering function to perform hierarchical rendering on the plurality of page data nodes and the child nodes of each page data node to obtain the first JavaScript object file.

[0074] The node object structure dataset comprises type node type attribute data, key value unique identifier attribute data, ref node original value attribute data, and newRef node desensitization value attribute data.

[0075] The type node type attribute data is used to explicitly determine the type of each node, such as a text node (containing user input text, page display text description, etc.), a picture node (corresponding to a picture element in the page, associated with a specific picture resource through a link or other means), or a hyperlink node (pointing to other pages or resource links), etc. By explicitly determining the node type, different processing methods can be adopted for different types of nodes.

[0076] The key value unique identifier attribute data can facilitate accurate positioning of a specific node in subsequent processing, especially when comparing, updating, replacing, or other operations involving nodes, the key value can play an accurate identification role.

[0077] The ref node original value attribute data can record the original data value of each node, i.e., the real data content carried by the node before any processing. For example, for a text node, it is the original text string; for a picture node, it can be the original picture link; for a hyperlink node, it is the original link address, etc.

[0078] The newRef node desensitization value attribute data can be empty in the initial stage, and is mainly used to store the desensitized node value after desensitization processing. When desensitizing the front-end page data, the desensitized value of the sensitive data node to be protected is stored in this attribute after processing.

[0079] Specifically, a plurality of page data nodes corresponding to the front-end page data set can be extracted. These nodes are the basic units that constitute the front-end page data, and can contain various types of data information such as text content, picture link, hyperlink, etc., each node carrying the data representation form of a part of the front-end page.

[0080] Further, the data nodes can be encoded to store the node type and structure. Through encoding, each node can be given a specific, computer-recognizable and processable identifier or format, so that subsequent operations and analysis on these nodes can be more efficient and accurate.

[0081] Further, the type node type, key value unique identifier, ref node original value, and newRef node desensitization value attributes are defined in the node object structure, and the newRef node desensitization value attribute is used to monitor the dynamic change of the node desensitization value.

[0082] Finally, based on the determined node object structure data set, the rendering function can render a plurality of page data nodes and their respective child nodes according to the type, key value unique identifier, original value, and other attribute data of each node, as well as the hierarchical relationship between the nodes and their child nodes, according to predetermined rules and logic, starting from the root node and sequentially rendering each node and its child nodes.

[0083] For example, for a front-end page data containing a plurality of nested structures (such as a page with a plurality of hierarchical menus, each menu option can contain submenus, etc.), the rendering function can first process the topmost node, and then process the child nodes of each level according to the hierarchical relationship between the nodes, and combine and arrange them in a suitable manner to form a complete rendering result with hierarchical structure.

[0084] Further, through the above hierarchical rendering process, a first JavaScript object file in tree format can be generated.

[0085] Further, the first JavaScript object file is in the form of a specific JavaScript object, which contains the complete structure of the rendered front-end page data, including the information of each node and its child nodes, and the information is ordered according to the hierarchical relationship.

[0086] In step S2023, the front-end page data set is desensitized by using the desensitization processing function to obtain a first JavaScript desensitized object file.

[0087] Specifically, if it is a sensitive data node, the desensitization processing function can be used for desensitization processing to generate a newRef node desensitization new value, and finally generate a first JavaScript desensitized object file in a tree format.

[0088] In step S203, when the front-end page data set changes, the changed front-end page data set is processed by using the rendering function and the desensitization processing function based on the first JavaScript object file and the first JavaScript desensitized object file to obtain a target JavaScript desensitized object file. For details, please refer to Figure 1 The step S103 of the embodiment shown in FIG. 1 is not repeated here.

[0089] In step S204, the target JavaScript desensitized object file is used to render the front-end component template, so that the changed front-end page data is updated and displayed on the front-end page. For details, please refer to Figure 1 The step S104 of the embodiment shown in FIG. 1 is not repeated here.

[0090] The front-end sensitive data processing method provided in this embodiment can make the front-end page data have a clear and standardized structure in the processing process by encoding the plurality of page data nodes and determining the node object structure data set. Further, the rendering function is used to perform hierarchical rendering on the plurality of page data nodes and the child nodes of each page data node, so that the hierarchical relationship between the data nodes can be processed in order, and each node and its child nodes can be correctly associated and organized in the rendering process, and then the first JavaScript object file obtained finally can be used to efficiently mount the data nodes, so that the data can be displayed and used in the front-end page related scenarios in a reasonable structure.

[0091] In this embodiment, a front-end sensitive data processing method is provided, which can be used in a front-end and back-end separated Web application system. Figure 3 is a flowchart of the front-end sensitive data processing method according to an embodiment of the application, as shown in Figure 3 The flowchart includes the following steps:

[0092] Step S301, after adding the desensitization processing function in the front-end component template, template compilation is performed to obtain a rendering function. For details, please refer to Figure 1 Step S101 of the embodiment shown in the figure will not be described here.

[0093] Step S302, the front-end page data set is obtained, and the front-end page data set is processed using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file. For details, please refer to Figure 2 Step S202 of the embodiment shown in the figure will not be described here.

[0094] Step S303, when the front-end page data set changes, the changed front-end page data set is processed based on the first JavaScript object file and the first JavaScript desensitization object file using the rendering function and the desensitization processing function to obtain a target JavaScript desensitization object file.

[0095] Specifically, the above step S303 includes:

[0096] Step S3031, when the front-end page data set changes, the changed front-end page data set is processed using the rendering function and the desensitization processing function respectively to obtain a second JavaScript object file and a second JavaScript desensitization object file.

[0097] Specifically, if the front-end page data is refreshed, i.e., the front-end page data set changes, the changed front-end page data set can be processed using the rendering function and the desensitization processing function respectively to obtain a corresponding second JavaScript object file and a second JavaScript desensitization object file. The specific processing process can refer to the description of steps S2022 and S2023 above, and will not be described here.

[0098] Step S3032, based on the node object structure data set, the first JavaScript object file and the second JavaScript object file are compared in terms of node attributes to determine the changed node.

[0099] Specifically, the first JavaScript object file and the second JavaScript object file can be compared in terms of type node type, key value, and ref node original value according to the key value unique identifier, and the corresponding changed node position and changed node are found:

[0100] In the type node type comparison, for each pair of corresponding nodes matched by the key value, the type node type attribute data of the nodes are compared respectively. It is checked whether the types of the two nodes are consistent, such as whether the nodes are text nodes, picture nodes, or hyperlink nodes. If the type has changed, the node is likely to be a changed node that needs further attention to its specific situation in the page.

[0101] Further, the key value comparison can ensure the accuracy of the matching and check whether the key value is tampered or incorrectly assigned. Under normal circumstances, the key values of the matched corresponding nodes should be exactly the same. If they are different, it indicates that the node is abnormal and may belong to the category of changed nodes.

[0102] Further, the ref node original value attribute data of each pair of corresponding nodes can be compared to determine whether the original data value carried by the node has changed. If the ref node original value is different, it indicates that the data content of the node has changed, and this node is one of the changed nodes, and the change of the node can be determined in the original data value.

[0103] Further, through the above comparison of the type node type, key value, ref node original value, and other attributes of the nodes, once it is found that a node has a different situation in any one or more of these attributes than before, it can be determined that the node is a changed node. At the same time, according to the position information of the node in the first JavaScript object file and the second JavaScript object file (which can be determined by the key value matching and the structure of the file), the position of the changed node can be accurately found, so that all changed nodes and their positions can be determined completely.

[0104] In step S3033, based on the changed node, the first JavaScript de-sensitization object file, and the second JavaScript de-sensitization object file, the target JavaScript de-sensitization object file is obtained by processing the de-sensitization processing function.

[0105] Specifically, according to the de-sensitization processing function, the changed node can be de-sensitized, and at the same time, the updated target JavaScript de-sensitization object file can be determined by combining the de-sensitized changed node, the first JavaScript de-sensitization object file, and the second JavaScript de-sensitization object file.

[0106] In some optional embodiments, the above step S3033 includes:

[0107] Step b1, adding a flag mark at the node position of the changed node.

[0108] Step b2, desensitizing the changed node by using a desensitization processing function to obtain desensitized node data.

[0109] Step b3, comparing the first JavaScript desensitized object file and the second JavaScript desensitized object file based on the flag mark to obtain a comparison result.

[0110] Step b4, updating the first JavaScript desensitized object file based on the comparison result to obtain a target JavaScript desensitized object file.

[0111] The flag mark is used to match the replacement rule.

[0112] Specifically, the desensitization processing function can be used to desensitize the changed node and generate new desensitized node data.

[0113] Further, the desensitization processing function has a hooks collection function built-in, which will start the corresponding processing mechanism according to the different types of changed nodes (such as text, pictures, hyperlinks, etc.).

[0114] For example, if the changed node is a text type, the text type processing function in the hooks collection function will first determine whether the text node contains sensitive information, such as checking whether there is an ID card number, phone number, or other sensitive content by using a regular expression or other methods. Once it is confirmed that there is sensitive information, it will be processed according to the preset text desensitization strategy, for example, the mobile phone number "13812345678" will be processed into "138****5678", thereby obtaining the desensitized text node data.

[0115] If the changed node is a picture type, the picture type processing function in the hooks collection function will adopt the corresponding picture desensitization strategy according to the picture situation, such as whether it contains sensitive facial information, sensitive text information, or geographic information, etc. For example, if the picture contains sensitive facial information, an image editing algorithm will be used to blur the face part, thereby obtaining the desensitized picture node data.

[0116] If the changed node is a hyperlink type, the hyperlink type processing function in the hooks collection function can process the display text and target address of the hyperlink, change the display text according to the hyperlink desensitization strategy so that it does not directly expose sensitive content, for example, change the original display text "My private file" pointing to the private file storage page to "Personal resources", and at the same time, appropriately process the target address, such as adding permission verification, etc., to finally obtain the desensitized hyperlink node data.

[0117] Further, the specific node position that needs to be updated can be quickly and accurately determined by the flag mark. Therefore, in the first JavaScript de-sensitization object file, the positions corresponding to the changed nodes can be accurately found according to the flag marks added on the changed nodes.

[0118] Further, the newRef node de-sensitization values of the old first JavaScript de-sensitization object file and the new second JavaScript object file can be compared. According to the node replacement rule, the new de-sensitization node data (i.e., the text, picture, hyperlink, and other types of de-sensitization node data obtained above) generated by the de-sensitization processing is replaced into the old first JavaScript de-sensitization object file according to the corresponding positions. Through such new and old node replacement operation, the new JavaScript de-sensitization object file, i.e., the target JavaScript de-sensitization object file, is finally generated.

[0119] The changed node type can include:

[0120] (1) a new node,

[0121] (2) a deleted node,

[0122] (3) an original value changed node,

[0123] (4) a de-sensitization state changed node, such as an original non-de-sensitized node changed to a de-sensitized node.

[0124] Further, the relationship between the node replacement rule and the flag mark flag is as follows: different marks correspond to different replacement rules.

[0125] (1) when flag = 0, a new original node data is added;

[0126] (2) when flag = 1, a new de-sensitization node data is added;

[0127] (3) when flag = 2, the old original node data is deleted;

[0128] (4) when flag = 3, the old de-sensitization node data is deleted,

[0129] (5) when flag = 4, the old original node data is replaced by the new original node data;

[0130] (6) when flag = 5, the old original node data is replaced by the new de-sensitization node data;

[0131] (7) when flag = 6, the old de-sensitization node data is replaced by the new de-sensitization node data;

[0132] (8) When flag = 7, the old desensitization node data is replaced by the new original node data.

[0133] In step S304, the target JavaScript desensitization object file is used to render the front-end component template, so that the changed front-end page data is updated and displayed on the front-end page. For details, please refer to Figure 1 The step S104 of the embodiment shown will not be repeated here.

[0134] The front-end sensitive data processing method provided in the embodiment avoids unnecessary processing of unchanged nodes by adding a flag mark for matching and replacing rules at the node position of the changed node, and can accurately locate and identify the changed node. Further, the desensitization processing function is used to desensitize the changed node, which can ensure that the sensitive information still exists in the desensitized form in the new node data when the front-end page data changes, effectively protecting the privacy of the user and preventing the risk of sensitive data leakage during page update. When the first JavaScript desensitization object file is updated, the flag mark can accurately replace the desensitized node data in the corresponding position in the first JavaScript desensitized object file, realizing efficient updating of the desensitized data file. Further, the first JavaScript desensitization object file and the second JavaScript desensitization object file are used to process the changed node, realizing the reuse of desensitized data, without the need to desensitize all data again, improving the processing efficiency.

[0135] In an example, as shown in Figure 4 A dynamic front-end sensitive data processing method is provided, including the following steps:

[0136] Step 1, obtaining page data accessed by a user, the page data including static loading data and request response data.

[0137] Specifically, the page data tag types include but are not limited to text type, picture type, hyperlink type, wherein the text type specifically includes title tag, paragraph tag, table tag, form tag, etc.

[0138] Step 2, adding a desensitization processing function in the front-end component template parsing process, and compiling the template into a rendering function.

[0139] Specifically, the front-end component includes Vue, React, and other popular front-end framework components. The component template is parsed into a JavaScript type rendering function by a compiler, and a DOM node is generated.

[0140] Specifically, the desensitization processing function is built-in a hooks collection function, which is used for sensitive data judgment and desensitization processing on page data, and specifically includes but is not limited to a text type processing function, a picture type processing function and a hyperlink type processing function, and the input parameters include a unique identifier key value of a data label, a data label value and a data value.

[0141] The text type processing function introduces a global filter, judges whether desensitization processing is needed through a data field name feature, and combines a character length feature to adopt a manual closure mode to perform different regular matching processing on multiple character lengths, for example, a phone field with 11 digits of a mobile phone number character can call a mobile phone number filter to perform key digit hiding processing on the phone field, and a card field with 18 digits of an ID card character can call an ID card number filter to perform key digit hiding processing on the card field.

[0142] The picture type processing function can fill the sensitive area in the form of mosaic through Canvas technology, or can identify and fill the sensitive area through image recognition technology.

[0143] The hyperlink type processing function combines a user role permission management mechanism to perform sensitive judgment, if the URL path cannot be accessed by the current user, the URL path is replaced with an empty link # value, so that the hyperlink jump is invalid.

[0144] Step 3, calling the rendering function to perform data processing on the page data to generate a JavaScript object file, the JavaScript object file is used to mount a data node, and the data node is an original data node without desensitization; calling the desensitization processing function to perform data desensitization processing on the page data to generate a JavaScript desensitization object file, the JavaScript desensitization object file is used to mount a desensitized data node, and the desensitized data node includes a data node without desensitization and a data node after desensitization.

[0145] Specifically, the data processing process is as follows: encoding the data node to store the node type and structure, defining the type node type, the key value unique identifier, the ref node original value and other attributes in the node object structure, and increasing the newRef node desensitization value attribute to monitor the dynamic change of the node desensitization value. Calling the rendering function to perform hierarchical rendering on the data node and its child nodes to generate a tree format JavaScript object file, if it is a sensitive data node, calling the desensitization processing function in step 2 to perform desensitization processing to generate a newRef node desensitization new value, and generating a tree format JavaScript desensitization object file.

[0146] Step 4, when the page data is refreshed, the old JavaScript object file and the new JavaScript object file are compared in node attribute, the changed nodes are found, the desensitization processing function is called to desensitize the changed nodes, new desensitized node data is generated, then the changed node position is matched in the JavaScript desensitized object file, the new and old node replacement is performed according to the node replacement rule, and a new JavaScript desensitized object file is generated.

[0147] Specifically, when the page data is refreshed, the old JavaScript object file and the new JavaScript object file are compared in the type node type, key value and ref node original value according to the key value unique identifier, the changed node position is found, and the flag mark is added for the changed node to match the replacement rule; the desensitization processing function is called to desensitize the changed node, new desensitized node data is generated, then the changed node position is matched in the JavaScript desensitized object file, the old JavaScript desensitized object file and the new JavaScript desensitized object file are compared in the newRef node desensitized value, the new and old node replacement is performed according to the node replacement rule, and a new JavaScript desensitized object file is generated.

[0148] Among them, the changed node type includes:

[0149] (1) new node,

[0150] (2) deleted node,

[0151] (3) original value changed node,

[0152] (4) desensitization state changed node, such as original non-desensitized node changed to desensitized node.

[0153] The relationship between the node replacement rule and the flag mark is as follows, different marks correspond to different replacement rules:

[0154] (1) flag = 0, add new original node data;

[0155] (2) flag = 1, add new desensitized node data;

[0156] (3) flag = 2, delete old original node data;

[0157] (4) flag = 3, delete old desensitized node data,

[0158] (5) flag = 4, the old original node data is replaced by the new original node data;

[0159] (6) When flag = 5, the old original node data is replaced by the new de-sensitization node data;

[0160] (7) When flag = 6, the old de-sensitization node data is replaced by the new de-sensitization node data;

[0161] (8) When flag = 7, the old de-sensitization node data is replaced by the new original node data.

[0162] Step 5, according to the new JavaScript de-sensitization object file, the re-rendering of the front-end component is triggered, and the new de-sensitization node data is updated on the front-end page.

[0163] Specifically, according to the new JavaScript de-sensitization object file, the Patch feature of the front-end component is triggered, the re-rendering of the front-end component is performed, the changed node data is updated and rendered on the front-end page, and conversely, the unchanged node data is directly reused to present the old original node data or the old de-sensitization node data on the page.

[0164] The dynamic front-end sensitive data processing method provided in the example has the following beneficial effects:

[0165] (1) A de-sensitization processing function is added in the front-end component template parsing process to compile the template into a rendering function. The de-sensitization processing function has a built-in hooks collection function, which is divided into text type processing function, picture type processing function and hyperlink type processing function according to different data types, and can be extended according to new application scenarios. The sensitive data is de-sensitized at the source of data analysis, which is beneficial to the reuse of de-sensitized data.

[0166] (2) When the rendering function is called to process the page data, a newRef node de-sensitization value attribute is added in the node object structure definition to monitor the dynamic change of the node de-sensitization value. If it is a sensitive data node, the de-sensitization processing function is called to de-sensitize the page data, and a JavaScript de-sensitization object file is generated. The JavaScript de-sensitization object file is used to mount the full de-sensitized data node, which can effectively manage the de-sensitized value of hierarchical node data, and is beneficial to the reuse of unchanged original data and de-sensitized data when the page data is refreshed. The de-sensitized value stored in the same node can be repeatedly obtained and utilized, and only one de-sensitization processing is required during template parsing and compilation, without repeated de-sensitization.

[0167] (3) When the page data is refreshed, according to the unique identifier key value of each data node, the old JavaScript object file and the new JavaScript object file are compared in terms of the type node type, the key value, and the ref node original value, the changed node position is found out, and a flag mark is added to the changed node for matching the replacement rule; a desensitization processing function is called to desensitize the changed node, new desensitized node data is generated, then the changed node position is matched in the JavaScript desensitized object file, the old JavaScript desensitized object file and the new JavaScript desensitized object file are compared in terms of the newRef node desensitized value, according to the node replacement rule, the old and new nodes are replaced, and a new JavaScript desensitized object file is generated. This method can realize dynamic processing of front-end sensitive data, and only the changed node data needs to be re-rendered when the page is rendered. The unchanged node data can directly reuse the old original node data or the old desensitized node data regardless of its sensitive state, which is beneficial to avoid frequent update of full node data, reduce the operation times of the real DOM of the page, improve the page rendering performance and response speed, and protect the privacy and data security of users.

[0168] In the embodiment, a front-end sensitive data processing device is also provided, which is used to implement the above-mentioned embodiments and preferred embodiments, and will not be described again. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware, or a combination of software and hardware is also possible and is contemplated.

[0169] The embodiment provides a front-end sensitive data processing device, wherein the front-end includes a front-end component template and a front-end page. Figure 5 As shown in the figure, the device includes:

[0170] The adding module 501 is configured to compile the template after adding the desensitization processing function in the front-end component template to obtain a rendering function.

[0171] The obtaining and processing module 502 is configured to obtain a front-end page data set, and process the front-end page data set by using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitized object file. The first JavaScript object file is used to mount full data nodes, and the first JavaScript desensitized object file is used to mount full desensitized data nodes.

[0172] The processing module 503 is configured to, when the front-end page data set changes, process the changed front-end page data set based on the first JavaScript object file and the first JavaScript de-sensitization object file by using the rendering function and the de-sensitization processing function, and obtain a target JavaScript de-sensitization object file.

[0173] The rendering module 504 is configured to render the front-end component template by using the target JavaScript de-sensitization object file, so that the changed front-end page data is updated and displayed on the front-end page.

[0174] In some optional embodiments, the obtaining and processing module 502 includes:

[0175] The obtaining sub-module is configured to obtain the front-end page data set.

[0176] The first processing sub-module is configured to process the front-end page data set by using the rendering function, and obtain the first JavaScript object file.

[0177] The second processing sub-module is configured to perform de-sensitization processing on the front-end page data set by using the de-sensitization processing function, and obtain the first JavaScript de-sensitization object file.

[0178] In some optional embodiments, the first processing sub-module includes:

[0179] The obtaining unit is configured to obtain a plurality of page data nodes corresponding to the front-end page data set.

[0180] The encoding unit is configured to encode the plurality of page data nodes and determine a node object structure data set, the node object structure data set including type node type attribute data, key value unique identifier attribute data, ref node original value attribute data, and newRef node de-sensitization value attribute data.

[0181] The rendering unit is configured to perform hierarchical rendering on the plurality of page data nodes and child nodes of each page data node based on the node object structure data set by using the rendering function, and obtain the first JavaScript object file.

[0182] In some optional embodiments, the processing module 503 includes:

[0183] The third processing sub-module is configured to, when the front-end page data set changes, process the changed front-end page data set by using the rendering function and the de-sensitization processing function respectively, and obtain a second JavaScript object file and a second JavaScript de-sensitization object file.

[0184] The comparison determining sub-module is configured to compare the first JavaScript object file and the second JavaScript object file based on the node object structure dataset, and determine the changed node.

[0185] The fourth processing sub-module is configured to process the changed node, the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file through a de-sensitization processing function to obtain a target JavaScript de-sensitization object file.

[0186] In some optional embodiments, the fourth processing sub-module comprises:

[0187] The adding unit is configured to add a flag mark at the node position of the changed node, and the flag mark is used for matching a replacement rule.

[0188] The processing unit is configured to perform de-sensitization processing on the changed node by using the de-sensitization processing function to obtain de-sensitization node data.

[0189] The comparison unit is configured to compare the first JavaScript de-sensitization object file and the second JavaScript de-sensitization object file based on the flag mark to obtain a comparison result.

[0190] The updating unit is configured to update the first JavaScript de-sensitization object file based on the comparison result to obtain a target JavaScript de-sensitization object file.

[0191] In some optional embodiments, the de-sensitization processing function comprises a hooks collection function, and the hooks collection function comprises a text type processing function, a picture type processing function and a hyperlink type processing function.

[0192] Further function descriptions of the above-mentioned various modules and units are the same as those of the above-mentioned corresponding embodiments, and will not be described here again.

[0193] The front-end sensitive data processing apparatus in the embodiment is presented in the form of a functional unit, and the unit herein refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and a memory executing one or more software or fixed programs, and / or other devices that can provide the above-mentioned functions.

[0194] The embodiment of the application further provides a computer device with the above-mentioned Figure 5 front-end sensitive data processing apparatus.

[0195] Please refer to Figure 6 , Figure 6This is a schematic diagram of the structure of a computer device provided in an optional embodiment of the present invention, such as... Figure 6 As shown, the computer device includes one or more processors 10, memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise installed as needed. The processors can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on external input / output devices (such as display devices coupled to the interfaces). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). Figure 6 Take a processor 10 as an example.

[0196] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GDA), or any combination thereof.

[0197] The memory 20 stores instructions executable by at least one processor 10 to cause at least one processor 10 to perform the method shown in the above embodiments.

[0198] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the computer device. Furthermore, the memory 20 may include high-speed random access memory and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0199] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0200] The computer device also comprises a communication interface 30 for communication of the computer device with other devices or communication networks.

[0201] The embodiments of the present application further provide a computer readable storage medium, and the method according to the embodiments of the present application can be implemented in hardware, firmware, or recorded in a storage medium, or stored in a remote storage medium or a non-transitory machine readable storage medium and downloaded from a network and stored in a local storage medium, so that the method described herein can be processed by such software on a storage medium using a general purpose computer, a special purpose processor, or programmable or special hardware. The storage medium can be a magnetic disk, an optical disk, a read-only memory, a random access memory, a flash memory, a hard disk, or a solid state disk, etc. Further, the storage medium can also include a combination of the above-mentioned memories. It can be understood that the computer, the processor, the microprocessor controller, or the programmable hardware includes a storage component that can store or receive software or computer code, when the software or computer code is accessed and executed by the computer, the processor, or the hardware, the method shown in the above embodiments is implemented.

[0202] Part of the present application can be applied as a computer program product, for example, computer program instructions, when executed by a computer, through the operation of the computer, the method and / or technical solutions according to the present application can be invoked or provided. Those skilled in the art should understand that the form of computer program instructions in a computer readable medium includes but is not limited to source files, executable files, installation package files, etc. Correspondingly, the way of computer program instructions executed by a computer includes but is not limited to: the computer directly executes the instructions, or the computer compiles the instructions and then executes the corresponding compiled program, or the computer reads and executes the instructions, or the computer reads and installs the instructions and then executes the corresponding installed program. Here, the computer readable medium can be any available computer readable storage medium or communication medium accessible to the computer.

[0203] Although the embodiments of the present application are described in conjunction with the accompanying drawings, various modifications and changes can be made by those skilled in the art without departing from the spirit and scope of the present application, and such modifications and changes fall within the scope defined by the appended claims.

Claims

1. A method for processing sensitive front-end data, characterized in that, The front end includes front end component templates and front end pages; the method includes: After adding a desensitization function to the front-end component template, the template is compiled to obtain the rendering function. Obtain the front-end page dataset, and process the front-end page dataset using the rendering function and the de-identification processing function respectively to obtain a first JavaScript object file and a first JavaScript de-identification object file. The first JavaScript object file is used to mount the full data nodes, and the first JavaScript de-identification object file is used to mount the full de-identified data nodes. When the front-end page dataset changes, based on the first JavaScript object file and the first JavaScript de-identified object file, the rendering function and the de-identification processing function are used to process the changed front-end page dataset to obtain the target JavaScript de-identified object file; The front-end component template is rendered using the target JavaScript de-identified object file, so that the changed front-end page data is updated and displayed on the front-end page; Wherein, the front-end page dataset changes, and based on the first JavaScript object file and the first JavaScript de-identified object file, the rendering function and the de-identification processing function are used to process the changed front-end page dataset to obtain the target JavaScript de-identified object file, including: When the front-end page dataset changes, the rendering function and the desensitization processing function are used to process the changed front-end page dataset to obtain a second JavaScript object file and a second JavaScript desensitized object file. Based on the node object structure dataset, the node attributes of the first JavaScript object file and the second JavaScript object file are compared to determine the changed nodes. Based on the changed node, the first JavaScript de-identified object file, and the second JavaScript de-identified object file, the target JavaScript de-identified object file is obtained after processing by the de-identification processing function; Based on the changed node, the first JavaScript de-identified object file, and the second JavaScript de-identified object file, the target JavaScript de-identified object file is obtained after processing by the de-identification processing function, including: Add a flag marker to the node position of the changed node; the flag marker is used to match the replacement rule. The desensitization processing function is used to desensitize the changed nodes to obtain desensitized node data; Based on the flag, the first JavaScript de-identified object file and the second JavaScript de-identified object file are compared to obtain the comparison result; Based on the comparison results, the first JavaScript de-identified object file is updated to obtain the target JavaScript de-identified object file.

2. The method according to claim 1, characterized in that, Obtain the front-end page dataset, and process the front-end page dataset using the rendering function and the de-identification processing function respectively to obtain a first JavaScript object file and a first JavaScript de-identified object file, including: Obtain the aforementioned front-end page dataset; The rendering function is used to process the front-end page dataset to obtain the first JavaScript object file; The de-identification processing function is used to de-identify the front-end page dataset to obtain the first JavaScript de-identified object file.

3. The method according to claim 2, characterized in that, The rendering function is used to process the front-end page dataset to obtain the first JavaScript object file, including: Obtain multiple page data nodes corresponding to the aforementioned front-end page dataset; Encode the multiple page data nodes and determine the node object structure dataset, which includes type node type attribute data, key value unique identifier attribute data, ref node original value attribute data, and newRef node desensitized value attribute data; Based on the node object structure dataset, the rendering function is used to perform hierarchical rendering of the multiple page data nodes and the child nodes of each page data node to obtain the first JavaScript object file.

4. The method according to claim 1, characterized in that, The desensitization processing function includes a collection of hooks functions, which includes text type processing functions, image type processing functions, and hyperlink type processing functions.

5. A front-end sensitive data processing device, characterized in that, The front end includes a front end component template and a front end page; the device includes: An additional module is added to the front-end component template to add a desensitization processing function and then compile the template to obtain a rendering function. The acquisition and processing module is used to acquire the front-end page dataset and process the front-end page dataset using the rendering function and the de-identification processing function respectively to obtain a first JavaScript object file and a first JavaScript de-identified object file. The first JavaScript object file is used to mount the full data node, and the first JavaScript de-identified object file is used to mount the full de-identified data node. The processing module is used to process the changed front-end page dataset based on the first JavaScript object file and the first JavaScript de-identified object file using the rendering function and the de-identification processing function to obtain the target JavaScript de-identified object file when the front-end page dataset changes. The rendering module is used to render the front-end component template using the target JavaScript desensitized object file, so that the changed front-end page data is updated and displayed on the front-end page; The processing module includes: The third processing submodule is used to process the changed front-end page dataset using the rendering function and the desensitization processing function respectively when the front-end page dataset changes, so as to obtain the second JavaScript object file and the second JavaScript desensitized object file. The comparison and determination submodule is used to compare the node attributes of the first JavaScript object file and the second JavaScript object file based on the node object structure dataset to determine the changed nodes. The fourth processing submodule is used to process the target JavaScript desensitized object file based on the changed node, the first JavaScript desensitized object file, and the second JavaScript desensitized object file through the desensitization processing function; The fourth processing submodule includes: An adding unit is used to add a flag marker at the node position of the changed node, and the flag marker is used to match the replacement rule; The processing unit is used to perform desensitization processing on the changed nodes using the desensitization processing function to obtain desensitized node data; The comparison unit is used to compare the first JavaScript de-identified object file and the second JavaScript de-identified object file based on the flag tag, and obtain the comparison result; The update unit is used to update the first JavaScript de-identified object file based on the comparison result to obtain the target JavaScript de-identified object file.

6. A computer device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the front-end sensitive data processing method according to any one of claims 1 to 4 by executing the computer instructions.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to perform the front-end sensitive data processing method according to any one of claims 1 to 4.

8. A computer program product, characterized in that, It includes computer instructions for causing a computer to perform the front-end sensitive data processing method according to any one of claims 1 to 4.

Images