js防止注入实现

今天其他项目组同事过来问过我是否遇到过这种情况？

场景：在项目input框中输入含有script标签包含的脚本，提交后却意外的被执行了。（所有恶意攻击的脚本标签）

问题：HTML没有进行转义的发送，会导致回显或者提交的时候html语义无法解释 < 和 > 符号，认为其是标签。故进行标签模式的渲染。

解决：每次发送前对输入的字符串进行特殊符号的转义，避免html标签符号和特殊符号给解释器造成冲突。从而导致XSS的恶意脚本攻击。

下面附上防止js脚本注入的源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <textarea ></textarea>
        <button >获取</button>
        <button >赋值</button>
    </body>
    <script>
        var $ = document.getElementById('textarea');
        var _val = '';
        function getVal(){
            _val = htmlEncode ($.value);
            alert(_val);
            $.value = '';
        }
        function setVal(){
            $.value = htmlDecode (_val);
        }
        //转义  元素的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;
        }
    </script>
</html>

使用方式：

1、将XSS攻击的脚本语言输入到textarea文本域中，点击获取会弹出其转义后的字符串。

2、点击赋值会将转移后的字符串赋值给textarea文本域的value。从而html解释器解释特殊字符，并显示出用户想要显示的特殊语义。

有问题欢迎广大代码爱好者交流，互相学习。