“CSRF 令牌丢失或不正确”而在 Django 中通过 AJAX 发布参数

Question

我尝试发布类似的参数

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

，但是，Django 返回 Forbidden 403. CSRF 验证失败。请求已中止。 我正在使用 'django.middleware.csrf.CsrfViewMiddleware' 并且找不到如何在不影响安全性的情况下防止此问题。

Answer 1

您可以通过两种不同的方式发出 AJAX post 请求：

1. 告诉您的视图不要检查 csrf 令牌。这可以通过使用装饰器 @csrf_exempt 来完成，如下所示：

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

2. 要在每个 AJAX 请求中嵌入 csrf 令牌，对于 jQuery 可能是：

   <前><代码>$(函数 () {
   $.ajaxSetup({
   headers: { "X-CSRFToken": getCookie("csrftoken") }
   });
   });

   其中getCookie函数从cookie中检索csrf令牌。我使用以下实现：

   函数 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;
               返回 unescape(document.cookie.substring(c_start,c_end));
           }
       }
       返回 ””;
    }
   

   此外，jQuery 有一个用于访问 cookie 的插件，类似的东西：

   //设置cookie
   $.cookie('cookiename', 'cookievalue');
   // 读取cookie
   var myCookie = $.cookie('cookiename');
   //删除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

我花了一段时间才明白如何处理代码丹尼尔发布的。但实际上您所要做的就是将其粘贴到 javascript 文件的开头。

对我来说，到目前为止最好的解决方案是：

1. 创建一个csrf.js文件

2. 粘贴csrf.js 中的代码 file

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

请注意，STATIC_PREFIX/js/csrf.js 指向我的文件。我实际上正在使用 {% get_static_prefix as STATIC_PREFIX %} 加载 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}}');
    }
  }
});

docs

Answer 5

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

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

最小的代码更改是:

$.ajax({
  headers: { "X-CSRFToken": $.cookie("csrftoken") },
  ...
});

Answer 6

如果您不将 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 }}'}

Answer 7

我昨天遇到了同样的问题，认为如果有一种简单的方法来处理它，会对人们有所帮助，所以我为此编写了一个 jQuery 插件： jquery.djangocsrf。它不是在每个请求中添加 CSRF 令牌，而是将自身挂接到 AjaxSend jQuery 事件上，并将客户端 cookie 添加到标头中。

使用方法如下：

1- 包含它：

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.cookie.js"></script>
<script src="path/to/jquery.djangocsrf.js"></script>

2- 在代码中启用它：

$.djangocsrf( "enable" );

如果您的模板使用 {% csrf_token %}，Django 总是在 cookie 中添加令牌。为了确保即使您不在模板中使用特殊标记，它也始终会添加它，请使用 @ensure_csrf_cookie 装饰器：

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def my_view(request):
    return render(request, 'mytemplate.html')

注意：我使用的是 Django 1.6.2。

Answer 8

谢谢大家的所有回答。我正在使用 Django 1.5.1。我参加聚会有点晚了，但还是到了。

我发现 Django 项目 的链接非常有用，但是我真的不想每次想要进行 Ajax 调用时都必须包含额外的 JavaScript 代码。

我喜欢 jerrykan 的响应，因为它非常简洁，只在正常的 Ajax 调用中添加一行。为了回应下面关于 Django 模板标签不可用的情况的评论，从 DOM 加载 csrfmiddlewaretoken 怎么样？

var token = $('input[name="csrfmiddlewaretoken"]').prop('value');
jQuery.ajax({
    type: 'POST',
    url: url,
    data: { 'csrfmiddlewaretoken': token },
    dataType: 'json',
    success: function(data) { console.log('Yippee! ' + data); } 
});

编辑 2016 年 3 月

在过去的几年里，我对这个问题的处理方法已经发生了变化。我将下面的代码（来自 Django 文档）添加到 main .js 文件并将其加载到每个页面上。完成后，您就不必再担心 ajax 的 CSRF 令牌了。

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');

Answer 9

