Rendering method and device based on vue framework, equipment and medium
By obtaining templates in the rendering method of the vue framework, generating abstract syntax trees, cleaning the expression content of v-html nodes and compiling the rendering function, the problems of poor XSS defense operation and poor effect in the existing technology are solved, and more efficient XSS defense and development convenience are achieved.
Patent Information
- Application Number
- CN202411720259.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-27
- Publication Date
- 2025-03-21
AI Technical Summary
The rendering method based on the vue framework in the prior art has poor operability and poor effect when implementing XSS defense, making it difficult to overwrite the default v-html instructions through custom instructions, and the replacement method is time-consuming and labor-intensive, which can easily lead to developers misuse of the original v-html instructions.
By obtaining the vue template inserted into the content to be rendered, the compiler generates an abstract syntax tree, traversing the node to determine whether it is the node corresponding to v-html. If so, use the HTML cleaning library to clean the expression content of the node, clear the potential XSS script content, and generate a rendering function after compiling the abstract syntax tree to render the content to the page.
It effectively realizes XSS defense, improves the operability of developers when writing rendering methods, avoids the risk of misuse of instructions, and ensures the thoroughness and effectiveness of XSS defense.
Smart Images
Figure CN119668605A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the fields of computer technology and financial technology, and in particular to a rendering method, device, equipment and medium based on a Vue framework. Background Art
[0002] Vue is a JavaScript framework for building user interfaces. "v-html" is a directive in Vue.js that is used to render data as HTML on a page. Although "v-html" provides a powerful and flexible way to render data content, it also has potential limitations and risks.
[0003] For example, v-html may cause XSS (cross-site scripting). When using v-html, you need to be particularly careful to ensure that the content inserted into HTML is safe and does not contain malicious scripts. If you do not verify or filter the data provided by the user, attackers may insert XSS code, which will cause security risks to the application and users. Therefore, it is necessary to handle the data entered by the user with caution and take security measures to prevent XSS attacks. Especially in the relevant software involved in the financial field, in order to protect the property safety of users and improve the ability of software to defend against risks, it is very necessary to perform XSS filtering on the business data that needs to be inserted into HTML for rendering.
[0004] Although vue.js provides the ability to customize instructions, vue.js sets the priority of default instructions to the highest level in source code implementation. Therefore, it is difficult to implement XSS defense by overwriting default v-html instructions with customized v-html instructions of the same name. And because v-html instructions involve a wide range of areas in engineering source code, it will be time-consuming and labor-intensive to replace v-html with customized new instructions to insert the content that needs to be rendered to the page into HMTL, and it is easy to bring the risk of misusing the original v-html to developers when writing code. Overall, this method has low operability and poor results. Summary of the invention
[0005] The present invention provides a rendering method, device, equipment and medium based on a Vue framework, so as to solve the problem that the rendering method capable of realizing XSS defense in the prior art has poor operability and poor effect.
[0006] In a first aspect, a rendering method based on a vue framework is provided, the method comprising: obtaining a vue template into which content to be rendered is inserted; generating an abstract syntax tree of the vue template using a compiler; traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; if so, using an HTML cleaning library to clean the expression content of the node to remove script content in the expression content that can cause cross-site scripting attacks; and continuing to judge the next node after completing the cleaning; if not, continuing to judge the next node; compiling the abstract syntax tree after completing the node traversal to obtain a first rendering function, so as to render the content to be rendered into a page by executing the first rendering function.
[0007] In a second aspect, a rendering device based on a vue framework is provided, the device comprising: an acquisition module, used to acquire a vue template into which content to be rendered is inserted; a generation module, used to generate an abstract syntax tree of the vue template using a compiler; a judgment module, used to traverse each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; a cleaning module, used to, if so, use an HTML cleaning library to clean the expression content of the node to remove the script content in the expression content that can cause a cross-site scripting attack; and continue to judge the next node after completing the cleaning; if not, continue to judge the next node; a compilation module, used to compile the abstract syntax tree after completing the node traversal to obtain a first rendering function, so as to render the content to be rendered into the page by executing the first rendering function.
[0008] In a third aspect, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned rendering method based on the Vue framework when executing the computer program.
[0009] In a fourth aspect, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, the steps of the above-mentioned rendering method based on the Vue framework are implemented.
[0010] In the scheme implemented by the rendering method, device, equipment and medium based on the above-mentioned vue framework, when executing HTML string rendering processing, the vue template with the content to be rendered inserted is obtained, and the abstract syntax tree of the vue template is generated by the compiler. Each node in the abstract syntax tree is traversed to determine whether the node is a node corresponding to v-html. If so, the expression content of the node is cleaned using the HTML cleaning library to remove the script content in the expression content that can cause cross-site scripting attacks, and after completing the cleaning, continue to judge the next node. If the node is not a node corresponding to v-html, the node will not be processed. After traversing all the nodes, the new abstract syntax tree (i.e., the abstract syntax tree after content cleaning) is compiled to obtain the first rendering function. When running the first rendering function, the v-html instruction can insert the expression content assigned to the instruction into HTML, thereby avoiding inserting script content that is prone to cross-site scripting attacks into HTML, and effectively realizing XSS defense. Moreover, this method only performs harmless processing on the assigned content of v-html in the abstract syntax tree before compiling the abstract syntax tree, and does not change the execution flow of v-html when the rendering function is running. Developers have higher operability when writing this rendering method, and avoid the risk of misuse of instructions, making the defense against XSS more thorough and effective. BRIEF DESCRIPTION OF THE DRAWINGS
[0011] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative labor.
[0012] Figure 1 It is a schematic diagram of an application environment of a rendering method based on a vue framework in one embodiment of the present invention; Figure 2 It is a flow chart of a rendering method based on the Vue framework in one embodiment of the present invention; Figure 3 It is a flow chart of a rendering method based on the Vue framework in another embodiment of the present invention; Figure 4 It is a flow chart of a rendering method based on the Vue framework in another embodiment of the present invention; Figure 5 It is a flow chart of a rendering method based on the Vue framework in another embodiment of the present invention; Figure 6 It is a flow chart of a rendering method based on the Vue framework in another embodiment of the present invention; Figure 7 It is a structural schematic diagram of a rendering device based on a vue framework in one embodiment of the present invention; Figure 8 It is a structural diagram of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION
[0013] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions 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 ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0014] The rendering method based on the vue framework provided in the embodiment of the present invention can be applied in Figure 1 In the application environment, the client can be the front end of the financial credit software, and the server can be the back end of the financial credit software. The client can directly obtain the HTML string input by the user from the interactive interface as the content to be rendered, and implement the harmless rendering of the HTML string by executing the rendering method based on the vue framework proposed in this application; the client can also receive the HTML string that needs to be rendered to the page from the back end as the content to be rendered. This application removes the XSS script maliciously inserted by the user by performing HTML cleaning on the abstract syntax tree carrying the content to be rendered.
[0015] The client may include but is not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices. The server may be implemented by an independent server or a server cluster consisting of multiple servers. The present invention is described in detail below through specific embodiments.
[0016] See also Figure 2 As shown, Figure 2 A flowchart of a rendering method based on a Vue framework provided in an embodiment of the present invention includes the following steps: S201, obtaining a vue template into which the content to be rendered is inserted.
[0017] When the user enters data on the front end, Vue inserts the content to be rendered entered by the user into the Vue template to complete the update of the Vue template.
[0018] For example, the content to be rendered may include business data entered by a user in an input box of a financial APP when handling financial business. Or the content to be rendered may include comments made by a user on a financial product in a financial APP. Attackers often add XSS scripts to the content to be rendered by writing a string with HTML tags in the input box. For example, the XSS script may be a script that attacks the product display page of a financial trading platform, and changes the product information on the product display page through the script to mislead platform consumers.
[0019] S202, using a compiler to generate an abstract syntax tree of the vue template.
[0020] The compiler is the vue compiler. The compiler parses the vue template into which the content to be rendered is inserted to generate the abstract syntax tree (AST) of the vue template.
[0021] In Vue.js, template parsing is an important part of the framework. Vue template parsing is responsible for converting the template string of the Vue component into an abstract syntax tree (AST). This process may include lexical analysis of the template string and identification of various tags therein, such as elements, instructions, interpolation expressions, etc. After lexical parsing, syntax parsing can be performed based on the results of lexical parsing to construct the AST of the template. During syntax parsing, the structure of the template will be deeply parsed to construct a clean hierarchical relationship between nodes.
[0022] The AST of a vue template consists of multiple nodes, which may include element nodes, text nodes, instruction nodes, expression nodes, etc. Element nodes represent HTML elements in the template, and element nodes may include sub-nodes such as text nodes, sub-element nodes, or instruction nodes.
[0023] At runtime, the content that needs to be processed by the v-html directive will be mounted on the element node.
[0024] S203, traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html.
[0025] Traverse each node of the abstract syntax tree in step S201 to determine whether the node is a node corresponding to v-html.
[0026] In the embodiment of the present application, the node corresponding to v-html may be a node bound with content that needs to be processed using the v-html instruction. For example, when executing a rendering function, v-html needs to be called to render a string containing HTML tags, and the string is mounted in node 4 of the abstract syntax tree, then node 4 can be used as the node corresponding to v-html.
[0027] S204: If yes, the expression content of the node is cleaned by using the HTML cleaning library to remove the script content in the expression content that can cause cross-site scripting attacks; and continue to judge the next node after the cleaning is completed.
[0028] If a node is determined to be a node corresponding to v-html, the expression content of the node is cleaned using the HTML cleaning library.
[0029] The expression content of the node corresponding to v-html may include a string with HTML tags.
[0030] The expression content of the node can be used as an input parameter of the HTML cleaning library, and the HTML cleaning library can be used to clean the expression content to remove the script content that can cause cross-site scripting attacks.
[0031] After the node is cleaned, the next node is judged to be the node corresponding to v-html. If so, the above steps are repeated to clean the node. If not, the node is not processed and the next node is judged. This cycle is repeated until all nodes of the abstract syntax tree are traversed.
[0032] S205: If not, continue to determine the next node.
[0033] S206: Compile the abstract syntax tree after completing the node traversal to obtain a first rendering function, so as to render the content to be rendered into the page by executing the first rendering function.
[0034] In the abstract syntax tree after completing the node traversal, all the content that needs to be processed by v-html has been rendered harmless. In this case, the abstract syntax tree is compiled again to obtain a rendering function. For the convenience of distinction, the embodiment of the present application describes the rendering function as a first rendering function.
[0035] The content to be rendered can be rendered into the page by executing the first rendering function.
[0036] In summary, the rendering method based on the Vue framework provided by the present application, when executing HTML string rendering, obtains the Vue template with the content to be rendered inserted, uses the compiler to generate an abstract syntax tree of the Vue template, traverses each node in the abstract syntax tree, and determines whether the node is a node corresponding to v-html. If so, the expression content of the node is cleaned using the HTML cleaning library to remove the script content in the expression content that can cause cross-site scripting attacks, and after completing the cleaning, continues to judge the next node. If the node is not a node corresponding to v-html, the node will not be processed; after traversing all the nodes, the new abstract syntax tree (i.e., the abstract syntax tree after content cleaning) is compiled to obtain the first rendering function. When running the first rendering function, the v-html instruction can insert the expression content assigned to the instruction into HTML, thereby avoiding inserting script content that is prone to cross-site scripting attacks into HTML, and effectively realizing XSS defense. In addition, this method only performs harmless processing on the assigned content of v-html in the abstract syntax tree before compiling the abstract syntax tree, and does not change the execution process of v-html. Developers can write this rendering method with higher operability and will not cause the misuse of v-html. The defense against XSS is more thorough and effective.
[0037] Based on the above embodiments, Figure 3 As shown, in the above step S203, "traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html" may include the following steps: S301, determining whether the node type is an element node.
[0038] S302: If the node is an element node, all attributes of the node are traversed, and for each attribute, it is determined whether the attribute is of a command type and the command name is HTML.
[0039] S303, if the attribute is of instruction type and the instruction name is HTML, confirm that the node is a node corresponding to v-html; if the attribute is not of instruction type, or the instruction name is not HTML, continue to judge the next attribute.
[0040] When traversing the nodes of the abstract syntax tree, you can first determine whether the node is an element node; If not, confirm that the node is not the node corresponding to v-html; continue to judge the next node.
[0041] If so, further traverse all attributes of the node to determine whether a certain attribute is a command type and the command name is HTML; and continue to determine the next node.
[0042] If not, continue to judge the next attribute.
[0043] If so, confirm that the node is the node corresponding to v-html.
[0044] The embodiment of the present application traverses each node of the abstract syntax tree, determines an element node with an instruction attribute and an instruction name of HTML, and determines the node as a node corresponding to v-html.
[0045] For example, the field representing the node type is node.type; the field representing the type of the node property is node.props.type; and the field representing the property name is node.props.name.
[0046] In the source code of vue3.0, the node.type of the element node is 1; in the properties of the element node, the attribute of the instruction type is node.props.type=7; Therefore, when traversing the nodes of the abstract syntax tree, we can first determine whether the value of the node.type field of the node is 1; if it is 1, we enter the following loop to traverse all the attributes of the node: Determine whether the node.props.type of the property is equal to 7; If node.props.type is equal to 7, then determine whether node.props.name is HTML; If node.props.type is not equal to 7, switch to the next property; If node.props.name is HTML, confirm that the node is the node corresponding to v-html to start cleaning the node; and switch to the next property; If node.props.name is not HTML, switch to the next property.
[0047] The embodiment of the present application accurately finds the node corresponding to v-html by determining the node type of each node in the abstract syntax tree, searching for an attribute of the node that contains an instruction type, and determining whether the name of the attribute of the instruction type is HTML.
[0048] Based on the above embodiments, Figure 4 As shown, in the above step S204, "using the HTML cleaning library to clean the expression content of the node" may include the following steps: S401, calling the HTML cleaning library to clean the expression content; S402, calling a simple expression creation function to generate a new expression for the content returned by the HTML cleaning library, and assigning the new expression to the node.
[0049] In the embodiment of the present application, the HTML cleaning library may be DOMPurify or jSanity, etc., and this application does not limit it.
[0050] When calling the HTML cleaning library to clean the expression content, the expression content can be transmitted to the calling interface of the HTML cleaning library, so that the cleaning library can clean the HTML for XSS scripts and remove malicious scripts in the expression content.
[0051] For example, in financial scenarios, attackers can enter malicious scripts through the comment area, message board, and other locations of financial platforms. If these scripts are not cleared, VUE will compile the malicious scripts into the rendering function that needs to be executed when compiling the VUE template. Once these scripts are executed, they will cause XSS attacks on the platform. For example, attackers use XSS scripts to modify the text, pictures, links, and other content of credit web pages to deceive other users and lure users to perform some unsafe operations, such as clicking links, downloading attachments, etc., causing losses to users.
[0052] After the HTML cleaning library is used to clean the expression content, the embodiment of the present application can further call the createSimpleExpression function to parse the cleaned expression content to obtain a new expression, and reassign the expression to the node corresponding to v-html as the expression content of the node. In this way, the expression content of the node corresponding to v-html is cleaned, avoiding the compilation of XSS scripts into the rendering function.
[0053] In an embodiment of the present application, after the HTML cleaning library cleans the expression content, a simple expression creation function is used to create an expression for the cleaned content. After the expression is reassigned to a node corresponding to v-html, the cleaned content can be smoothly compiled into the rendering function when compiling the abstract syntax tree, thereby rendering the cleaned content completely to the page.
[0054] Based on the above embodiments, Figure 5 As shown, before "calling the HTML cleaning library to clean the expression content" in the above step S401, the method may further include the following steps: S501, determining whether there is an attribute of expression type in the attributes of the node; S502, if there is an attribute of expression type, determine whether the value of the attribute is empty; S503: If the value of the attribute is not empty, use the value of the attribute as the expression content.
[0055] In the embodiment of the present application, before calling the HTML cleaning library to clean the expression content of the node corresponding to v-html, it can be determined whether there is an attribute of expression type for the node. If so, it can be further determined whether the value of the attribute of expression type is empty.
[0056] When there is an expression type attribute on a node corresponding to a v-html, and the value of the attribute is not empty, the value of the attribute can be used as the expression content that needs to be cleaned. Then the HTML cleaning library can be called to clean the expression content; When there is no expression type attribute on a node corresponding to a v-html or the value of the attribute is empty, it can be confirmed that there is no expression content that needs to be cleaned on the node. There is no need to call the HTML cleaning library to clean the node.
[0057] Correspondingly, when performing "assigning the new expression to the node" in the above step S402, the new expression may be assigned to an attribute of the expression type in the node.
[0058] Before calling the HTML cleaning library to clean the XSS script, the embodiment of the present application first determines whether an expression that needs to be cleaned is bound to the node. If not, there is no need to execute the step of calling the HTML cleaning library, thereby optimizing the processing flow and improving rendering efficiency.
[0059] Based on the above embodiments, Figure 6 As shown, after "generating the abstract syntax tree of the vue template by using the compiler" in the above step S202, the method further includes the following steps: S601, determining whether the character string with HTML tags in the Vue template is updated.
[0060] S602, if yes, then execute the step of traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; S603: If not, compile the abstract syntax tree to generate a second rendering function to render the content to be rendered into the page by executing the second rendering function.
[0061] After parsing the abstract syntax tree, the embodiment of the present application can further determine whether the string with the HTLM tag in the vue template is updated. If no new string with the HTML tag is inserted into the vue template, there is no need to perform the subsequent node search and node cleaning process. The abstract syntax tree can be directly compiled to obtain the rendering function after compilation. For the convenience of distinction, the present application describes the rendering function as the second rendering function.
[0062] The content to be rendered can be rendered into the page by executing the second rendering function.
[0063] If it is determined that a new string with HTML tags is inserted into the vue template, it is necessary to traverse each node in the abstract syntax tree, find the node corresponding to v-html, and clean the expression content of the node to avoid compiling the XSS script that may appear in the string with HTML tags into the first rendering function.
[0064] The embodiment of the present application determines the abstract syntax tree that does not need to be cleaned of XSS by traversing all nodes of the abstract syntax tree by judging whether the string with HTML tags in the vue template is updated, thereby optimizing the processing flow and improving rendering efficiency.
[0065] The rendering method based on the vue framework proposed in this application realizes the overwriting of v-html itself at compile time and the harmless processing of the string of v-html input. This method does not need to change the execution logic of v-html at runtime. This method is simpler and more operational, avoids the misuse of default v-html and customized safe v-html, and improves the defense effect against XSS in text rendering logic.
[0066] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.
[0067] In one embodiment, a rendering device based on a vue framework is provided, and the rendering device based on the vue framework corresponds one-to-one to the rendering method based on the vue framework in the above embodiment.
[0068] like Figure 7 As shown, the rendering device 700 based on the vue framework includes: an acquisition module 701, a generation module 702, a judgment module 703, a cleaning module 704 and a compilation module 705. The detailed description of each functional module is as follows: The acquisition module 701 is used to acquire the Vue template into which the content to be rendered is inserted; A generation module 702 is used to generate an abstract syntax tree of the vue template using a compiler; A judgment module 703 is used to traverse each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; The cleaning module 704 is used to, if yes, clean the expression content of the node using the HTML cleaning library to remove the script content in the expression content that can cause a cross-site scripting attack; and continue to judge the next node after completing the cleaning; if no, continue to judge the next node; The compiling module 705 is used to compile the abstract syntax tree after completing the node traversal to obtain a first rendering function, so as to render the content to be rendered into the page by executing the first rendering function.
[0069] In summary, the rendering device based on the Vue framework proposed in the present application, when executing HTML string rendering, obtains the Vue template with the content to be rendered inserted, uses the compiler to generate an abstract syntax tree of the Vue template, traverses each node in the abstract syntax tree, and determines whether the node is a node corresponding to v-html. If so, the expression content of the node is cleaned by using the HTML cleaning library to remove the script content in the expression content that can cause cross-site scripting attacks, and after completing the cleaning, continues to judge the next node. If the node is not a node corresponding to v-html, the node will not be processed; after traversing all the nodes, the new abstract syntax tree (i.e., the abstract syntax tree after content cleaning) is compiled to obtain the first rendering function. When running the first rendering function, the v-html instruction can insert the expression content assigned to the instruction into HTML, thereby avoiding inserting script content that is prone to cross-site scripting attacks into HTML, and effectively realizing XSS defense. In addition, this method only performs harmless processing on the assigned content of v-html in the abstract syntax tree before compiling the abstract syntax tree, and does not change the execution process of v-html. Developers can write this rendering method with higher operability and will not cause the misuse of v-html. The defense against XSS is more thorough and effective.
[0070] In some embodiments, the judgment module is used to judge whether the node is an element node; if the node is an element node, all attributes of the node are traversed, and for each attribute, whether the attribute is an instruction type and the instruction name is HTML; if the attribute is an instruction type and the instruction name is HTML, the node is confirmed to be a node corresponding to v-html; if the attribute is not an instruction type, or the instruction name is not HTML, continue to judge the next attribute.
[0071] In some embodiments, the cleaning template is used to: call the HTML cleaning library to clean the expression content; call the create simple expression function to generate a new expression for the content returned by the HTML cleaning library, and assign the new expression to the node.
[0072] In some embodiments, the cleaning module is also used to: determine whether there is an attribute of expression type in the attributes of the node; if there is an attribute of expression type, determine whether the value of the attribute is empty; if the value of the attribute is not empty, use the value of the attribute as the expression content.
[0073] In some embodiments, the cleaning module is further used to assign the new expression to the attribute of the expression type.
[0074] In some embodiments, after the abstract syntax tree of the vue template is generated by the compiler, the rendering device based on the vue framework is also used to: determine whether the string with HTML tags in the vue template is updated; if so, execute the step of traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; if not, compile the abstract syntax tree and generate a second rendering function to render the content to be rendered into the page by executing the second rendering function.
[0075] For the specific limitations of the rendering device based on the vue framework, please refer to the limitations of the rendering method based on the vue framework above, which will not be repeated here. Each module in the above-mentioned rendering device based on the vue framework can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.
[0076] In one embodiment, Figure 8 As shown, a computer device 800 is provided, including a memory 801, a processor 802, and a computer program stored in the memory 801 and executable on the processor 802. When the processor executes the computer program, the steps of the rendering method based on the Vue framework described in any of the above embodiments are implemented.
[0077] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the rendering method based on the Vue framework described in any of the above embodiments are implemented.
[0078] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can refer to the relevant description in the aforementioned method embodiment. In order to avoid repetition, they will not be described one by one here.
[0079] Those of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be implemented by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
[0080] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.
[0081] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.
Claims
1. A rendering method based on the vue framework, characterized in that: The method comprises: Get the vue template with the content to be rendered inserted; Generate an abstract syntax tree of the vue template using a compiler; Traverse each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; If yes, then use the HTML cleaning library to clean the expression content of the node to remove the script content in the expression content that can cause cross-site scripting attacks; and continue to judge the next node after completing the cleaning; If not, continue to judge the next node; The abstract syntax tree after the node traversal is compiled to obtain a first rendering function, so as to render the content to be rendered into the page by executing the first rendering function.
2. The method according to claim 1, characterized in that The traversing each node in the abstract syntax tree and determining whether the node is a node corresponding to v-html includes: Determine whether the node is an element node; If the node is an element node, all attributes of the node are traversed, and for each attribute, whether the attribute is a command type and the command name is HTML; If the attribute is of instruction type and the instruction name is HTML, then the node is confirmed to be a node corresponding to v-html; if the attribute is not of instruction type, or the instruction name is not HTML, then the next attribute is determined.
3. The method according to claim 1, characterized in that The step of using the HTML cleaning library to clean the expression content of the node includes: Calling the HTML cleaning library to clean the expression content; A simple expression creation function is called to generate a new expression for the content returned by the HTML cleaning library, and the new expression is assigned to the node.
4. The method according to claim 3, characterized in that Before calling the HTML cleaning library to clean the expression content, the method further includes: Determine whether there is an attribute of expression type in the attributes of the node; If there is an attribute of expression type, determine whether the value of the attribute is empty; If the value of the attribute is not empty, the value of the attribute is used as the expression content.
5. The method according to claim 4, characterized in that The assigning the new expression to the node comprises: Assign the new expression to the property of the expression type.
6. The method according to claim 1, characterized in that After the compiler is used to generate the abstract syntax tree of the vue template, the method further includes: Determine whether the string with HTML tags in the vue template is updated; If yes, then execute the step of traversing each node in the abstract syntax tree to determine whether the node is a node corresponding to v-html; If not, compile the abstract syntax tree to generate a second rendering function to render the to-be-rendered content into the page by executing the second rendering function.
7. A rendering device based on the vue framework, characterized in that: The device comprises: Get module, used to get the vue template with the content to be rendered inserted; A generation module, used to generate an abstract syntax tree of the vue template using a compiler; A judgment module, used for traversing each node in the abstract syntax tree to judge whether the node is a node corresponding to v-html; A cleaning module, for, if yes, using the HTML cleaning library to clean the expression content of the node to remove the script content in the expression content that can cause a cross-site scripting attack; and continuing to judge the next node after completing the cleaning; if no, continuing to judge the next node; A compiling module is used to compile the abstract syntax tree after completing the node traversal to obtain a first rendering function, so as to render the content to be rendered into a page by executing the first rendering function.
8. The device according to claim 7, characterized in that The judging module is used for: Determine whether the node is an element node; If the node is an element node, all attributes of the node are traversed, and for each attribute, whether the attribute is a command type and the command name is HTML; If the attribute is of instruction type and the instruction name is HTML, then the node is confirmed to be a node corresponding to v-html; if the attribute is not of instruction type, or the instruction name is not HTML, then the next attribute is determined.
9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the rendering method based on the Vue framework as described in any one of claims 1 to 6 are implemented.
10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the rendering method based on the Vue framework as described in any one of claims 1 to 6 are implemented.