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提交
- 首先我们先把前端的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
- 解决办法
(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问题的几种方法（面试可能会问哦），拜拜，晚安。。。。