在请求中包含 x-csrftoken 标头：

var token = $('input[name="csrfmiddlewaretoken"]').prop('value');
jQuery.ajax({
    type: 'POST',
    url: url,
    beforeSend : function(jqXHR, settings) {
        jqXHR.setRequestHeader("x-csrftoken", get_the_csrf_token_from_cookie());
    },
    data: data,
    dataType: 'json',

});

Answer 10

如果在阅读其他答案后，有人仍然在挣扎，请尝试以下操作：

   $.ajax({
            type: "POST",
            beforeSend: function (request)
            {
                request.setRequestHeader("X-CSRF-TOKEN", "${_csrf.token}");
            },
            url: servlet_path,
            data : data,
            success : function(result) {
            console.log("Success!");
   }
});

Answer 11

请注意，以这种方式执行此操作时，请确保

标记内没有 {% csrf_token %}。然后按照解释 此处 将以下代码添加到您的 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');

// using js fetch
// https://docs.djangoproject.com/en/3.1/ref/csrf/#setting-the-token-on-the-ajax-request
    const request = new Request(
    /* URL */,
    {headers: {'X-CSRFToken': csrftoken}}
);
fetch(request, {
    method: 'POST',
    mode: 'same-origin'  // Do not send CSRF token to another domain.
}).then(function(response) {
    // ...
});

Answer 12

只是想在这里指出，如果 GET 在您的用例中有效，那么它就不需要 CSRF 令牌。对于我的用例，使用 GET 就可以了。

Answer 13

html

<form action="">
        {% csrf_token %}
    </form>

JS

 <script>   
     const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
              const request = new Request(
                   'url_here',
                  {headers: {'X-CSRFToken': csrftoken}}
              );
              fetch(request, {
                  method: 'POST',
                  // mode: 'same-origin' optinal // Do not send CSRF token to another domain.
              }).then(function(response) {
                  console.log(response);
              });
    
    </script>

更多详细信息的参考链接

Answer 14

作为我的错误的总结：

1. 不要忘记设置请求内容类型。
2. 获取 csrf 值，可以从
   • 模板{{ csrf_token }}
   • cookie，使用django 站点中的片段

   <块引用>

   注意。默认 cookie 名称为 csrftoken，但可以通过 CSRF_COOKIE_NAME 设置覆盖。

   • DOM，如果您无法访问 Cookie（您将 CSRF_USE_SESSIONS 或 CSRF_COOKIE_HTTPONLY 设置为 True）

   <块引用>

   document.querySelector('[name=csrfmiddlewaretoken]').value;

3. 设置请求头，我使用的是XMLHttpRequest

const Http = new XMLHttpRequest();
Http.setRequestHeader("X-CSRFToken", CSRF_VALUE);
Http.setRequestHeader("X_CSRFTOKEN", CSRF_VALUE);

标头名称由 CSRF_HEADER_NAME 设置管理，默认为 HTTP_X_CSRFTOKEN。

但是：“从服务器接收到的标头名称通过将所有字符转换为大写、用下划线替换所有连字符以及在名称中添加 'HTTP_' 前缀来规范化” src。

因此，如果您设置 HTTP_X_CSRFTOKEN 标头，Django 会将其转换为 HTTP_HTTP_X_CSRFTOKEN ，这是不正确的名称，并会引发 CSRF Missed 错误。

Http.setRequestHeader("X-CSRFToken", csrftoken);        // This worked
Http.setRequestHeader("X-CSRFTOKEN", csrftoken);        // Also this
Http.setRequestHeader("HTTP-X-CSRFToken", csrftoken);   // Not working
Http.setRequestHeader("HTTP_X_CSRFTOKEN", csrftoken);   // Not Working
Http.setRequestHeader("X_CSRFTOKEN", csrftoken);        // Not working !!

4. 不要在ajax中使用与浏览器不同的url 127.0.0.1 & localhost 不一样！！

5. 据我所知，无需在请求正文中设置 data.append("csrfmiddlewaretoken", csrftoken); 。