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

Abstract

The invention relates to the technical field of data processing, and discloses a front-end sensitive data processing method, device and equipment and a storage medium, a desensitization processing function is added in a front-end component template, and the front-end component template is compiled into a rendering function, so that sensitive data can be desensitized at a data analysis source; and multiplexing of the desensitized data is facilitated. Furthermore, after the front-end page data set is changed, the original data and the desensitization data which are not changed are reused, so that the desensitization value stored in the same node can be repeatedly acquired and utilized, namely, only one-time desensitization processing needs to be carried out during template analysis and compiling, and repeated desensitization is not needed. And finally, the updated target JavaScript desensitization object file is utilized to render the front-end component template, so that reprocessing and total rendering of the whole front-end page data are avoided, unnecessary operation is reduced, the page rendering process is optimized, and the page rendering performance and the response speed are improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a front-end sensitive data processing method, device, equipment and storage medium. Background Art

[0002] With the rapid development of Internet information and big data technology, data leakage incidents 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. It has a wide range of application scenarios in different Web application system projects. Through desensitization rules, some sensitive information is deformed, thereby reducing the sensitivity of system public data and achieving reliable protection of sensitive data.

[0003] At present, in the development process of Web application systems with front-end and back-end separation, sensitive data processing is usually carried out on the back-end. After the client sends a data request, the server obtains the requested data from the database, matches sensitive fields with a variety of desensitization rules for desensitization, and finally returns the desensitized data to the client and renders it on the page. Faced with massive amounts of data that need to be processed in real time, due to different user roles and permissions, the interface request parameter values ​​sent by the client are also different, and the desensitized data that needs to be presented on the page will also be different, which will result in multiple desensitization processes for a large amount of data in the same field column, reducing the interface data response speed and Web page response speed. Summary of the invention

[0004] In view of this, the present invention provides a front-end sensitive data processing method, device, equipment and storage medium to solve the problem that in a Web application system with separated front-end and back-end, due to factors such as large data volume and user role permission management mechanism, the back-end repeatedly performs desensitization processing on massive sensitive data, wasting interface response time and page response speed.

[0005] In a first aspect, the present invention 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 includes:

[0006] After adding a desensitizing processing function to the front-end component template, the template is compiled to obtain a rendering function; the front-end page data set is obtained, and the front-end page data set is processed by using the rendering function and the desensitizing processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitizing object file, the first JavaScript object file is used to mount the full data node, and the first JavaScript desensitizing object file is used to mount the full desensitized data node; when the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitizing object file, the changed front-end page data set is processed by using the rendering function and the desensitizing processing function to obtain a target JavaScript desensitizing object file; the front-end component template is rendered by using the target JavaScript desensitizing 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 present invention can desensitize sensitive data at the source of data parsing by adding a desensitizing processing function in the front-end component template and compiling the front-end component template into a rendering function, which is conducive to the reuse of desensitized data. Further, the rendering function and the desensitizing processing function are called respectively to process the front-end page data set, and the desensitized value of the node corresponding to the front-end page data set can be effectively managed. Further, when the front-end page data set changes, the first JavaScript object file and the first JavaScript desensitizing object file can be directly combined, and the rendering function and the desensitizing processing function can be called respectively to process the changed front-end page data set to obtain the updated target JavaScript desensitizing object file. When the front-end page data is refreshed, the unchanged original data and desensitized data are reused, so that the desensitized value stored in the same node can be repeatedly obtained and utilized, that is, only one desensitization process is required during template parsing and compilation, and there is no need to repeat the desensitization multiple times. Finally, the front-end component template is rendered using the updated target JavaScript desensitized object file, and only the node data that has changed needs to be re-rendered to make the front-end page data that has changed updated and displayed on the front-end page, avoiding the reprocessing and full rendering of the entire front-end page data, reducing unnecessary operations, optimizing the page rendering process, and then improving the page rendering performance and response speed. Therefore, by implementing the present invention, dynamic processing of front-end sensitive data can be achieved, and only the node data that has changed needs to be re-rendered when the page is rendered. The unchanged node data, regardless of its sensitive state, can directly reuse its old original node data or old desensitized node data, which is conducive to avoiding frequent updates of full node data, reducing the number of operations of the real DOM of the page, improving page rendering performance and response speed, and protecting the privacy and data security of users.

[0008] In an optional implementation, a front-end page data set is obtained, and the front-end page data set is processed 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] Obtain a front-end page data set; use a rendering function to process the front-end page data set to obtain a first JavaScript object file; use a desensitization processing function to desensitize the front-end page data set to obtain a first JavaScript desensitized object file.

[0010] The front-end sensitive data processing method provided by the present invention utilizes a rendering function and a desensitizing processing function to process a front-end page data set respectively, and can desensitize sensitive data at the source of data parsing, which is conducive to the reuse of desensitized data.

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

