07-csrf

一. ajax的两种crsf验证

# 1. 在试图函数上加上装饰器

# 2. ajax提交数据时,携带csrf: 放在data中携带

# 引用的js: 
  https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js

1. @csrf_exempt装饰器

@csrf_exempt
def login(request):
    if request.method == "POST":
        return JsonResponse({"code": 0, "msg": "登陆成功"})

    return render(request, "login.html")

<form>
    <input type="text" id="username" name="username">
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    function submitForm() {
        $.ajax({
            url: "/hello/login/",
            type: "POST",
            data: {
                "user": $("#username").val(),
            },
            success: function (arg) {
                console.log(arg)
            }

        })
    }
</script>

2. data中携带(绑定函数)

def handle_ajax(request):
    if request.is_ajax():
        return JsonResponse({"code": 0, "msg": "登陆成功"})
    return render(request, "ajax.html")

<form>
    {% csrf_token %}
    <input type="text" id="username" name="username">
    <a onclick="submitForm();">Ajax提交</a>
</form>
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    function submitForm() {
        var csrf = $('input[name="csrfmiddlewaretoken"]').val();
        console.log(csrf)
        var user = $('#username').val();
        $.ajax({
            url: "/hello/ajax/",
            type: "POST",
            data: {"user": user, 'csrfmiddlewaretoken': csrf},
            success: function (arg) {
                console.log(arg)
            }

        })
    }
</script>

3. data中携带(使用id)

def register(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        # ajax请求,一般返回json格式数据
        return JsonResponse({"code":1})
    return render(request, "app03/register.html")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    用户名:<input type="text" name="username"><br>
    密码:<input type="text" name="password"><br>
    <input type="button" value="注册" id="button">
</form>

# 1. 部分提交
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    $("#button").click(function(){
        username=$("[name=username]").val();
        password=$("[name=password]").val();
        csrf = $("[type=hidden]").val();
        console.log(username,password,csrf);
        {# 第一个参数:地址;第二个:参数;第三个:返回的数据; #}
        $.post("/register/",{"username":username,"password":password,"csrfmiddlewaretoken":csrf},
        function(data){
            console.log(data)
        })

    })
</script>
</body>
</html>


# 2. 直接提交form表单所有内容:使用serialize()
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
    $("#button").click(function () {
        $.post("/register/", $("form").serialize(),function (data) {
                console.log(data)
            })
    })
</script>
</body>
</html>

二. 前后端分离处理csrf

# 1. 视图函数向服务器发送请求获取token
from django.middleware.csrf import get_token

# /api/gettoken  这个是地址 url路由的配置就是这个，我下面就不介绍怎么配置路由了，比较简单
class GetTokenView(View):
    # 向服务器请求token
    def get(self, request):
        token = get_token(request)
        return JsonResponse({'res':0, "token":token})


# 2. 前端接收token,添加到请求头中
$(document).ready(function(){
    // 在页面加载的时候，先向服务器获取token
    $.ajax({
        url:"http://127.0.0.1:8000/api/gettoken",
        dataType: "json",
        type: "GET",
        success:function (req) {
            if ("0" == req.res){
                csrftoken = req.token;  // 接受上边视图函数返回的token，保存到全局变量中
                document.cookie = 'csrftoken=' + req.token;  // token设置到cookie中
            }
            else {
                alert("获取token失败")  // 可以不要，是用来我们测试的
            }
        }
    })
})
posted @ 2023-03-28 18:30  测试圈的彭于晏  阅读(22)  评论(0)    收藏  举报