js防止注入实现

王维璋

于 2019-10-09 15:13:00 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/qq_35250826/article/details/102473552

版权

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <textarea id="textarea" style="width:300px;height:100px;"></textarea>
        <button id="getValue" οnclick="getVal()">获取</button>
        <button id="setValue" οnclick="setVal()">赋值</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>