A brief discussion on html escaping and methods to prevent javascript injection attacks

The following editor will bring you a brief discussion on HTML escaping and methods to prevent JavaScript injection attacks. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Sometimes there will be an input box on the page. After the user inputs the content, it will be displayed on the page, similar to a web chat application. If the user enters a js script, the ratio is: 3f1c4e4b6b16bbbd69b2ee476dc4f83aalert('test');2cacc6d41bbb37262a98f745aa00fbf0, a dialog box will pop up on the page, or if the input script contains code that changes the js variables of the page, the program will be interrupted. Exception or to achieve the purpose of skipping certain verification. So how to prevent this kind of malicious js script attack? This problem can be solved by html escaping.

1: What is html escaping?

html escaping is to convert special characters or html tags into their corresponding characters. For example: bd735ae0bcd555c63cb6616506a96ff3 or escaped to > like "3f1c4e4b6b16bbbd69b2ee476dc4f83aalert('test');2cacc6d41bbb37262a98f745aa00fbf0" this character will be escaped to: "3f1c4e4b6b16bbbd69b2ee476dc4f83a alert('test');2cacc6d41bbb37262a98f745aa00fbf0" when displayed again, the page will parse 9c660e9477a1eca7913d77ab8272e439 into >, thus restoring the user's real input. What is ultimately displayed on the page is still "< ;script>alert('test');2cacc6d41bbb37262a98f745aa00fbf0", which avoids js injection attacks and truly displays user input.

2: How to escape?

1. Implemented through js

//转义 元素的innerHTML内容即为转义后的字符
function htmlEncode ( str ) {
 var ele = document.createElement('span');
 ele.appendChild( document.createTextNode( str ) );
 return ele.innerHTML;
}

//解析 
function htmlDecode ( str ) {
 var ele = document.createElement('span');
 ele.innerHTML = str;
 return ele.textContent;
}

2. Implemented through jquery

function htmlEncodeJQ ( str ) {
  return $(&#39;<span/>&#39;).text( str ).html();
}

function htmlDecodeJQ ( str ) {
  return $(&#39;<span/>&#39;).html( str ).text();
}

3. Use

var msg=htmlEncodeJQ(&#39;<script>alert(&#39;test&#39;);</script>&#39;);

$(&#39;body&#39;).append(msg);

It is recommended to use jquery for better compatibility.

The above is the detailed content of A brief discussion on html escaping and methods to prevent javascript injection attacks. For more information, please follow other related articles on the PHP Chinese website!