关于django 解决csrf

django 是如何解决csrf token的
一. 准备工作：事先已经搭建好了django的环境，首页index只有一个提交按钮用来模拟由前端向后台发起请求。

image.png

这是后台的view：

def test(request):
    if request.method == "GET":
        return render(request, 'book/csrf_test.html')
    if request.method == "POST":
        return HttpResponse("提交成功")

然后我们点击提交按钮发现

image.png

别慌，这个错误就是今天我们来讨论的重点“csrf token”,django是怎样解决csrf token 跨域攻击的呢？
二. 首先我们采用的是form表单提交

<form action="" method="post">
   点此提交<input type="submit" style="height: 30px;width: 50px;line-height: 20px;text-align: center;">
</form>

要想解决很简单：

<form action="" method="post">
    {% csrf_token %}   # 只需要在这加django为我们提供的模板标签即可
   点此提交<input type="submit" style="height: 30px;width: 50px;line-height: 20px;text-align: center;">
</form>

或者更加简单粗暴：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
  #  'django.middleware.csrf.CsrfViewMiddleware',   直接将这一行注释掉，简单粗暴，但出了事你负责，哈哈
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ok,以上就是关于form提交我们怎样解决csrf的，接下来我们如果采用的事Ajax提交呢？又该如何做？
三. Ajax提交

1. 首先我们先把前端的form提交改成Ajax提交

   <div style="width: 80px;height: 30px;background: gray;line-height: 30px;text-align: center;margin: 0 auto">
    <a href="javascript:void (0)" class="btn" style="text-decoration: none;color: black;display: block;width: 100%;height: 100%">点此提交</a>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>   # 这里就用jq来写了
<script>
    let  $btn = $(".btn");
    $btn.click(function () {
        $.post({
            url : "/index/",
            success: res =>{
                console.log(res)
            },
            error: err =>{
                console.log(err.status+"======"+err.statusText)
            }

        })
    })
</script>         

然后他的页面是这个样子滴。

image.png

2.当我们点击这个按钮的时候会向刚才我们写好的路由发起一个post请求，然而当我们点了以后会发现和form 提交时类似的错误.

image.png

3. 解决办法
   (1),上面的简单粗暴方法。
   (2),装饰器。

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt  #这个装饰器含义代表在接受request请求的时候不考虑csrf token,所以也是不安全的。
def test(request):
    if request.method == "GET":
        return render(request, 'book/csrf_test.html')
    if request.method == "POST":
        return HttpResponse("提交成功")

加完装饰器后，再次提交。

image.png

(3), django 官网为我们提供了Ajax请求解决csrf token 的方法
https://docs.djangoproject.com/en/2.1/ref/csrf/

image.png
(部分截图，详情请点击链接查看官方文档)
将其中代码复制粘贴

#这里就是先获取cookie里面的csrftoken然后在发送请求之前将获取到的csrftoken加到请求头中，从而达到目的
script>
    // using jQuery    这里要事先引入jq
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    // 表示在发送请求之前设置请求头
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    })
# 过程不必深究，重点在于会用
</script>

最后测试，将装饰器注释掉，刷新页面重新发起请求，发现

image.png

这样就ok了。
还可以stati里面定义一个js文件专门用来存放官方为我们提供的代码，以后在使用的时候直接引入就好了，也是十分方便的呢。
四. 以上就是django关于解决csrftoken问题的几种方法（面试可能会问哦），拜拜，晚安。。。。