Django中的CSRF使用及ajax请求接口时问题总结

前言说明

在Django中提交数据到后端服务的时候,为了安全,要使用CSRF(跨站请求伪造)。跨站请求伪造的问题在于,服务器信任来自客户端的数据。

常规的做法是在template模板HTML文件中的form表单 中添加 {% csrf_token %} 可以实现安全提交。

Django CSRF 使用和理解

我们先构建一个最简单的登录登出 Demo程序,源码详见

这里只给出login.html 部分的代码

<form method='post' action='/test'>
    
    {% csrf_token %}
    <input type="text" name="user" />
    <input type="text" name="password" />
    <input type="submit" value="提交" />
form>

1、刚开始测试的时候,把 {% csrf_token %} 这行代码取消,然后启动服务之后,访问登录页面 http://127.0.0.1:8091/demoapp/login/ 然后 输入 admin/123456 之后点击登录,会页面看到报错如下:

Django中的CSRF使用及ajax请求接口时问题总结_第1张图片

这就是默认Django会进行CSRF的验证,这里因为没有添加 {% csrf_token %} 导致报错了

2、添加 {% csrf_token %} 之后再次登录测试,看到跳转到了 首页登录成功

image-20221122171331221

3、在登录之前我们打开浏览器调试器网络 中点击 login/ 请求查看它的标头载荷 看到在 username 和 password 之外还多了个 csrfmiddlewaretoken 参数及其值

Django中的CSRF使用及ajax请求接口时问题总结_第2张图片

4、分析登录页面的源码发现,Django其实是把 {% csrf_token %} 转化成了一个隐藏的input标签

Django中的CSRF使用及ajax请求接口时问题总结_第3张图片

Ajax请求Django接口

首先我们需要知道的是ajax请求是通过JavaScript脚本触发的,我们调整下上面的登录页面,让其通过 Ajax 发起登录

<html>
    <head>
        <title>Ajax Post Demotitle>
        <script src="http://newblog.colinspace.com/static/js/jquery.min.js">script>
    head>
    <body>
        <div id="login">
            {% csrf_token %}
            <input type="text" name="username" />
            <input type="password" name="password" />
            <input type="button" value="Login" id="btn">
        div>
        
        <script>
                $('#btn').click(function () {
                    // 获取input 的值
                    var username = $('input[name="username"]').val();
                    var password = $('input[name="password"]').val();
                    // 通过input获取隐藏的 csrf token值
                    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
                    console.log("input info: ", username, password)
                    $.ajax({
                        url:'/demoapp/login/',
                        type:"POST",
                        data:{
                            'username': username,
                            'password': password,
                            // 'csrfmiddlewaretoken':  csrf
                        },
                        success:function (arg) {
                            console.log("Login success");
                        }
                    })
                })
        script>
    body>
html>

ajax data 方法

1、 这里提交的data 数据中的,是把csrfmiddlewaretoken 注销掉的,先通过Ajax登录试试,发现提示403错误

Django中的CSRF使用及ajax请求接口时问题总结_第4张图片

2、 然后把csrf 变量的获取和csrfmiddlewaretoken 注释去掉,然后Ajax登录,发现提示登录成功

Django中的CSRF使用及ajax请求接口时问题总结_第5张图片

但是注意: 这里有个隐藏的问题

通过浏览器的控制台知道是登录成功了,从Django的server端日志也看到登录成功,还进行了redirect跳转

admin 123456
[23/Nov/2022 04:22:00] "POST /demoapp/login/ HTTP/1.1" 302 0
[23/Nov/2022 04:22:00] "GET /demoapp/ HTTP/1.1" 200 73

但是浏览器还是在登录页面呀,所以Ajax登录成功(success:function (arg) )之后需要进行跳转

在 ajax 请求成功之后添加如下代码

success:function (arg) {
	console.log("Login success");
	window.location.href="/demoapp/";
}

然后再次登录,发现跳转成功。

关于 javascript怎么实现页面跳转 请参考 https://m.php.cn/article/473528.html

ajax header 方法

除了在data 中添加参数 csrfmiddlewaretoken, 也可以通过设置 Header头来实现

<script>
    $('#btn').click(function () {
		... ...
        $.ajax({
            // 变化的地方
            headers: {'X-CSRFToken': csrf},
            url:'/demoapp/login/',
            ... ...
        })
    })
script>

然后测试请求,发现也是可以正常跳转的

js cookie 方法

这个方法只是获取 csrf token的方式不同,数据提交的时候,也是采用header或者data的方式

如果大家在Django的view视图中获取过request.META 信息的时候, 知道有一个 HTTP_COOKIE

在该测试项目中 index view视图中获取 request.META 的 HTTP_COOKIE 值

'HTTP_COOKIE': 'csrftoken=HZFzkrJpAuIAwKaDzZT0lff5zmQHuZoud7ADduS7RqU2y8vuxp1v9oI2BroC7bou; sessionid=dzi8katogv6s4yffgfng5abp9xmusr7x'

或者 其实可以从浏览器的 网络中的某个接口(比如这里的login)点击右侧的Cookie 可以看到有个 csrftoken 选项

Django中的CSRF使用及ajax请求接口时问题总结_第6张图片

通过 jquery.cookie 获取csrftoken,当然需要引入一个 js文件 jquery.cookie.min.js

var csrf_v2 = $.cookie('csrftoken');

修改 Headers 或者 data 的对应选项值。然后发起请求可以看到是符合预期的

问题扩展

之前在开发个人博客的点赞功能时,“点赞”功能就是通过Ajax请求发起的,用的方法也是这里介绍的,但是提示403报错,因为是上线之后再开发的功能,所以请求属于跨域(当然也配置了Django的跨域) ,前端 http://newblog.colinspace.com 然后通过nginx 的 proxy_pass代理到Django后端。

如果Ajax的URL使用的是Django后端的IP+Port 就是不行的,URL得换成 http://newblog.colinspace.com 才行

==> 这里debug了发现 IP+port的时候进行Post 是没有HTTP_COOKIE的,但是Header中有了HTTP_X_CSRFTOKEN ;域名的形式是有HTTP_COOKIE的,待深入研究CSRF的源码分析为什么


当然网上也有通过以下方法来阻止CSRF的

  • 注销掉 中间件里面的'django.middleware.csrf.CsrfViewMiddleware', 属于全局配置
  • 在对应的view视图上使用装饰器函数 @csrf_exempt, 局部视图函数控制
  • 还有一种方式是,白名单的方式,开发一个中间件,然后白名单内的URL 可以不经过 CSRF 校验

具体的使用详见文章:【 Django如何阻止CSRF的使用】

但是不管是那种方式,都不建议"关闭" CSRF 特性,可以使用上面介绍的方案

知识点总结

OK,本节介绍就到这里,从本章节我们学习到

  • 1、常规的Django Form表达提交数据时,如何使用 CSRF
  • 2、Ajax的三种不同的方式获取和提交 CSRF token
  • 3、跨域时Ajax中的URL应该使用最外暴露的域名,否则CSRF 不通过
  • 4、简单了解了如何“阻止” CSRF 校验的三种方式
  • 5、前端知识,JavaScript中如何跳转、如何获取input的值等

原文链接 http://newblog.colinspace.com/blog/post/8/

你可能感兴趣的:(Django,django,csrf,ajax)