zoukankan      html  css  js  c++  java
  • js防止注入实现

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

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

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

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

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

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

    使用方式

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

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

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

  • 相关阅读:
    变量
    词频统计
    Python文件处理
    python面试题
    函数及组合数据类型
    位(bit)、字节(byte)、字符、编码之间的关系
    程序的控制结构
    Python:turtle库的使用及图形绘制
    Dynamics 365 CRM Connected Field Service 不能接收IoT Alert
    Dynamics 365 CRM 部署 Connected Field Service
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/11641962.html
Copyright © 2011-2022 走看看