ajax - 如何在 Django 的 ajax POST 返回新的 csrf token ？

Question

我有一个简单的 Like 按钮，当与 @csrf_exempt 一起使用时效果很好:

模板

<p id="like_count"> {{ topic.likes }}</p> 
<span data-type="topic" title="Like">       {% csrf_token %}
 <i class="fa fa-thumbs-up" id="liket" name="{{topic.id}}">  

Ajax

$(function(){
$('#liket').click(function(){
      $.ajax({
               type: "POST",
               url: "/like/",
               data: {
               'topic_id': $(this).attr('name'), 
               'csrfmiddlewaretoken': '{{csrf_token}}'
               },
               success: tlikeSuccess,
               dataType: 'html'               
                });
    });

});
function tlikeSuccess(data, textStatus, jqXHR)
{
    $('#like_count').html(data);
}

和观点:

#@csrf_exempt 
def topic_like(request):

    args = {}
    if request.method == 'POST':

        user = request.POST.get('user')
        lu= request.user #User.objects.get(username= user)
        topic_id = int(request.POST.get('topic_id'))

        try:
            liked_topic = Topic.objects.get(id = topic_id)
        except:
            liked_topic = None  

        if TopicLike.objects.filter(liker=request.user.id, topic=topic_id).exists():

            liked_topic.likes -=1
            liked_topic.save()
            TopicLike.objects.filter(topic=topic_id, liker=request.user.id).delete()

        else:            
            liked_topic.likes +=1
            liked_topic.save()
            newliker = TopicLike(topic=topic_id, liker=request.user.id)
            newliker.save()          


    #args.update(csrf(request))
    args['likes'] = str(liked_topic.likes)
    return render(request, 'ajax_like.html', args)  

但是我不喜欢这种忽略 CSRF 的变通方法，因为它可能容易受到攻击。另一方面，我无法设法将新的 CSRF token 返回到模板中，因此非常感谢您将 CSRF 集成到此按钮中的提示。

Answer 1

Django 在其 docs 中已定义为在 AJAX 请求上实际设置 header ，同时使用 jQuery 1.5.1 和更新版本中的 settings.crossDomain 保护 CSRF token 不被发送到其他域。

获取 token :

// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // 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;
}
var csrftoken = getCookie('csrftoken');

在 header 中设置 CSRFToken:

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

也尝试使用此方法将 CSRF token 嵌入此 SO link. 上给出的每个 AJAX 请求中

$(function () {
    $.ajaxSetup({
        headers: { "X-CSRFToken": getCookie("csrftoken") }
    });
});