HTML转义以及防止JS注入攻击

时间:2023-01-17 18:52:56

html转义是将特殊字符或html标签转换为与之对应的字符。如:< 会转义为 <> 或转义为 >;像<script>alert('我进来了');</script>这段字符会转义为:<script>alert('test');</script>再显示时页面会将<解析为<,>解析为>,从而还原了用户的真实输入,最终显示在页面上 的还是<script>alert('test');</script>,即避免了js注入攻击又真实的显示了用户输入。

第一种: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;
}

第一种:jquery

 /*对html标签进行转义*/
        function htmlEncode(value){   //value为输入的值
            return $('<span/>').text(value).html();     //.这里的span标签没啥含义,换着其他标签也可以,div,p a都行
        }
         /*对html标签进行反转义*/
        function htmlDecode(value){  
            return $('<span/>').html(value).text();     
        }