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

菩提老鹰

已于 2022-11-23 22:38:53 修改

阅读量1.1k

点赞数 2

分类专栏： Django 文章标签： django csrf ajax

于 2022-11-23 22:28:09 首次发布

本文链接：https://blog.csdn.net/eagle5063/article/details/128009158

版权

Django 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

前言说明

在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的验证，这里因为没有添加 {% csrf_token %} 导致报错了

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

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

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

Ajax请求Django接口

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

<html>
    <head>
        <title>Ajax Post Demo</title>
        <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错误

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

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

通过浏览器的控制台知道是登录成功了，从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 选项

通过 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的