正文：
有时候网页中会有一个输入框，用户输入内容后会显示在页面中，类似于网页聊天应用。如果用户输入了一段 js脚本，比如：< script>alert(‘test’);< /script>，页面会弹出一个对话框，或者输入的脚本中有改变页面 js变量的代码，则会导致程序异常或者绕过某种验证。那么如何防止这种恶意的 js 脚本攻击呢？可以通过html转义来解决这个问题。
一：什么是 html 转义？
html 转义是将特殊字符或 html 标签转换为与之对应的字符。比如：<会转义为<，>会转义为>。像“< script>alert(‘&test’);< /script>”这段字符会转义为：“<script>alert(‘&test’);</script>”。再显示时，页面会将<解析为<，>解析为>，从而还原了用户的真实输入。最终显示在页面上的还是“< script>alert(‘&test’);< /script>”，既避免了 js 注入攻击，又真实地显示了用户输入。
二：如何转义？
1、通过 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、通过jquery实现
/*对 html 标签进行转义*/
function htmlEncode(value){ //value 为输入的值
return $('<span/>').text(value).html(); //.这里的 span 标签没啥含义，换着其他标签也可以，div，p a 都行
}
/*对 html 标签进行反转义*/
function htmlDecode(value){
return $('<span/>').html(value).text();
}
转载请注明：汇站网 » HTML 转义及防止 JavaScript 注入攻击
