Django中使用Ajax及避开CSRF 验证的方式详解_django ajax csrf豁免

2401_87299658

于 2024-09-21 19:27:11 发布

阅读量354

点赞数 9

文章标签： django ajax csrf

本文链接：https://blog.csdn.net/2401_87299658/article/details/142422376

版权

- 通过 csrf_token 认证
  - 视图层或者urls添加装饰器

ajax(Asynchronous Javascript And Xml)异步javascript和XML。本文实例讲述了django框架中ajax的使用及避开CSRF 验证的方式。
ajax的优点

使用javascript技术向服务器发送异步请求
ajax无须刷新整个页面；
由于ajax响应的是局部页面，因此性能要高

向服务器发送GET请求

views.py

from django.http import HttpResponse
from django.shortcuts import render


def get\_html(request):
    return render(request, 'ajax/test\_ajax.html')


def test\_ajax\_get(request):
    name = request.GET.get("name", '')
    print(name)
    if name:
        res = {"code": "200", "msg": "√"}
    else:
        res = {"code": "000", "msg": "请输入用户名"}
    import json
    return HttpResponse(json.dumps(res))  # 向ajax发送json数据

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>
<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
 $("#user").blur(function () { //鼠标失去焦点事件
 $.ajax({
 url: "/ajax\_test/get\_/",
 type: "get",
 data: {"name": $("#user").val()},
 success: function (data) {
 console.log(data);
 console.log(typeof data);
 var data = JSON.parse(data); //接收传来的信息，进行反序列化，这里JSON要输入大写否则出不来
 console.log(data);
 console.log(typeof data);
 if (data.code == "200") {
 $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
 }
 else{
 $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
 }
 }
 })
 });
</script>
</body>
</html>

向服务器发送POST请求

以post的方式提交，存在crsf的问题，解决跨域伪造csrf的方法有三种

CSRF 简介
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过 HTTP 请求江数据传送到服务器，从而盗取回话的 cookie。盗取回话 cookie 之后，攻击者不仅可以获取用户的信息，还可以修改该 cookie 关联的账户信息。
所以解决 CSRF 攻击的最直接的办法就是生成一个随机的 csrftoken 值，保存在用户的页面上，每次请求都带着这个值过来完成校验。

通过 csrf_token 认证

方式 1 通过 input 标签获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf\_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>

<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script>
 // var csrf\_token = $('[name="csrfmiddlewaretoken"]').val();
 //下面改成post请求如何避免crsf错误呢
 $("#user").blur(function () {
 $.ajax({
 url: "/ajax\_test/post\_/",
 type: "post",
 data: {
 "name": $("#user").val(),
 "csrfmiddlewaretoken": $('[name="csrfmiddlewaretoken"]').val(),
 // "csrfmiddlewaretoken": "{{csrf\_token}}" // 直接也可以
 },

 success: function (data) {
 console.log(data);
 console.log(typeof data);
 var data = JSON.parse(data);
 console.log(data);
 console.log(typeof data);
 if (data.code == "200") {
 $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
 }
 else {
 $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
 }
 }
 })
 });
</script>
</body>
</html>

方式 2 通过 Cookie 获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr>
<h1>登录</h1>
<input type="text" name="csrfmiddlewaretoken" value="{{ csrf\_token }}" hidden>
<p>用户名：<input type="text" id="user"> <span class="error"></span></p>

<script src="/static/js/jquery-3.2.1.min.js">
</script>
<script> 
 //下面改成post请求如何避免crsf错误呢
 $("#user").blur(function () {
 $.ajax({
 url: "/ajax\_test/post\_/",
 type: "post",
 data: {
 "name": $("#user").val(),
 headers: {"X-CSRFToken": $.cookie('csrftoken')}, //方式三
 },
 success: function (data) {
 console.log(data);
 console.log(typeof data);
 var data = JSON.parse(data);
 console.log(data);
 console.log(typeof data);
 if (data.code == "200") {
 $(".error").html(data.msg).css("color", "green") //这里的css样式是以，隔开的
 }
 else {
 $(".error").html(data.msg).css("color", "red") //这里的css样式是以，隔开的
 }
 }
 })
 });

</script>
</body>
</html>