[0012] Acquire multiple page data nodes corresponding to the front-end page data set; encode the multiple page data nodes and determine the node object structure data set, 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 desensitized value attribute data; based on the node object structure data set, use the rendering function to hierarchically render the multiple page data nodes and the child nodes of each page data node to obtain the first JavaScript object file.

[0013] The front-end sensitive data processing method provided by the present invention can make the front-end page data have a clear and standardized structural presentation during the processing process by encoding multiple page data nodes and determining the node object structure data set. Further, by using the rendering function to perform hierarchical rendering on multiple page data nodes and the sub-nodes of each page data node, it is possible to process them in an orderly manner according to the hierarchical relationship between the data nodes, ensuring that each node and its sub-nodes are correctly associated and organized during the rendering process, so that the first JavaScript object file finally obtained can be used to efficiently mount the data node, so that the data can be displayed and used in the front-end page-related scenes with a reasonable structure.

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

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

[0016] The front-end sensitive data processing method provided by the present invention can accurately determine the changed nodes through node attribute comparison, avoid unnecessary processing of unchanged nodes, and achieve accurate positioning of changed nodes. Further, in combination with the determined changed nodes, the first JavaScript desensitizing object file and the second JavaScript desensitizing object file, and using the desensitizing processing function to process and obtain the target JavaScript desensitizing object file, the desensitized data corresponding to the changed nodes can be quickly and accurately updated when the front-end page data is updated, ensuring that sensitive data is always presented in a desensitized state in scenes such as page display, effectively protecting the user's privacy and data security. At the same time, the first JavaScript desensitizing object file and the second JavaScript desensitizing object file are used to process the changed nodes, so as to achieve the reuse of desensitized data, without the need to re-desensitize all data, thereby improving processing efficiency.

[0017] In an optional implementation, based on the changed node, the first JavaScript desensitized object file and the second JavaScript desensitized object file, after being processed by a desensitization processing function, a target JavaScript desensitized object file is obtained, including:

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

[0019] The front-end sensitive data processing method provided by the present invention can accurately locate and identify the changed nodes by adding a flag tag for matching the replacement rule at the node position of the changed node. Further, by using the desensitization processing function to desensitize the changed nodes, it can be ensured that when the front-end page data changes, the sensitive information still exists in the new node data in a desensitized form, effectively protecting the user's privacy and preventing the risk of sensitive data leakage during the page update process, so that the front-end page can always follow the data security principle when displaying the changed content, and meet the requirements for user data privacy protection. Finally, when the first JavaScript desensitization object file is updated, the flag tag can be used to accurately replace the desensitized node data to the corresponding position in the first JavaScript desensitization object file, thereby realizing efficient updating of the desensitized data file.

[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 present invention can desensitize a variety of common sensitive data at the source of data parsing through text type processing functions, image type processing functions and hyperlink type processing functions, which is conducive to the reuse of desensitized data. At the same time, it effectively avoids the situation where some sensitive data is omitted due to differences in data types.

[0022] In a second aspect, the present invention provides a front-end sensitive data processing device, wherein the front-end includes a front-end component template and a front-end page; the device includes:

[0023] An adding module is used to add a desensitizing processing function to the front-end component template and then compile the template to obtain a rendering function; an acquisition and processing module is used to obtain a front-end page data set, and use a rendering function and a desensitizing processing function to process the front-end page data set respectively to obtain a first JavaScript object file and a first JavaScript desensitizing object file, the first JavaScript object file is used to mount a full data node, and the first JavaScript desensitizing object file is used to mount a full desensitized data node; a processing module is used to, when the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitizing object file, use a rendering function and a desensitizing processing function to process the changed front-end page data set to obtain a target JavaScript desensitizing object file; a rendering module is used to render the front-end component template using a target JavaScript desensitizing 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 invention provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the front-end sensitive data processing method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0025] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the front-end sensitive data processing method of the above-mentioned first aspect or any corresponding embodiment thereof.

[0026] In a fifth aspect, the present invention provides a computer program product, comprising computer instructions, which are used to enable a computer to execute the front-end sensitive data processing method of the above-mentioned first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] In order to more clearly illustrate the specific implementation methods of the present invention or the technical solutions in the prior art, the drawings required for use in the specific implementation methods or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some implementation methods of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

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

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

[0030] Figure 3 is a flow chart of another front-end sensitive data processing method according to an embodiment of the present invention;

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

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

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

[0034] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0035] The embodiment of the present invention provides a front-end sensitive data processing method, which dynamically processes sensitive data at the front end to achieve the rendering speed of the front-end page and improve the user experience of Web users.

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

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

