Як подолати помилку "CSRF cookie not set" у зв'язці React-Django

Як подолати помилку “CSRF cookie not set” у зв’язці React-Django

3 Березня 2024 в 21:01 51

Розробка сучасних веб-додатків часто вимагає інтеграції різних технологій для фронтенду та бекенду. Популярний дует – це React для клієнтської частини та Django як бекенд-фреймворк. Однак, при інтеграції цих технологій може виникнути проблема з CSRF (Cross Site Request Forgery) захистом, що призводить до помилки “Forbidden (CSRF cookie not set)”. В цій статті ми розглянемо, як налаштувати обидві сторони – React та Django – для безпроблемної взаємодії та вирішення цієї проблеми.

Розуміння CSRF та його значення

Перш ніж глибше зануритися у вирішення проблеми, важливо зрозуміти, що таке CSRF і чому важливо захищати ваші веб-додатки від таких атак. CSRF атака дозволяє зловмисникам виконувати дії від імені аутентифікованих користувачів без їхнього відома або згоди, шляхом використання автоматично відправлених браузером аутентифікаційних токенів (наприклад, cookies). Django має вбудовану підтримку захисту від CSRF атак, яка вимагає наявності спеціального токена у формах або AJAX запитах, що відправляються на сервер.

Настройка Django для вирішення проблеми CSRF

Для забезпечення захисту від CSRF, Django використовує токени, які вставляються у форми та повинні бути відправлені разом з запитом. Якщо цей токен не відправляється або не відповідає тому, що зберігається на сервері, Django блокує запит. Важливо впевнитися, що ваша веб-сторінка коректно отримує та відправляє ці токени.

Використовуйте декоратор @ensure_csrf_cookie для вьюшок, що відповідають за рендеринг сторінок, щоб гарантувати, що CSRF токен буде встановлено у cookies при кожному запиті на ці сторінки. Це забезпечить, що клієнтська частина завжди матиме актуальний CSRF токен для відправки разом з запитами POST.

from django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def my_view(request):
    ...

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie

def my_view(request):

...

Конфігурація React для відправлення CSRF токенів

На стороні React необхідно впевнитися, що при відправленні запитів на сервер разом з даними передається і CSRF токен. Використання бібліотеки axios дозволяє легко налаштувати глобальні заголовки для кожного запиту, включаючи необхідний заголовок X-CSRFToken.

import axios from 'axios';
import Cookies from 'js-cookie';
axios.defaults.xsrfHeaderName = "X-CSRFToken";
axios.defaults.xsrfCookieName = "csrftoken";

import axios from 'axios';

import Cookies from 'js-cookie';

axios.defaults.xsrfHeaderName = "X-CSRFToken";

axios.defaults.xsrfCookieName = "csrftoken";

Ці налаштування вказують axios використовувати значення CSRF токена з cookie під назвою csrftoken і відправляти його в заголовку X-CSRFToken з кожним запитом.

Перевірка та налагодження

Після налаштування обох сторін – і на клієнті, і на сервері – важливо ретельно перевірити, що CSRF токени коректно відправляються та приймаються. Використовуйте інструменти розробника у вашому браузері для перегляду запитів та відповідей. Переконайтеся, що у запитах POST наявний заголовок X-CSRFToken із правильним значенням токена.