一、简介

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

全局:

         中间件 django.middleware.csrf.CsrfViewMiddleware

局部:

    from django.views.decorators.csrf import csrf_exempt,csrf_protect
  • @csrf_protect,为当前函数强制设置防跨站请求伪造功能,即便settings中没有设置全局中间件。
  • @csrf_exempt,取消当前函数防跨站请求伪造功能,即便settings中设置了全局中间件。

二、应用

普通表单提交

 

<form action="/xiaoqing/session1/" method="post">
    {{ csrf_token }}   #其实是后台给用户发 一堆字符串
    {% csrf_token %}  #需要设置 {% csrf_token %}
    <input type="text" name="username"/>
    <input type="text" name="password"/>
    <input type="checkbox" value="1" name="remember">10s免登录
    <input type="submit" value="提交"/>
    <input type="button" value="ajax提交" id="btn">
</form>

 

 

Ajax提交

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

<form action="/xiaoqing/session1/" method="post">
    {{ csrf_token }}   #其实是后台给用户发 一堆字符串
    {% csrf_token %}
    <input type="text" name="username"/>
    <input type="text" name="password"/>
    <input type="checkbox" value="1" name="remember">10s免登录
    <input type="submit" value="提交"/>
    <input type="button" value="ajax提交" id="btn">
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>

    var csrftoken = $.cookie('csrftoken')   #获取csrftoken  cookie
      
    
    $(function(){
     

     
       function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));     #判断是get方法还是post方法
        }
$.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); //这段表示判断是get请求还是post请求 get请求不需要csrftoken验证
        $.ajaxSetup({

            beforeSend:function(xhr,settings){
                xhr.setRequestHeader('X-CSRFtoken',csrftoken)

            }

        })

    $('#btn').click(function(){

            $.ajax({

                url:'/xiaoqing/session1/',
                type:'POST',
                data:{'user':"root",'pwd':123456},
{#                headers:{'X-CSRFtoken':csrftoken#}
                success:function(arg){

                }

            })

    })

    })

</script>