[0038] Step S101, add a desensitization processing function to the front-end component template and then compile the template to obtain a rendering function.

[0039] Among them, the front end can include front-end component templates and front-end pages.

[0040] Furthermore, the front-end component templates may include component templates of popular front-end frameworks such as Vue and React.

[0041] Furthermore, the desensitization function has a built-in hooks collection function, which can be used to judge sensitive data and desensitize page data.

[0042] Furthermore, the hooks collection function may include a text type processing function, an image type processing function, and a hyperlink type processing function, and the input parameters include a unique identifier key value of the data tag, a data label value, and a data value value.

[0043] The text type processing function introduces a filter globally, determines whether desensitization is needed based on the data field name characteristics, and uses manual closure to be compatible with a variety of character lengths for different regular matching processing based on the character length characteristics. For example, the phone field, which is usually 11 digits long, can use the phone number filter to hide the key digits of the phone field; the card field, which is usually 18 digits long, can use the card number filter to hide the key digits of the card field.

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

[0045] The hyperlink type processing function can make sensitive judgments in combination with the user's role permission management mechanism. If the URL path is inaccessible to the current user, the URL path is replaced with an empty link # value, making the hyperlink jump invalid.

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

[0047] Step S102, obtaining a front-end page data set, and processing the front-end page data set using a rendering function and a desensitization processing function, respectively, to obtain a first JavaScript object file and a first JavaScript desensitization object file.

[0048] Among them, the front-end page data set may include static loading data and request response data.

[0049] Furthermore, the page data tag types corresponding to the front-end page data set may include text type, image type, and hyperlink type. Among them, the text type may include a title tag, a paragraph tag, a table tag, a form tag, and the like.

[0050] Furthermore, the first JavaScript object file is used to mount a full data node, which is an original data node that has not been desensitized.

[0051] The first JavaScript desensitized object file is used to mount a full amount of desensitized data nodes, which may include data nodes that do not require desensitization and data nodes after desensitization.

[0052] Specifically, the rendering function and the desensitizing processing function can be used to process the front-end page data set and obtain the corresponding first JavaScript object file mounted on the full data node and the first JavaScript desensitizing object file mounted on the full desensitized data node.

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

[0054] Specifically, when the front-end page data set changes, that is, the front-end page data is refreshed, by reusing the unchanged original data (first JavaScript object file) and desensitized data (first JavaScript desensitized object file), and combining the rendering function and the desensitization processing function to process the changed front-end page data set, the target JavaScript desensitized object file corresponding to the changed front-end page data set can be obtained. By using the unchanged original data and desensitized data in this way, the desensitized value stored in the same node can be repeatedly obtained and utilized, that is, only one desensitization process is required during template parsing and compilation, without repeated desensitization.

[0055] Step S104, using the target JavaScript desensitized object file to render the front-end component template, 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 desensitized object file. By triggering the Patch feature, it is possible to accurately identify which data are the node data that have changed and which are the node data that have not changed.

[0057] Furthermore, for the changed node data, with the help of the Patch feature, the front-end component template will re-render these node data based on the relevant information in the target JavaScript desensitized 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 users see the latest and accurate content.

[0058] Furthermore, 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 the 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 that may be caused by frequent updates of the full amount of node data, effectively improves the rendering performance and response speed of the front-end page, and also ensures that users can browse the front-end page smoothly and obtain accurate information, further maintaining the stability and consistency of the front-end page data display.

[0059] Among them, 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), which is used to compare the new and old virtual DOM (in Vue and React, the state changes of components are first calculated and updated on the virtual DOM) structures, and then only update the real DOM for the parts that have actually changed.

