Django中使用Ajax及避开CSRF 验证的方式详解

文章目录

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>

视图层或者urls添加装饰器

views.py

from django.views.decorators.csrf import csrf_exempt  # 导入
@csrf_exempt
def test_ajax_post(request):
    name = request.POST.get("name", '')
    print(name)
    if name:
        res = {"code": "200", "msg": "√"}
    else:
        res = {"code": "000", "msg": "请输入用户名"}
    import json
    return HttpResponse(json.dumps(res))  # 向ajax发送json数据

或者urls.py

from django.urls import path
from django.views.decorators.csrf import csrf_exempt  # 导入
from ajax import views

urlpatterns = [
    path('post_/', csrf_exempt(views.test_ajax_post)),
]
上一篇:jenkins去掉CSPF


下一篇:3.CSRF攻击