"CSRF令牌丢失或不正确",同时在Django中通过AJAX发布参数

Question

我尝试发布参数

 jQuery.ajax(
        {
            'type': 'POST',
            'url': url,
            'contentType': 'application/json',
            'data': "{content:'xxx'}",
            'dataType': 'json',
            'success': rateReviewResult 
        }
    );

但是,Django返回Forbidden 403. CSRF verification failed. Request aborted. 我正在使用,'django.middleware.csrf.CsrfViewMiddleware'并且无法在不影响安全性的情况下找到如何防止此问题.

Answer 1

您可以通过两种不同的方式发出AJAX帖子请求:

1. 告诉你的观点不要检查csrf令牌.这可以通过使用装饰器来完成@csrf_exempt,如下所示:

   from django.views.decorators.csrf import csrf_exempt
   
   @csrf_exempt
   def your_view_name(request):
       ...
   

2. 要在每个AJAX请求中嵌入一个csrf标记,对于jQuery,它可能是:

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

   当getCookie函数从饼干CSRF令牌.我使用以下实现:

   function getCookie(c_name)
   {
       if (document.cookie.length > 0)
       {
           c_start = document.cookie.indexOf(c_name + "=");
           if (c_start != -1)
           {
               c_start = c_start + c_name.length + 1;
               c_end = document.cookie.indexOf(";", c_start);
               if (c_end == -1) c_end = document.cookie.length;
               return unescape(document.cookie.substring(c_start,c_end));
           }
       }
       return "";
    }
   

   此外,jQuery 有一个用于访问cookie 的插件,类似于:

   // set cookie
   $.cookie('cookiename', 'cookievalue');
   // read cookie
   var myCookie = $.cookie('cookiename');
   // delete cookie
   $.cookie('cookiename', null);
   

Answer 2

我发现最简单的方法是{{csrf_token}}在数据中包含值:

jQuery.ajax(
    {
        'type': 'POST',
        'url': url,
        'contentType': 'application/json',
        'data': {
            'content': 'xxx',
            'csrfmiddlewaretoken': '{{ csrf_token }}',
        },
        'dataType': 'json',
        'success': rateReviewResult 
    }
);

Answer 3

我花了一段时间才明白如何处理Daniel发布的代码.但实际上你所要做的就是将它粘贴在javascript文件的开头.

对我来说,目前最好的解决方案是:

1. 创建一个csrf.js文件

2. 将代码粘贴到csrf.js文件中

3. 在您需要的模板中引用代码

   <script type="text/javascript" src="{{ STATIC_PREFIX }}js/csrf.js"></script>
   

请注意,STATIC_PREFIX/js/csrf.js指向我的文件.我实际上正在加载STATIC_PREFIX变量{% get_static_prefix as STATIC_PREFIX %}.

高级提示:如果您正在使用模板并具有类似于base.html扩展的位置,那么您可以从那里引用脚本,您不必再担心其余文件.据我了解,这也不代表任何安全问题.

Answer 4

简单而简短

$.ajaxSetup({
  headers: { "X-CSRFToken": '{{csrf_token}}' }
});

要么

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", '{{csrf_token}}');
    }
  }
});

文档

Answer 5

由于缺乏直接答案，您只需将标头添加X-CSRFToken到cookie中的ajax请求中即可csrftoken。如果没有插件，JQuery不会做Cookie（由于某种原因），因此：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

最小的代码更改是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Answer 6

如果您没有将 js 嵌入到模板中，那么没有任何插件的最快解决方案是：

把<script type="text/javascript"> window.CSRF_TOKEN = "{{ csrf_token }}"; </script>你的模板里面引用之前的script.js文件，然后添加csrfmiddlewaretoken到您的data字典：

$.ajax({
            type: 'POST',
            url: somepathname + "do_it/",
            data: {csrfmiddlewaretoken: window.CSRF_TOKEN},
            success: function() {
                console.log("Success!");
            }
        })

如果您确实将 js 嵌入到模板中，则很简单： data: {csrfmiddlewaretoken: '{{ csrf_token }}'}