[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 old and new virtual DOM trees, and uses an algorithm called "Diffing" (such as depth-first traversal) to find the differences. This difference may be the addition, deletion, attribute change, or text content change of a node.

[0061] The front-end sensitive data processing method provided in this embodiment can desensitize sensitive data at the source of data parsing by adding a desensitizing processing function in the front-end component template and compiling the front-end component template into a rendering function, which is conducive to the reuse of desensitized data. Further, by calling the rendering function and the desensitizing processing function to process the front-end page data set respectively, the desensitized value of the node corresponding to the front-end page data set can be effectively managed. Further, when the front-end page data set changes, the first JavaScript object file and the first JavaScript desensitizing object file can be directly combined, and the rendering function and the desensitizing processing function can be called respectively to process the changed front-end page data set to obtain the updated target JavaScript desensitizing object file. By reusing the unchanged original data and desensitized data when the front-end page data is refreshed, the desensitized value stored in the same node can be repeatedly obtained and utilized, that is, only one desensitization process is required during template parsing and compilation, and there is no need to repeat the desensitization multiple times. Finally, the front-end component template is rendered using the updated target JavaScript desensitized object file, and only the node data that has changed needs to be re-rendered to make the front-end page data that has changed updated and displayed on the front-end page, avoiding the reprocessing and full rendering of the entire front-end page data, reducing unnecessary operations, optimizing the page rendering process, and then improving the page rendering performance and response speed. Therefore, by implementing the present invention, dynamic processing of front-end sensitive data can be achieved, and only the node data that has changed needs to be re-rendered when the page is rendered. The unchanged node data, regardless of its sensitive state, can directly reuse its old original node data or old desensitized node data, which is conducive to avoiding frequent updates of full node data, reducing the number of operations of the real DOM of the page, improving page rendering performance and response speed, and protecting the privacy and data security of users.

[0062] In this embodiment, a front-end sensitive data processing method is provided, which can be used in a Web application system with separated front-end and back-end. Figure 2 is a flow chart of a front-end sensitive data processing method according to an embodiment of the present invention. Figure 2 As shown, the process includes the following steps:

[0063] Step S201, add a desensitization processing function to the front-end component template and then compile the template to obtain a rendering function. Figure 1 Step S101 of the illustrated embodiment will not be described in detail here.

[0064] Step S202, obtaining a front-end page data set, and processing the front-end page data set using a rendering function and a desensitization processing function, respectively, to obtain a first JavaScript object file and a first JavaScript desensitization object file.

[0065] Specifically, the above step S202 includes:

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

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

[0068] Step S2022: Process the front-end page data set using a rendering function to obtain a first JavaScript object file.

[0069] Specifically, the front-end page data set can be processed through the rendering function, and the first JavaScript object file for mounting the full data node can be obtained.

[0070] In some optional implementations, the above step S2022 includes:

[0071] Step a1, obtaining multiple page data nodes corresponding to the front-end page data set.

[0072] Step a2, encoding multiple page data nodes and determining a node object structure data set.

[0073] Step a3: Based on the node object structure data set, a rendering function is used to perform hierarchical rendering on multiple page data nodes and sub-nodes of each page data node to obtain a first JavaScript object file.

[0074] Among them, 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 desensitized value attribute data.

[0075] The type node type attribute data is used to clarify the type of each node, such as a text node (including text entered by the user, text description displayed on the page, etc.), an image node (corresponding to an image element on the page, associated with a specific image resource through a link or other means), or a hyperlink node (a link to other pages or resources), etc. By clarifying the node type, different processing methods can be adopted for different types of nodes.

[0076] The key value unique identifier attribute data can facilitate the accurate positioning of specific nodes in the subsequent processing process, especially when it comes to operations such as node comparison, update, and replacement, the key value can play a role in accurate identification.

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

[0078] The newRef node desensitized value attribute data may be empty in the initial stage. It is mainly used to store the desensitized node value after the subsequent desensitization process. When desensitizing the front-end page data, for sensitive data nodes that need to protect privacy, their processed desensitized values ​​will be stored in this attribute.

[0079] Specifically, multiple corresponding page data nodes can be extracted from the front-end page data set. 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, image links, hyperlinks, etc. Each node carries the data representation of a certain part of the front-end page.

[0080] Furthermore, data nodes can be encoded to store node types and structures. Through encoding, each node can be given a specific identifier or format that is easy for computers to recognize and process, so that these nodes can be operated and analyzed more efficiently and accurately later.

[0081] Furthermore, the type node type, key value unique identifier, ref node original value and other attributes are defined in the node object structure, and the newRef node desensitized value attribute is added to monitor the dynamic changes of the node desensitized value.

[0082] Finally, based on the determined node object structure data set, the rendering function will be based on the attribute data of each node, such as the type, key value unique identifier, original value, and the hierarchical relationship between each node and its child nodes. For multiple page data nodes and their respective child nodes, the rendering function can render each node and its child nodes in turn, starting from the root node, according to predetermined rules and logic.

[0083] For example, for a front-end page data containing a multi-layer nested structure (such as a page with a multi-level menu, each menu option may contain a submenu, etc.), the rendering function will first process the top-level node, and then gradually process the child nodes of each level downward according to the hierarchical relationship between the nodes, and combine and arrange them in a suitable manner to form a complete rendering result with a hierarchical structure.

[0084] Furthermore, through the above-mentioned hierarchical rendering process, a first JavaScript object file in a tree format may be generated.

[0085] Furthermore, the first JavaScript object file exists in the form of a specific JavaScript object, which contains the complete structure of the front-end page data after rendering, including relevant information of each node and its child nodes, and this information is organized in order according to a hierarchical relationship.

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

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

[0088] Step S203: When the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitized object file, the changed front-end page data set is processed using the rendering function and the desensitization processing function to obtain the target JavaScript desensitized object file. Figure 1 Step S103 of the illustrated embodiment will not be described in detail here.

[0089] Step S204: 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. Figure 1 Step S104 of the illustrated embodiment will not be described in detail 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 presentation during the processing process by encoding multiple page data nodes and determining the node object structure data set. Further, by using the rendering function to perform hierarchical rendering on multiple page data nodes and the sub-nodes of each page data node, it can be processed in an orderly manner according to the hierarchical relationship between the data nodes, ensuring that each node and its sub-nodes are correctly associated and organized during the rendering process, so that the first JavaScript object file finally obtained can be used to efficiently mount the data node, so that the data can be displayed and used in the front-end page-related scenes with a reasonable structure.

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

[0092] Step S301, add a desensitization processing function to the front-end component template and then compile the template to obtain a rendering function. Figure 1 Step S101 of the illustrated embodiment will not be described in detail here.

[0093] Step S302, obtain the front-end page data set, and process the front-end page data set using the rendering function and the desensitization processing function respectively to obtain the first JavaScript object file and the first JavaScript desensitization object file. Figure 2 Step S202 of the illustrated embodiment will not be described in detail here.

[0094] Step S303, when the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitized object file, the changed front-end page data set is processed using the rendering function and the desensitization processing function to obtain the target JavaScript desensitized 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, that is, the front-end page data set changes, the rendering function and the desensitizing processing function can be used to process the changed front-end page data set and obtain the corresponding second JavaScript object file and the second JavaScript desensitizing object file. The specific processing process can refer to the description of the above steps S2022 and S2023, which will not be repeated here.

[0098] Step S3032: Based on the node object structure data set, compare the node attributes of the first JavaScript object file and the second JavaScript object file to determine the changed nodes.

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

[0100] When comparing the type of nodes, for each pair of corresponding nodes matched by the key value, their type node type attribute data is compared. Check whether the types of the two nodes are consistent, such as determining whether they are text nodes, image nodes, or hyperlink nodes. If the type has changed, then the node is likely to be a changed node that has undergone some kind of change, and further attention needs to be paid to its specific situation on the page.

[0101] Furthermore, by comparing key values, we can ensure the accuracy of the match and check whether the key value has been tampered with or assigned incorrectly. Under normal circumstances, the key values ​​of the corresponding nodes should be exactly the same. If they are different, it also indicates that the node is abnormal and may belong to the category of changed nodes.

[0102] Furthermore, the original value attribute data of the ref node of each pair of corresponding nodes can be compared to determine whether the original data value carried by the node has changed. If the original value of the ref node is different, it means that the data content of the node has changed, then this node is one of the changed nodes to be found, and it can be clearly seen that its change is reflected in the original data value.

[0103] Furthermore, by comparing the above properties of the node type, key value, ref node original value, etc., once it is found that a node is different from the previous one in any one or more of these properties, the node can be determined to be 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 previous key value matching and the structure of the file itself), the position of the changed node can be accurately found, thereby completely determining all the changed nodes and their positions.

