Как использовать csrf_token в Django RESTful API и React?

Question

У меня есть предыдущий опыт в Django.Если добавить шаблоны {csrf_token} в Django шаблонах, то Django обрабатывает функции csrf_token.Но когда я пытаюсь разработать API с использованием Django REST Framework, я застреваю.Как добавить и обработать такие функции, как csrf_token в API (серверная часть, разработанная с использованием Django REST Framework) и React Native/React JS (интерфейсная часть), например шаблоны Django?

Answer 1

Я использовал JQuery для Ajax в реагировать, так что в этом случае вот решение:

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

$.ajax({
       type: "POST",
       beforeSend: function(request, settings) {
                    if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                        request.setRequestHeader("X-CSRFToken", csrfcookie());
                    }
},

.... /// other codes

Answer 2

Первым шагом является получение токена CSRF, который можно получить из файла cookie Django csrftoken.

Теперь из Django docs вы можете узнать, как получить токен csrf изcookie с помощью этой простой функции JavaScript:

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]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Теперь вы можете получить токен CSRF, вызвав функцию getCookie('csrftoken')

var csrftoken = getCookie('csrftoken');

Далее вы можете использовать этот токен csrf при отправкезапрос с помощью fetch () путем присвоения полученного токена заголовку X-CSRFToken.

  fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }

Отображение токена CSRF в формах реагирования:

Если выиспользуя React для рендеринга форм вместо шаблонов Django, вам также необходимо отобразить токен csrf, поскольку тег Django { % csrf_token % } недоступен на стороне клиента, поэтому необходимо создать компонент более высокого порядка, который извлекает токен с помощью функции getCookie()и отобразить его в любой форме.

Позволяет добавить некоторую строку в файл csrftoken.js.

import React from 'react';

var csrftoken = getCookie('csrftoken');

const CSRFToken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSRFToken;

Затем вы можете просто импортировать его и вызвать в своей форме

import React, { Component , PropTypes} from 'react';

import CSRFToken from './csrftoken';


class aForm extends Component {
    render() {

        return (
                 <form action="/endpoint" method="post">
                        <CSRFToken />
                        <button type="submit">Send</button>
                 </form>
        );
    }
}

export default aForm;

Файл cookie CSRF Django

React визуализирует компоненты динамически, поэтому Django может не иметь возможности установить файл cookie CSRF-токена, если вы визуализируете свою форму с помощью React.Вот как об этом говорит Django docs:

Если ваше представление не отображает шаблон, содержащий тег шаблона csrftoken, Django может не установить cookie-файл маркера CSRF.Это часто встречается в тех случаях, когда формы динамически добавляются на страницу.Чтобы решить эту проблему, Django предоставляет декоратор представления, который принудительно устанавливает настройку cookie: surecsrf_cookie ().

Для решения этой проблемы Django предоставляет декоратор surecsrfcookie, который необходимо добавить в функцию представления.Например:

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def myview(request):

Answer 3

CSRF - атака подделки межсайтовых запросов в контексте браузера. ， Если вы предоставляете API для мультиклиента, это не обязательно.И вообще тело POST-запроса Restful api - это json ， Вы не можете добавить в него csrf_token.

Но если вы используете тело почтового запроса urlencode, вы можете добавить intecepto для всех почтовых запросов, чтобы добавить в запрос inject csrf_tokenтело.Я использую этот метод для добавления токена аутентификации api в заголовки запроса

Мой английский не очень хорош, извините.