Перенос JWT-токенов в куки: Django REST + React

Привет, Хабр! Статья в первую очередь была прежде всего написана для самого себя с целью запоминания интересного опыта по реализации кастомных костылей авторизации с помощью JWT-токенов, находящихся в куки.

В качестве бекенда был выбран горячо любимый Django Rest Framework, в качестве фронтовой части в моем случае использовался React. Начну с реализации серверной стороны. Я пропущу шаги по настройке Django REST Framework в связке с React. В Django в моем случае в качестве приложения для аутентификации пользователей было создано приложение user.

В качестве базы JWT-токенов взял библиотеку Simple JWT.

Мои настройки:

SIMPLE_JWT = {     'ROTATE_REFRESH_TOKENS': True,  # Обновление refresh токена при замене access токена     'BLACKLIST_AFTER_ROTATION': True,      'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),      'REFRESH_TOKEN_LIFETIME': timedelta(days=1),      'REFRESH_COOKIE': 'refresh_token',  # Название ключа в куки, в котором хранится refresh токен     'AUTH_COOKIE': 'access_token',  # Название ключа в куки, в котором хранится access токен     'AUTH_COOKIE_SECURE': False,  # Куки должны передаваться только по HTTPS (True для production)     'AUTH_COOKIE_HTTP_ONLY': True,  # Запрет доступа к куки через JavaScript     'AUTH_COOKIE_SAMESITE': 'Strict',  # Ограничение передачи куки при кросс-сайтовых запросах. }

Предварительно разметил сами API пути:

from django.urls import path from .views import CookieTokenObtainPairView, CookieTokenRefreshView, get_csrf  urlpatterns = [    path('token/', CookieTokenObtainPairView.as_view(), name='token_obtain_pair'),    path('token/refresh/', CookieTokenRefreshView.as_view(), name='token_refresh'),    path('csrf/', get_csrf, name='get_csrf'), ]

Реализация логики входа

Далее начнем с класса CookieTokenObtainPairView, который отвечает за логику входа и генерацию первичной пары jwt токенов:

from django.conf import settings from django.http import JsonResponse from django.middleware.csrf import get_token from django.utils.decorators import method_decorator  from rest_framework.response import Response from rest_framework.permissions import IsAuthenticated from rest_framework.request import Request from rest_framework import status from rest_framework.permissions import AllowAny  from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView from rest_framework_simplejwt.authentication import JWTAuthentication from rest_framework_simplejwt.exceptions import InvalidToken, TokenError  from .utils import set_jwt_cookies, enforce_csrf from .serializer import CookieTokenObtainPairSerializer  class CookieTokenObtainPairView(TokenObtainPairView):      """     Представление для получения JWT-токенов (access и refresh) и их сохранения в куки.      Это представление расширяет стандартный `TokenObtainPairView` из Django REST Framework Simple JWT.     После успешной аутентификации access и refresh токены сохраняются в HTTP-only куки и удаляются     из тела ответа.      Примечание:     - Для работы с куками на клиенте необходимо настроить CORS с поддержкой credentials.     """      serializer_class = CookieTokenObtainPairSerializer     authentication_classes = ()     permission_classes = (AllowAny,)      @method_decorator(enforce_csrf)     def post(self, request: Request, *args, **kwargs) -> Response:         response = super().post(request, *args, **kwargs)          if response.status_code == 200:             access_token = response.data.get('access')             refresh_token = response.data.get('refresh')              if access_token and refresh_token:                 response = set_jwt_cookies(response, access_token, refresh_token)                                  del response.data['access']                 del response.data['refresh']          return response    

Пробегусь по коду:

CookieTokenObtainPairSerializer — написал свой сериалайзер, так как лично мне нужно было помимо токенов добавить имя пользователя, который авторизовался и статус-заглушку

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer  class CookieTokenObtainPairSerializer(TokenObtainPairSerializer):          def validate(self, attrs):         data = super().validate(attrs)         data['user'] = str(self.user)         data['user_status'] = "active"         return data

Также решил перестраховать свои фобии быть взломанным перуанскими хакерами и внедрил проверку csrf-токена. Для этого был создан отдельный модуль utils.py и добавлен декоратор enforce_csrf

from functools import wraps from rest_framework.authentication import CSRFCheck from rest_framework import exceptions, request, response  def enforce_csrf(func):     """     Декоратор для принудительной проверки CSRF.     """     @wraps(func)     def wrapped_view(request, *args, **kwargs):         check = CSRFCheck(dummy_get_response)         check.process_request(request)         reason = check.process_view(request, None, (), {})         if reason:             raise exceptions.PermissionDenied('CSRF Failed: %s' % reason)          return func(request, *args, **kwargs)     return wrapped_view

def get_csrf(request: Request) -> Response:     response = JsonResponse({'detail': 'CSRF cookie set'})     response['X-CSRFToken'] = get_token(request)     return response

После успешной валидации и обновления токенов — удаляю их из тела запроса и добавляю в куки с помощью функции set_jwt_cookies

def set_jwt_cookies(response: response.Response, access_token: str, refresh_token: str) -> response.Response:     response.set_cookie(         'access_token',         access_token,         max_age=5 * 60,  # 4 минуты         httponly=True,    # Защита от XSS         # secure=True,      # Включить для продакшн режима         samesite='Strict' # Защита от CSRF     )     response.set_cookie(         'refresh_token',         refresh_token,         max_age=24 * 60 * 60,  # 1 день         httponly=True,         # secure=True,         samesite='Strict'     )     return response 

Переходим на React

На стороне React написал простенькую функцию с логином:

import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom";  //Принудительное получение crsf-токена для включения его в куки //и заголовки POST-запросов async function getCSRF() {   return axios.get('/api/user/csrf/', { withCredentials: true })       .then((res) => {           return res.headers['x-csrftoken'];       })       .catch((err) => {           console.error('Ошибка при получении CSRF-токена:', err);           throw err;       }); }  //Мои внутренние приколы с получением имени пользователя и его псевдо-статуса const [username, setUserName] = useState(() =>     localStorage.getItem("username")     ? JSON.parse(localStorage.getItem("username"))     : null ); const [userStatus, setUserStatus] = useState(() =>     localStorage.getItem("userStatus")     ? JSON.parse(localStorage.getItem("userStatus"))     : null );  const loginUser = async (e) => {     e.preventDefault();     let csrfToken = await getCSRF() //Получили от джанго csrf токен и вставили в куки     const response = await fetch("/api/user/token/", {         method: "POST",         credentials: 'include',         headers: {             "Content-Type": "application/json",             'X-CSRFToken': csrfToken, // Добавляем CSRF-токен в заголовок          },         body: JSON.stringify({             username: e.target.username.value,             password: e.target.password.value,         }),     });      if (response.ok) {         const data = await response.json();         //Делаем то, что нам надо после успешного логина         setUserName(data["user"])         setUserStatus(data["user_status"])         localStorage.setItem("username", JSON.stringify(data["user"]));         localStorage.setItem("userStatus", JSON.stringify(data["user_status"]));         navigate("/");     } else {         alert("Неправильный логин или пароль");     } };

Функция дергает джанго, получает обновленные куки с csrf-токеном и затем отправляет данные пользователя на аутентификацию нашему CookieTokenObtainPairView . После успешного входа добавляю в локальное хранилище нужные мне имя пользователя и его статус-заглушку

Далее при API запросах на сервер нам надо включать куки в запросы, в React сделал это с помощью указания withCredentials: true

Пример клиентской функции с GET запросом:

function refreshObjectDetail(setObjectDetail, apiPathDetail) {     axios         .get(`${apiPathDetail}`, {             headers: {                 'Content-Type': 'application/json',                              },             withCredentials: true,         })         .then((res) => {             setObjectDetail(res.data);             if (res.data.name){                 document.title = res.data.name;             }         })         .catch((err) => console.log(err)); }

И более не нужно волноваться о том, что кто-то ваши токены может украсть из открытого локального хранилища браузера, ляпота!

Аутентификация с помощью cookie

Для аутентификации пользователя на стороне сервера с помощью токенов, спрятанных в куки потребовалось написать кастомный класс CookieAuthentication и также с декоратором enforce_csrf

from django.conf import settings from django.utils.decorators import method_decorator from rest_framework_simplejwt.authentication import JWTAuthentication from .utils import enforce_csrf  class CookieJWTAuthentication(JWTAuthentication):          @method_decorator(enforce_csrf)     def authenticate(self, request):         header = self.get_header(request)                  if header is None:             raw_token = request.COOKIES.get(settings.SIMPLE_JWT['AUTH_COOKIE']) or None         else:             raw_token = self.get_raw_token(header)         if raw_token is None:             return None          validated_token = self.get_validated_token(raw_token)         return self.get_user(validated_token), validated_token

Далее установил этот класс аутентификации как единственный и неповторимый в конфигах REST_FRAMEWORK

REST_FRAMEWORK = {     "DEFAULT_PERMISSION_CLASSES": [         "rest_framework.permissions.IsAuthenticated",     ],     'DEFAULT_AUTHENTICATION_CLASSES': [         'user.authenticate.CookieJWTAuthentication',     ],   }

Но мы же помним, что срок нашего access-токена всего-то 5 минут, так что пора бы приступить к обнулению к стадии обновления.

Обновление JWT-токенов

Вся серверная логика спряталась в классе CookieTokenRefreshView

class CookieTokenRefreshView(JWTAuthentication, TokenRefreshView):     """     Представление для обновления JWT-токенов (access и refresh) с использованием кук.      Это представление расширяет стандартный `TokenObtainPairView` из Django REST Framework Simple JWT.     После успешного обновления токенов -  access и refresh токены сохраняются в HTTP-only куки и удаляются     из тела ответа.      Примечание:     - Для работы с куками на клиенте необходимо настроить CORS с поддержкой credentials.     - Куки должны быть защищены флагами `HttpOnly`, `Secure` и `SameSite`.     """     @method_decorator(enforce_csrf)     def post(self, request: Request, *args, **kwargs) -> Response:         raw_refresh_token = request.COOKIES.get(settings.SIMPLE_JWT['REFRESH_COOKIE']) or None         raw_acces_token = request.COOKIES.get(settings.SIMPLE_JWT['AUTH_COOKIE']) or None         data = {'access': raw_acces_token, 'refresh': raw_refresh_token}          serializer = self.get_serializer(data=data)         try:             serializer.is_valid(raise_exception=True)         except TokenError as e:             raise InvalidToken(e.args[0])          response = Response(serializer.validated_data, status=status.HTTP_200_OK)                  access_token = response.data.get('access')         refresh_token = response.data.get('refresh')          if access_token and refresh_token:             response = set_jwt_cookies(response, access_token, refresh_token)                          del response.data['access']             del response.data['refresh']          return response

Предварительно проверяю csrf-токены, далее получаю из куки свои токены. После успешной валидации и обновления токенов — удаляю их из тела запроса и добавляю в куки с помощью ранее указанной функции set_jwt_cookies

На стороне React функция для обновления токенов выглядит так:

const logoutUser = () => {     setUserName(null);     localStorage.removeItem("username");     localStorage.removeItem("userStatus");     navigate("/login"); };  const refreshToken = async () => {     let csrfToken = await getCSRF()     try {         await fetch("/api/user/token/refresh/", {             method: 'POST',             credentials: 'include', // Включаем куки             headers: {                 "Content-Type": "application/json",                 'X-CSRFToken': csrfToken, // Добавляем CSRF-токен в заголовок             },         });     } catch (error) {         console.error('Error refreshing token:', error);         logoutUser();     } };

Для того, чтобы токен обновлялся каждые 5 минут и React дергал бы джанго в рамках этих интервалов — создал единый файл AuthContext.js на стороне фронта и добавил хук useEffect для периодического вызова

import { useState, useEffect } from "react";  useEffect(()=>{      const REFRESH_INTERVAL = 1000 * 60 * 4.9// Почти 5 минут, как и время жизни access токена         let interval = setInterval(()=>{             refreshToken()         }, REFRESH_INTERVAL)         return () => clearInterval(interval)      },[])

Выводы

Вот такая получилась кастомная реализация аутентификации пользователя через JWT токены, спрятанных в cookie. На мой взгляд, такой подход гораздо более безопасный, чем хранить эти токены в локальном хранилище, которые явно не предназначено для хранения конфендициальной информации

Буду рад критике и предложениям!