[0104] Step S3033, based on the changed node, the first JavaScript desensitized object file and the second JavaScript desensitized object file, after being processed by the desensitization processing function, a target JavaScript desensitized object file is obtained.

[0105] Specifically, the changed nodes may be desensitized according to the desensitization processing function, and at the same time, the updated target JavaScript desensitized object file may be determined in combination with the desensitized changed nodes, the first JavaScript desensitized object file, and the second JavaScript desensitized object file.

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

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

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

[0109] Step b3: Based on the flag tag, compare the first JavaScript desensitized object file and the second JavaScript desensitized object file 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 tag is used to match the replacement rule.

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

[0113] Furthermore, since the desensitization processing function has a built-in hooks collection function, it 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 change node is of 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 sensitive content such as ID card number and phone number through regular expressions. Once the sensitive information is confirmed to exist, it will be processed according to the preset text desensitization strategy, such as processing the mobile phone number "13812345678" into "138****5678", thereby obtaining the desensitized text node data.

[0115] If the change node is a change node of the image type, the image type processing function in the hooks collection function will adopt the corresponding image desensitization strategy according to the situation of the image, such as whether it contains sensitive facial information, sensitive text information or geographical information. For example, if the image contains sensitive facial information, the image editing algorithm will be used to blur the face part, and then the desensitized image node data will be obtained.

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

[0117] Furthermore, the specific node positions that need to be updated can be quickly and accurately determined by the flag mark. Therefore, the positions corresponding to the changed nodes can be accurately found in the first JavaScript desensitized object file according to the flag mark previously added to the changed nodes.

