CSRF_token在来自同一页面的djnango Ajax多重请求中无效

Question

我正试图在我的项目中执行基于OTP的登录。因此，我在登录表单中有一个带有电子邮件和密码字段的表单，当我通过AJAX请求提交时，我会检查数据库中的电子邮件和密码，如果值正确，我会通过电子邮件发送一个OTP，并在同一页面上显示一个新的OTP字段，用于输入OTP进行验证。

到目前为止，一切都很好，但在进入OTP后，当我试图重新提交表格时，我收到了一个错误csrf_token无效。据我所知，csrf_token只在页面刷新或页面加载时生成，但在我的情况下，在页面加载时产生的第一个csrf_taken在第一次发布请求中使用。

那么现在我如何用相同的csrf_token发送第二个post请求，或者我如何生成新的csrf_token。

代码片段如下：

<form id="loginForm" method="post" action="send_otp">
<div class="col-12">
<label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Email</label>
<input id="email" type="text" name="email" placeholder="Name">
</div>
<div class="col-12">
<label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Password</label>
<input id="password" type="password" name="password" placeholder="Password">
</div>
<div id="otp_field" class="col-12">

</div>
<div class="col-12">
<button type="submit" name="submit" id="send_otp" class="button -md -green-1 text-dark-1 fw-500 w-1/1">Login</button>
</div>
</form>

通过Ajax发送请求并在成功时添加OTP输入字段：

$("#loginForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $(this),
url = $form.attr('action');
/* Send the data using post with element id name and name2*/
var posting = $.post(url, {
"csrfmiddlewaretoken":"{{ csrf_token }}",//$('input[name="csrfmiddlewaretoken"]').val(),
"email": $('#email').val(),
"pass": $('#password').val()
});
/* Alerts the results */
posting.done(function(data) {
$('#email'). attr('disabled','disabled');
$('#password'). attr('disabled','disabled');
$('#otp_field').append('<label class="text-16 lh-1 fw-500 text-dark-1 mb-10">Enter OTP</label><input id="otp" type="text" name="otp" placeholder="Enter OTP">')
});
posting.fail(function() {

});
});

我怎样才能做到这一点？

Answer 1

将此django文档中的javascript添加到您的页面中。

function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');

通过csrfmiddlewaretoken:getCookie('csrftoken')

{% csrf_token %}返回一个您不想要的输入标记，并且该标记拼写错误。

从另一个问题来看：

尝试在登录函数之前添加@csrf_protect装饰器。

from django.views.decorators.csrf import csrf_protect
@csrf_protect
def login(request):
csrfContext = RequestContext(request)
return render_to_response('foo.html', csrfContext)

如果表单不在foo.html中，则需要将@csrf_protect方法添加到生成它的视图函数中。

https://stackoverflow.com/a/12731412/18020941