跨站请求伪造

简介

django为用户实现防止跨站请求伪造的功能，通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成。而对于django中设置防跨站请求伪造功能有分为全局和局部。

全局：

　　中间件 django.middleware.csrf.CsrfViewMiddleware

局部：

@csrf_protect，为当前函数强制设置防跨站请求伪造功能，即便settings中没有设置全局中间件。
@csrf_exempt，取消当前函数防跨站请求伪造功能，即便settings中设置了全局中间件。

注：from django.views.decorators.csrf import csrf_exempt,csrf_protect

应用

普通表单

veiw中设置返回值：
　　return render_to_response('Account/Login.html',
data,context_instance=RequestContext(request))　　
     或者
     return render(request, 'xxx.html', data)
  
html中设置Token:
　　{% csrf_token %}

Ajax

对于传统的form，可以通过表单的方式将token再次发送到服务端，而对于ajax的话，使用如下方式。

        //方式一给每个ajax都加上上请求头
    function Do1(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',

            success:function(data){
                console.log(data);
            }
        });
    }

当没有添加请求会报错

方案一：给ajax加上请求头

需要先下载jQuery-cookie，才能去cookie中获取token

        function Do1(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            headers:{
              'X-CSRFToken':$.cookie('csrftoken')  // 去cookie中获取
            },
            success:function(data){
                console.log(data);
            }
        });
    }

方案二：当你的页面的ajax请求比较多，如何添加？

当有多ajax请求之前，都会先执行该函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Do1();"  value="Do it"/>
    <input type="button" onclick="Do2();"  value="Do it"/>
    <input type="button" onclick="Do3();"  value="Do it"/>

    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery.cookie.js"></script>

    <script>
        //方式二,写上下面的函数ajaxSetup
        $.ajaxSetup({
           beforeSend:function (xhr,settings) {
               xhr.setRequestHeader("X-CSRFToken",$.cookie('csrftoken'))
           } 
        });

        //方式一给每个ajax都加上上请求头
    function Do1(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            {#headers:{#}
            {#  'X-CSRFToken':$.cookie('csrftoken')  // 去cookie中获取#}

            success:function(data){
                console.log(data);
            }
        });
    }

    function Do2(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            success:function(data){
                console.log(data);
            }
        });
    }

    function Do3(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            success:function(data){
                console.log(data);
            }
        });
    }

    </script>

</body>
</html>

注意

1：

只有当前页面才能自动添加token，别的页面还需要写

方案：写在js文件里，再引用

将下面代码写在js文件，再引用
$.ajaxSetup({
   beforeSend:function (xhr,settings) {
       xhr.setRequestHeader("X-CSRFToken",$.cookie('csrftoken'))
   }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Do1();"  value="Do it"/>
    <input type="button" onclick="Do2();"  value="Do it"/>
    <input type="button" onclick="Do3();"  value="Do it"/>

    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/jquery.cookie.js"></script>
    <script src="/static/token.js"></script>

    <script>

        //方式二,写上下面的方法ajaxSetup

        {#$.ajaxSetup({#}
        {#   beforeSend:function (xhr,settings) {#}
        {#       xhr.setRequestHeader("X-CSRFToken",$.cookie('csrftoken'))#}
        {#   } #}


        //方式一给每个ajax都加上上请求头
    function Do1(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            {#headers:{#}
            {#  'X-CSRFToken':$.cookie('csrftoken')  // 去cookie中获取#}

            success:function(data){
                console.log(data);
            }
        });
    }

    function Do2(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            success:function(data){
                console.log(data);
            }
        });
    }

    function Do3(){
        $.ajax({
            url:"/index/",
            data:{id:1},
            type:'POST',
            success:function(data){
                console.log(data);
            }
        });
    }

    </script>

</body>
</html>

View Code

2:引用jquery.cookie需要先引用jQuery

简介

应用

普通表单

Ajax

方案一：给ajax加上请求头

方案二：当你的页面的ajax请求比较多，如何添加？

注意

猜你喜欢