防js代码注入

来源：互联网发布：兵器科学与技术知乎编辑：程序博客网时间：2024/05/22 12:49

1. 什么是 JavaScript 注入攻击？

每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网站。客户可以访问网站并输入对产品的反馈信息。当客户提交反馈时，反馈信息重新显示在反馈页面上。

举个例子

首先，我在某个输入框中输入js代码

<script type="text/javascript"> alert("我是javascript代码！");</script>

这里写图片描述

然后发送都后台，传送的数据是这样的
这里写图片描述

存到数据库是这样的
这里写图片描述
最后一步，就是存到数据库后，前台页面再去取数据的时候，就··········

执行你的js代码了。
我现在只是做测试例子，不是恶意攻击。外面的世界太复杂，说不定哪天你的网站就中奖了，所以还是得处理下这块。

方法

利用jq做还是蛮方便的

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

直接上例子，看的清楚些。

将` <script type="text/javascript"> alert("我是javascript代码！");</script>` 转义后的结果

这里写图片描述
然后把转义后的字符串发给后台就好了。

等到前端要取这条数据的时候，你要是显示
<script type="text/javascript"> alert("我是javascript代码！");</script>
这样的话，直接把后台返回的数据，

var str = "&lt;script type="text/javascript"&gt; alert("我是javascript代码！");&lt;/script&gt;"$("#container").html(str);// 直接html，不需要再反转义哈

测试代码附上:

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8"></head><body><style type="text/css">    #textarea {        width: 500px;        height: 200px;        margin: 0 auto;        display: block;    }    .div {        width: 800px;        margin: 0 auto;    }</style>    <textarea id="textarea">        </textarea>    <!-- <script type="text/javascript"> alert("我是javascript代码！");</script> -->     <div class="div">        <button id="re">转义</button> <button id="re2">反转义</button>        <h4>转义</h4>        <p id="show"></p>        <h4>反转义</h4>        <p id="show2"></p>    </div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript">    (function(){        function htmlEncode(value){              return $('<span/>').text(value).html();                }        function htmlDecode(value){              return $('<span/>').html(value).text();             }        $("#re").click(function() {            var $textarea = $("#textarea");            var $show = $("#show");                         var str = $textarea.val();            str = htmlEncode(str);            $show.text(str);        });        $("#re2").click(function() {            var $textarea = $("#textarea");            var $show = $("#show2");            var str = $textarea.val();            str = htmlDecode(str);            $show.text(str); //要注意这里哈。text()和html方法的不同        });    })();</script></body></html>

注意

一定要注意text方法和html方法的不同哈

这里是 html标签转义和反转义 http://blog.csdn.net/wx11408115/article/details/78202243

说得不对或不好的地方，请指教哈，相互学习。

阅读全文

0 0