Using label template to solve the problem of malicious input by users

What is malicious input

In some application scenarios , The content entered by the user will be displayed in the page , For example, the release of articles , wait , There will be a problem at this time .

For example, the pig ruffian bully inserted the following line of code into the Nuggets' introduction

<script>
 alert(&quot; Pig ruffian bully yyds&quot;)
</script>


There is no bad content here , In fact, this is not a serious problem , If infinite loops are used

alert

Then crash directly , Or jump to another page , Make it impossible to get in

‍️ The threat of malicious user input can be imagined , So how to solve this problem , The following will introduce a method of passing

The label template

To solve the problem

The label template

Concept

Label template is a way to use Template Strings , It can be understood as the template string following the function name , It is also another form of function , You can pass the string part and variable replacement part inside the template string to the function in the form of parameters , As in the following example .

let str = " Pig ruffian bully ",
 _str = "fzf404";
function add(a, ...b) {
 console.log(a);
 console.log(b);
}
add`Hello${str}World${_str}`;
// [ 'Hello', 'World', '' ]
// [ ' Pig ruffian bully ', 'fzf404' ]


There are specific rules for the conversion of parameters , The first parameter is in the form of an array , Its array members are strings on both sides of the variable part , Above

[ 'Hello', 'World', '' ]

Its array contains three members , Why is there

An empty string

, Because in the second variable part

_str

namely

"World"

Between and space , So the third array member is an empty string ; The second parameter goes to n Parameters are variable members , You can also use the extension operator to make it an array , Above

[ ' Pig ruffian bully ', 'fzf404' ]

.

Use

Understand the use of label templates , So how do we use tag templates to solve the problem of malicious user input

First of all, we made a statement

str

Variables to simulate user input

let str = &quot;<script>alert(&quot; Pig ruffian bully yyds&quot;)</script>&quot;


Declare a defense function , Defense function reference **《ES6 Introduction to the standard 》**, Here I will explain the function implementation process I think about ：

The parameters of the function contain two , One is string member , One is the variable member, that is, the content entered by the user , First save the first string member , By using

arguments

Start traversing from the second parameter , Because we need to monitor malicious content replacement in the traversal body , So start traversing from variable members , Pass variable members through

String()

Convert to string , adopt

replace

Method to replace the malicious content and then splice it with the previously reserved header string members , For example, here will be

<

And

>

Replace with something that cannot be considered

<script>

Content that executes but can be rendered normally , Splice the next string member before ending the loop , Achieve the effect of cross splicing .

function SaferHTML(tempalte) {
 let s = tempalte[0];
 for (let i = 1; i < arguments.length; i++) {
 let arg = String(arguments[i]);

 // Escape special characters in the substitution.
 s += arg.replace(/&/g, &quot;&amp;&quot;)
 .replace(/</g, &quot;&lt;&quot;)
 .replace(/>/g, &quot;&gt;&quot;);

 // Don't escape special characters in the template.
 s += tempalte[i];
 }
 return s;
}


Finally, execute the function through the label template

let end = SaferHTML`<p>${str} User input ${str}</p>`;


The overall implementation relies on the parameter characteristics of the label template , Achieve the splicing and replacement of a string .

reference

ES6 Introduction to the standard