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

谁践踏了优雅 2022-05-16 08:41 383阅读 0赞

> 目的

这周在开发即时聊天的时候，发生存在JS注入攻击的问题。如果用户输入了一段js脚本。  
例如：  
`<script>alert('我进来了');</script>`  
页面会弹出一个对话框，或者输入的脚本中有改变页面js变量的代码则会时程序异常或者达到跳过某种验证的目的。  
于是我在网上搜索了相关的解决方案。

> 解决方案：利用html转义

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

> 实现方法：JS或JQ

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，JQ

//转义
    function htmlEncodeJQ ( str ) { 
        return $('<span/>').text( str ).html();
    }
    //解析
    function htmlDecodeJQ ( str ) { 
        return $('<span/>').html( str ).text();
    }

我是使用JQ的方法的，因为它的兼容性更好一点。在我的实际应用中，只需要将这段JS脚本代码进行转义即可，不需要调用解析这个方法，因为浏览器会自动帮我们解析出来的。

本文转载于：`https://blog.csdn.net/taoerchun/article/details/50778799`