[0118] Further, the old first JavaScript desensitized object file and the new second JavaScript object file can be compared for the node newRef node desensitization value. According to the node replacement rule, the new desensitized node data generated by the desensitization process (i.e., the desensitized node data of the text, picture, hyperlink, etc. obtained above) is replaced into the old first JavaScript desensitized object file according to its corresponding position. Through such a new and old node replacement operation, a new JavaScript desensitized object file, i.e., the target JavaScript desensitized object file, is finally generated.

[0119] The change node types may include:

[0120] (1) Add a new node,

[0121] (2) Delete the node,

[0122] (3) Original value change node,

[0123] (4) Nodes whose desensitization status changes, such as the original undesired node changes to a node that needs to be desensitized.

[0124] Furthermore, the relationship between the node replacement rule and the flag is as follows. Different flags correspond to different replacement rules:

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

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

[0127] (3) When flag = 2, delete the old original node data;

[0128] (4) When flag=3, delete the old desensitized node data.

[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 desensitized node data;

[0131] (7) When flag = 6, the old desensitized node data is replaced by the new desensitized node data;

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

[0133] Step S304: 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. Figure 1 Step S104 of the illustrated embodiment will not be described in detail here.

[0134] The front-end sensitive data processing method provided by this embodiment avoids unnecessary processing of unchanged nodes by adding a flag tag for matching replacement rules at the node position of the changed node, and can accurately locate and identify the changed nodes. Further, the desensitization processing function is used to desensitize the changed nodes, which can ensure that when the front-end page data changes, the sensitive information still exists in the new node data in a desensitized form, effectively protecting the user's privacy, preventing the risk of sensitive data leakage during the page update process, so that the front-end page can always follow the data security principle when displaying the changed content, and meet the requirements for user data privacy protection. Finally, when the first JavaScript desensitization object file is updated, the flag tag can be used to accurately replace the desensitized node data to the corresponding position in the first JavaScript desensitization object file, thereby 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 nodes, realizing the reuse of desensitized data, without the need to re-desensitize all data, and improving processing efficiency.

[0135] In one example, if Figure 4 As shown, a dynamic front-end sensitive data processing method is provided, comprising the following steps:

[0136] Step 1: Get the page data visited by the user, which includes static loading data and request response data.

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

[0138] Step 2: Add a desensitization function during the front-end component template parsing process and compile the template into a rendering function.

[0139] Specifically, front-end components include popular front-end framework components such as Vue and React. The compiler parses the component template into a JavaScript type rendering function to generate a DOM node.

[0140] Specifically, the desensitization processing function has a built-in hooks collection function, which is used to judge and desensitize page data. Specifically, it includes but is not limited to text type processing functions, image type processing functions and hyperlink type processing functions. The input parameters include the unique identifier key value of the data tag, the data label value and the data value.

[0141] Among them, the text type processing function introduces a filter globally, determines whether desensitization processing is needed through the characteristics of the data field name, and combines the characteristics of character length to adopt a manual closure method to be compatible with various character lengths for different regular matching processing. For example, the phone field of a mobile phone number is usually 11 digits, and the mobile phone number filter can be called to hide the key digits of the phone field; the card number field is usually 18 digits, and the card number filter can be called to hide the key digits of the card field.

[0142] The image type processing function can fill sensitive areas in the form of mosaics through Canvas technology, or identify and fill sensitive areas with similarity through image recognition technology.

[0143] The hyperlink type processing function performs sensitive judgment in combination with the user's role permission management mechanism. If the URL path is inaccessible to the current user, the URL path is replaced with an empty link # value, making the hyperlink jump invalid.

[0144] Step 3, call the rendering function to process the page data and generate a JavaScript object file. The JavaScript object file is used to mount the data node, which is the original data node without desensitization; call the desensitization processing function to perform data desensitization processing on the page data and generate a JavaScript desensitization object file. The JavaScript desensitization object file is used to mount the desensitized data node, which includes the data node that does not need to be desensitized and the data node after desensitization.

[0145] Specifically, the data processing process is as follows: encode the data node, store the node type and structure, define the type node type, key value unique identifier, ref node original value and other attributes in the node object structure, and add the newRef node desensitized value attribute to monitor the dynamic changes of the node desensitized value. Call the rendering function to perform hierarchical rendering of the data node and its child nodes, and generate a JavaScript object file in a tree format. If it is a sensitive data node, call the desensitization processing function in step 2 to perform desensitization processing, generate a new desensitized value of the newRef node, and generate a JavaScript desensitized object file in a tree format.

[0146] Step 4, when the page data is refreshed, compare the node attributes of the old JavaScript object file and the new JavaScript object file to find the changed nodes, call the desensitization processing function to desensitize the changed nodes, generate new desensitized node data, and then match the changed node position in the JavaScript desensitized object file, replace the old and new nodes according to the node replacement rules, and generate a new JavaScript desensitized object file.

[0147] Specifically, when the page data is refreshed, the old JavaScript object file and the new JavaScript object file are compared based on the key value unique identifier for the node type node type, key value, and ref node original value to find the changed node position, and add a flag tag to the changed node for matching the replacement rule; the desensitization processing function is called to desensitize the changed node to generate new desensitized node data, and 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 for the node newRef node desensitized value, and the old and new nodes are replaced according to the node replacement rule to generate a new JavaScript desensitized object file.

[0148] The types of changed nodes include:

[0149] (1) Add a new node,

[0150] (2) Delete the node,

[0151] (3) Original value change node,

[0152] (4) Nodes whose desensitization status changes, such as the original undesired node changes to a node that needs to be desensitized.

[0153] The relationship between the node replacement rule and the flag is as follows. Different flags correspond to different replacement rules:

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

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

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

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

[0158] (5) When 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 desensitized node data;

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

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

[0162] Step 5: trigger the re-rendering of the front-end component based on the new JavaScript desensitized object file, and update the new desensitized node data on the front-end page.

[0163] Specifically, the Patch feature of the front-end component is triggered based on the new JavaScript desensitized object file, and the front-end component is re-rendered. The changed node data is updated and rendered on the front-end page. On the contrary, the unchanged node data can be directly reused by reusing its old original node data or old desensitized node data and presented on the page.

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

[0165] (1) Add a desensitization processing function during the front-end component template parsing process and compile the template into a rendering function. The desensitization processing function has a built-in hooks collection function, which is divided into text type processing functions, image type processing functions, and hyperlink type processing functions according to different data types. Hooks can be expanded and added according to new application scenarios. Sensitive data is desensitized at the source of data parsing, which is conducive to the reuse of desensitized data.

[0166] (2) When calling the rendering function to process the page data, add the newRef node desensitized value attribute in the node object structure definition to monitor the dynamic changes of the node desensitized value. If it is a sensitive data node, call the desensitization processing function to desensitize the page data and generate a JavaScript desensitized object file. The JavaScript desensitized object file is used to mount the full amount of desensitized data nodes, which can effectively manage the desensitized values ​​of the hierarchical node data, which is conducive to the reuse of the unchanged original data and desensitized data when the page data is refreshed, and the desensitized value stored in the same node can be repeatedly obtained and used. It only needs to be desensitized once when the template is parsed and compiled, and there is no need to repeat the desensitization multiple times.

[0167] (3) When the page data is refreshed, the old JavaScript object file and the new JavaScript object file are compared in terms of the node type, key value, and ref node original value according to the unique identifier key value of each data node, the changed node position is found, and a flag tag is added to the changed node for matching the replacement rule; the desensitization processing function is called to desensitize the changed node to generate new desensitized node data, and 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 node newRef node desensitization value, and the old and new nodes are replaced according to the node replacement rule to generate a new JavaScript desensitized object file. This method can realize dynamic processing of sensitive data on the front end. When rendering the page, only the node data that has changed needs to be re-rendered. The unchanged node data, regardless of its sensitive state, can directly reuse its old original node data or old desensitized node data, which is conducive to avoiding frequent updates of the full amount of node data, reducing the number of operations on the real DOM of the page, improving page rendering performance and response speed, and protecting user privacy and data security.

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

[0169] This embodiment provides a front-end sensitive data processing device, the front end includes a front-end component template and a front-end page; Figure 5 As shown, the device comprises:

[0170] An additional module 501 is provided, which is used to add a desensitization processing function to the front-end component template and then compile the template to obtain a rendering function.

[0171] The acquisition and processing module 502 is used to acquire the front-end page data set, and process the front-end page data set using the rendering function and the desensitizing processing function respectively, to obtain a first JavaScript object file and a first JavaScript desensitizing object file, the first JavaScript object file is used to mount the full data node, and the first JavaScript desensitizing object file is used to mount the full desensitized data node.

[0172] Processing module 503 is used to process the changed front-end page data set based on the first JavaScript object file and the first JavaScript desensitized object file using the rendering function and the desensitization processing function to obtain the target JavaScript desensitized object file when the front-end page data set changes.

[0173] The rendering module 504 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.

[0174] In some optional implementations, the acquisition and processing module 502 includes:

[0175] Get submodule, used to get front-end page data set.

[0176] The first processing submodule is used to process the front-end page data set by using a rendering function to obtain a first JavaScript object file.

[0177] The second processing submodule is used to perform desensitization processing on the front-end page data set by using the desensitization processing function to obtain a first JavaScript desensitization object file.

[0178] In some optional implementations, the first processing submodule includes:

[0179] The acquisition unit is used to acquire multiple page data nodes corresponding to the front-end page data set.

[0180] The encoding unit is used to encode multiple page data nodes and determine a node object structure data set, wherein 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 desensitized value attribute data.

[0181] The rendering unit is used to perform hierarchical rendering on multiple page data nodes and sub-nodes of each page data node based on the node object structure data set by using a rendering function to obtain a first JavaScript object file.

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

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

[0184] 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 data set to determine the changed nodes.

[0185] The fourth processing submodule is used to obtain a target JavaScript desensitized object file based on the changed node, the first JavaScript desensitized object file and the second JavaScript desensitized object file through processing by a desensitization processing function.

[0186] In some optional implementations, the fourth processing submodule includes:

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

[0188] The processing unit is used to perform desensitization processing on the changed nodes by using a desensitization processing function to obtain desensitized node data.

[0189] The comparison unit is used to compare the first JavaScript desensitized object file and the second JavaScript desensitized object file based on the flag tag to obtain a comparison result.

[0190] The updating unit is used to update the first JavaScript desensitized object file based on the comparison result to obtain a target JavaScript desensitized object file.

[0191] In some optional implementations, 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.

[0192] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

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

[0194] The embodiment of the present invention also provides a computer device having the above Figure 5 The front-end sensitive data processing device is shown.

[0195] See also Figure 6 , Figure 6is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 6 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 6 A processor 10 is taken as an example.

[0196] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0197] The memory 20 stores instructions executable by at least one processor 10, so that at least one processor 10 executes the method shown in the above embodiment.

