Сбой проверки Django CSRF с помощью запроса Ajax POST

Если вы используете функцию $.ajax, вы можете просто добавить токен csrf в тело данных:

$.ajax({
    data: {
        somedata: 'somedata',
        moredata: 'moredata',
        csrfmiddlewaretoken: '{{ csrf_token }}'
    },

Добавьте эту строку в код jQuery:

$.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

и сделано.

Проблема заключается в том, что django ожидает, что значение из файла cookie будет передано как часть данных формы. Код из предыдущего ответа получает javascript для поиска значения cookie и ввода его в данные формы. Это прекрасный способ сделать это с технической точки зрения, но это выглядит немного многословным.

В прошлом я делал это проще, получая javascript, чтобы поместить значение токена в данные сообщения.

Если вы используете {% csrf_token%} в своем шаблоне, вы получите поле скрытой формы, которое несет значение. Но, если вы используете {{csrf_token}}, вы получите простое значение токена, поэтому вы можете использовать его в javascript, как это....

csrf_token = "{{ csrf_token }}";

Затем вы можете включить это, используя требуемое имя ключа в хеше, затем отправляете в качестве данных на вызов ajax.

{% csrf_token %} помещается в html-шаблоны внутри <form></form>

переводит на что-то вроде:

<input type='hidden' name='csrfmiddlewaretoken' value='Sdgrw2HfynbFgPcZ5sjaoAI5zsMZ4wZR' />

так почему бы не просто вставить его в JS следующим образом:

token = $("#change_password-form").find('input[name=csrfmiddlewaretoken]').val()

а затем передать его, например, выполнить POST, например:

$.post( "/panel/change_password/", {foo: bar, csrfmiddlewaretoken: token}, function(data){
    console.log(data);
});

Если ваша форма правильно помещается в Django без JS, вы должны иметь возможность постепенно улучшать ее с помощью ajax без какой-либо хакерской или грязной передачи токена csrf. Просто сериализуйте всю форму и автоматически загрузите все поля формы включая скрытое поле csrf:

$('#myForm').submit(function(){
    var action = $(this).attr('action');
    var that = $(this);
    $.ajax({
        url: action,
        type: 'POST',
        data: that.serialize()
        ,success: function(data){
            console.log('Success!');
        }
    });
    return false;
});

Я тестировал это с помощью Django 1.3+ и jQuery 1.5+. Очевидно, что это будет работать для любой HTML-формы, а не только для приложений Django.

Принятый ответ, скорее всего, является красной селедкой. Разница между Django 1.2.4 и 1.2.5 была требованием для токена CSRF для запросов AJAX.

Я столкнулся с этой проблемой на Django 1.3, и это было , вызванное тем, что cookie CSRF не был установлен. Django не будет устанавливать cookie, если это не нужно. Таким образом, сайт исключительно или сильно аякс, работающий на Django 1.2.4, потенциально никогда не отправил бы токен клиенту, а затем обновление, требующее токена, вызовет ошибки 403.

Идеальное решение здесь: http://docs.djangoproject.com/en/dev/ref/contrib/csrf/#page-uses-ajax-without-any-html-form
но вам придется подождать 1.4, если это не просто документация, догоняющая код

Edit

Обратите также внимание на то, что более поздние документы Django отмечают ошибку в jQuery 1.5, поэтому убедитесь, что вы используете 1.5.1 или новее с предлагаемым кодом Django: http://docs.djangoproject.com/en/1.3/ref/contrib/csrf/#ajax

Не-jquery ответ:

var csrfcookie = function() {
    var cookieValue = null,
        name = 'csrftoken';
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
};

использование:

var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.setRequestHeader('X-CSRFToken', csrfcookie());
request.onload = callback;
request.send(data);

Используйте Firefox с Firebug. Откройте вкладку "Консоль" при запуске запроса ajax. С помощью DEBUG=True вы получаете хорошую страницу ошибок django в качестве ответа, и вы даже можете увидеть отображаемый html ответа ajax на вкладке консоли.

Затем вы узнаете, что такое ошибка.

Я только что столкнулся с другой, но схожей ситуацией. Не 100% уверены, что это будет решение вашего дела, но я решил проблему для Django 1.3, установив параметр POST "csrfmiddlewaretoken" с правильной строкой значений cookie, которая обычно возвращается в форме вашего домашнего HTML Django шаблона с тегом '{% csrf_token%}'. Я не пробовал старшего Django, просто случилось и разрешилось на Django1.3. Моя проблема заключалась в том, что первый запрос, представленный через Ajax из формы, был успешно выполнен, но вторая попытка от того же самого из неудачного привела к состоянию 403, даже если заголовок X-CSRFToken правильно помещен также с токеном CSRF как в случае первой попытки. Надеюсь, это поможет.

Привет,

Хиро

вы можете вставить этот js в свой html файл, запомните его перед другой функцией js

<script>
  // 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;
  }

  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }

  $(document).ready(function() {
    var csrftoken = getCookie('csrftoken');
    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      }
    });
  });
