防js代码注入

1. 什么是 JavaScript 注入攻击?

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

举个例子

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

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

防js代码注入_第1张图片

然后发送都后台,传送的数据是这样的
防js代码注入_第2张图片

存到数据库是这样的
这里写图片描述
最后一步,就是存到数据库后,前台页面再去取数据的时候,就··········
防js代码注入_第3张图片

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

方法

利用jq做还是蛮方便的

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

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

将` ` 转义后的结果

防js代码注入_第4张图片
然后把转义后的字符串发给后台就好了。

等到前端要取这条数据的时候,你要是显示

这样的话,直接把后台返回的数据,

var str = "<script type="text/javascript"> alert("我是javascript代码!");</script>"
$("#container").html(str);// 直接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>
     
    <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 $('').text(value).html();        
        }

        function htmlDecode(value){  
            return $('').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

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

你可能感兴趣的:(JavaScript,js常用功能)