“CSRF token missing or incorrect” в AJAX / Django?

Question

[nurzhannogerbek]

Здравствуйте! Как исправить данную проблему?

Есть страница, где выводится список задач и под каждой задачей есть форма для добавления комментария. Я использую AJAX для добавления новой задачи и обновления списка задач. Новая задача добавляется и список обновляется, но затем, когда пытаюсь в форму добавить комментарий и отправить новый комментарий выводится ошибку, которую вы можете увидеть на картинке cнизу:



Я так понял в AJAX нужно как-то передать CSRF, нашел в официальной документации страницу: Cross Site Request Forgery protection. Только вот как прикрутить ее не совсем понял. Помогите пожалуйста решить данную проблему.

JS:

$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_task_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        return false;
    };
    // Create Task
    $("#task-add-button").click(loadForm);
    $("#modal").on("submit", ".js-task-add-form", saveForm);
    // Update Task
    $("#task-list").on("click", "#js-edit-task-button", loadForm);
    $("#modal").on("submit", ".js-task-edit-form", saveForm);
});

Answer 1

[Nekr0z]

Чтобы "в AJAX передать CSRF", нужно выполнить AJAX-запрос с параметром:

data: {csrfmiddlewaretoken: getCookie('csrftoken')}

Функция getCookie() описана на той странице документации, что ты нашёл.

Comments

[nurzhannogerbek]

Подскажите как правильно в моем конкретном случаи вставить данный параметр? В моем функции saveForm есть data: form.serialize(). Как именно вписать туда предложенную вами запись. Не могу разобраться.

[nurzhannogerbek]

Попробовал данный код, но он не работает. Можете сказать что не так сделал? Вставил alert(csrftoken) в функцию saveForm для проверки. При попытки сохранить комментарий выдает выдает длинную строку, вроде csrftoken есть. Но вот сохранить сам комментарий не получается. Под формой появляется сообщение `This field is required` при том что форма не пустая. Кажется с неправильно прописал параметр data. Помогите пожалуйста разобраться.

JS:

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

// TASK

$(function () {
    var loadForm = function () {
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType: 'json',
            beforeSend: function () {
                $("#modal").modal("show");
            },
            success: function (data) {
                $("#modal .modal-content").html(data.html_task_form);
            }
        });
    };

    var saveForm = function () {
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            data: {
                data: form.serialize(),
                csrfmiddlewaretoken: getCookie('csrftoken')
            },
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
        return false;
    };

    // Create TASK
    $("#task-add-button").click(loadForm);
    $("#modal").on("submit", ".js-task-add-form", saveForm);
    // Update TASK
    $("#task-list").on("click", "#js-edit-task-button", loadForm);
    $("#modal").on("submit", ".js-task-edit-form", saveForm);
});

[nurzhannogerbek]

Nekr0z : пробовал в свой saveForm function вот этот код

data: form.serialize().append('csrfmiddlewaretoken', getCookie(csrftoken))

Результата это не дало. Что делаю не так подскажите пожалуйста.

Answer 2

[Юрий Мороз]

Тебе нужно добавить в форму скрытый input с csrf токеном. Примерно так:

<form method="post">
                        {% csrf_token %}
                        {% for field in form %}
                                {{ field.errors }}
                                {{ field.label_tag }}
                                {{ field }}
                        {% endfor %}
                        <button type="submit"Submit</button>
                    </form>

Отправлять можешь так:

var saveForm = function () {
        var form = $(this);
        var formData = new FormData(this);
        $.ajax({
            url: form.attr("action"),
            data: formData,
            contentType: false,
            processData: false,
            type: form.attr("method"),
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-list").html(data.html_task);
                    $("#modal").modal("hide");
                }
                else {
                    $("#modal .modal-content").html(data.html_task_form);
                }
            }
        });
        return false;
    };

Comments

[nurzhannogerbek]

{% csrf_token %} есть в форме. В обычном состоянии форма работает, комментарии добавляются. Проблема возникает когда, пытаюсь отправить данные через форму в обновленном через AJAX списке. Пример описал в самом посте. Например добавил задачу, список обновился через AJAX, но затем, в этом обновленном списке, когда пытаюсь отправить данные через одну из форм выдает ошибку.

Я нашел такой код, только вот не знаю как его прикрутить к своему JS коду. Можете помочь?

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

[nurzhannogerbek]

Юрий Мороз пробовал в свой saveForm function вот этот код

`data: form.serialize().append('csrfmiddlewaretoken', getCookie(csrftoken))`.

Результата это не дало. Что делаю не так подскажите пожалуйста.

Answer 3

[JonGalt]

У меня работает вот так:

Сделал себе универсальную функцию для post запросов через ajax:

function ajax_post(url, form_id, block_id) {
            var form = $(form_id).serialize();
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: form,
                    dataType: 'html',
                    success: function (data) {
                        $(block_id).html(data);
                    }
                });
                return false;
        }

а потом просто ссылаюсь на нее в формах

<form action="javascript:void(null);" onsubmit="ajax_post('{% url 'companies' project %}', '#project_company_form', 
       '#content')" id="project_company_form">
      {% csrf_token %}
         {{ form.company }}
      ....
         <button type="submit"> Add </button>
   </form>