[0198] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

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

[0200] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0201] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or 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 a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0202] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.

[0203] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A front-end sensitive data processing method, characterized in that: The front end includes a front end component template and a front end page; the method includes: Adding a desensitization processing function to the front-end component template and then compiling the template to obtain a rendering function; Obtain a front-end page data set, and process the front-end page data set using the rendering function and the desensitization processing function respectively to obtain a first JavaScript object file and a first JavaScript desensitization object file, wherein 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 desensitization data node; When the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitized object file, the changed front-end page data set is processed using the rendering function and the desensitization processing function to obtain a target JavaScript desensitized object file; 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.

2. The method according to claim 1, characterized in that Obtaining a front-end page data set, and processing the front-end page data set using the rendering function and the desensitization processing function respectively, to obtain a first JavaScript object file and a first JavaScript desensitization object file, including: Obtain the front-end page data set; Processing the front-end page data set using the rendering function to obtain the first JavaScript object file; The front-end page data set is desensitized using the desensitization processing function to obtain the first JavaScript desensitized object file.

3. The method according to claim 2, characterized in that The front-end page data set is processed by using the rendering function to obtain the first JavaScript object file, including: Obtain multiple page data nodes corresponding to the front-end page data set; Encode the multiple page data nodes and determine a node object structure data set, wherein 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 desensitized value attribute data; Based on the node object structure data set, the rendering function is used to perform hierarchical rendering on 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 3, characterized in that When the front-end page data set changes, based on the first JavaScript object file and the first JavaScript desensitized object file, the changed front-end page data set is processed using the rendering function and the desensitization processing function to obtain a target JavaScript desensitized object file, including: 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 to obtain a second JavaScript object file and a second JavaScript desensitization object file; Based on the node object structure data set, comparing the node attributes of the first JavaScript object file and the second JavaScript object file to determine the changed nodes; Based on the change node, the first JavaScript desensitized object file and the second JavaScript desensitized object file, the target JavaScript desensitized object file is obtained through processing by the desensitization processing function.