</script>

Каждому сеансу присваивается один токен CSRF (т.е. каждый раз при входе в систему). Поэтому, прежде чем вы захотите получить некоторые данные, введенные пользователем, и отправьте их как ajax-вызов какой-либо функции, которая защищена csrf_protect decorator, попробуйте найти функции, которые вызывается до того, как вы получите эти данные от пользователя. Например. должен отображаться некоторый шаблон, по которому ваш пользователь вводит данные. Этот шаблон создается некоторой функцией. В этой функции вы можете получить токен csrf следующим образом: csrf = request.COOKIES ['csrftoken'] Теперь передайте это значение csrf в контекстном словаре, против которого отображается данный шаблон. Теперь в этом шаблоне напишите эту строку: Теперь в вашей функции javascript перед выполнением запроса ajax напишите:  var csrf = $('# csrf'). val() это выберет значение токена, переданного шаблону, и сохранит его в переменной csrf. Теперь, когда вы делаете ajax-вызов, в ваших пост-данных также передайте это значение: "csrfmiddlewaretoken": csrf

Это будет работать, даже если вы не используете формы django.

На самом деле логика здесь: вам нужен токен, который вы можете получить от запроса. Таким образом, вам просто нужно выяснить, какая функция вызывается сразу после входа в систему. Как только у вас есть этот токен, либо сделайте еще один вызов ajax, чтобы получить его, либо передать его в какой-либо шаблон, доступный вашему ajax.

Кажется, никто не упомянул, как это сделать в чистом JS, используя заголовок X-CSRFToken и {{ csrf_token }}, поэтому здесь простое решение, в котором вам не нужно искать файлы cookie или DOM:

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
xhttp.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
xhttp.send();

Если кто-то борется с аксиомами, чтобы сделать эту работу, это помогло мне:

import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

Источник: https://cbuelter.wordpress.com/2017/04/10/django-csrf-with-axios/

для тех, кто сталкивается с этим и пытается отлаживать:

1) проверка django csrf (при условии, что вы отправляете ее) здесь

2) В моем случае settings.CSRF_HEADER_NAME было установлено значение "HTTP_X_CSRFTOKEN", и мой вызов AJAX отправлял заголовок с именем "HTTP_X_CSRF_TOKEN", поэтому материал не работал. Я мог бы либо изменить его в вызове AJAX, либо настройке django.

3) Если вы решите изменить его на стороне сервера, найдите свое место установки django и бросьте точку останова в csrf middleware.f, вы используете virtualenv, это будет что-то вроде: ~/.envs/my-project/lib/python2.7/site-packages/django/middleware/csrf.py

import ipdb; ipdb.set_trace() # breakpoint!!
if request_csrf_token == "":
    # Fall back to X-CSRFToken, to make things easier for AJAX,
    # and possible for PUT/DELETE.
    request_csrf_token = request.META.get(settings.CSRF_HEADER_NAME, '')

Затем убедитесь, что токен csrf правильно получен из запроса. META

4) Если вам нужно изменить заголовок и т.д. - измените эту переменную в файле настроек

В моем случае проблема заключалась в конфигурации nginx, которую я скопировал с основного сервера на временную, с отключением https, который не нужен для второго в процессе.

Мне пришлось прокомментировать эти две строки в конфиге, чтобы он снова работал:

# uwsgi_param             UWSGI_SCHEME    https;
# uwsgi_pass_header       X_FORWARDED_PROTO;