5. The method according to claim 4, characterized in that Based on the change node, the first JavaScript desensitized object file and the second JavaScript desensitized object file, the target JavaScript desensitized object file is obtained through processing by the desensitization processing function, including: Adding a flag mark at the node position of the changed node, wherein the flag mark is used to match the replacement rule; Performing desensitization processing on the changed node using the desensitization processing function to obtain desensitized node data; Based on the flag tag, comparing the first JavaScript desensitized object file and the second JavaScript desensitized object file to obtain a comparison result; The first JavaScript desensitized object file is updated based on the comparison result to obtain the target JavaScript desensitized object file.

6. The method according to claim 1, characterized in that 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.

7. 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: Add a module for adding a desensitization processing function to the front-end component template and then compiling the template to obtain a rendering function; An acquisition and processing module, used to acquire a front-end page data set, and process the front-end page data set using the rendering function and the desensitization processing function respectively, to obtain a first JavaScript object file and a first JavaScript desensitization object file, wherein 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 desensitization data node; A processing module, 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 desensitized object file using the rendering function and the desensitization processing function to obtain a target JavaScript desensitized object file; 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.

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

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the front-end sensitive data processing method described in any one of claims 1 to 6.

10. A computer program product, characterized in that It comprises computer instructions, and the computer instructions are used to enable a computer to execute the front-end sensitive data processing method described in any one of claims 1 to 6.

Images