32 4 React & Django 인증 심화 3 HTTP only 쿠키와 CSRF 보호로 보안 강화 | ✅ 편저: 코담 운영자

🛡️ React & Django 인증 심화 3_ HTTP-only 쿠키와 CSRF 보호로 보안 강화

이번 포스트에서는 React와 Django 애플리케이션의 보안을 한층 강화하기 위해 HTTP-only 쿠키 기반 인증과 CSRF 보호를 적용하는 방법을 설명합니다.

---

📌 개요

JWT 인증 방식은 편리하지만 로컬스토리지에 토큰을 저장하면 XSS 공격에 노출될 위험이 있습니다. 이를 보완하기 위해 HTTP-only 쿠키를 사용해 토큰을 저장하면 브라우저의 JavaScript에서 접근할 수 없어 보안이 향상됩니다.

또한 Django와 React 간의 요청에서 CSRF(Cross-Site Request Forgery) 공격을 방지하기 위한 설정도 함께 적용합니다.

---

🔑 10️⃣ Django에서 HTTP-only 쿠키 설정

📁 settings.py

CORS 설정 강화:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
]
CORS_ALLOW_CREDENTIALS = True

CSRF 설정 추가:

CSRF_TRUSTED_ORIGINS = ["http://localhost:5173"]

---

📁 views.py (커스텀 JWT 로그인 뷰)

Djoser 대신 Django REST Framework의 SimpleJWT를 직접 사용하여 로그인 시 토큰을 Set-Cookie 헤더로 반환하도록 합니다.

from rest_framework_simplejwt.views import TokenObtainPairView
from rest_framework_simplejwt.tokens import RefreshToken
from rest_framework.response import Response
from rest_framework import status

class CookieTokenObtainPairView(TokenObtainPairView):
    def post(self, request, *args, **kwargs):
        response = super().post(request, *args, **kwargs)
        if response.status_code == status.HTTP_200_OK:
            refresh_token = response.data['refresh']
            access_token = response.data['access']

            # HTTP-only 쿠키 설정
            response.set_cookie(
                key='refresh_token',
                value=refresh_token,
                httponly=True,
                secure=True,  # 프로덕션 환경에서는 반드시 True
                samesite='Lax',
                max_age=7*24*60*60  # 7일
            )
            del response.data['refresh']
        return response

📁 urls.py

from django.urls import path
from .views import CookieTokenObtainPairView

urlpatterns = [
    path('auth/jwt/create/', CookieTokenObtainPairView.as_view(), name='jwt-create'),
]

---

🔒 11️⃣ React에서 CSRF 토큰 처리

📁 api.js

Axios 요청 시 CSRF 토큰과 함께 쿠키를 전송하도록 설정합니다.

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:8000',
  withCredentials: true, // 쿠키 포함
});

api.interceptors.request.use((config) => {
  const csrfToken = getCookie('csrftoken');
  if (csrfToken) {
    config.headers['X-CSRFToken'] = csrfToken;
  }
  return config;
});

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

export default api;

---

🚨 주의사항

• HTTP-only 쿠키는 JavaScript에서 접근할 수 없으므로 React에서 토큰을 읽을 수 없습니다.
• 대신 백엔드가 쿠키를 보고 인증 상태를 확인합니다.

---

✅ 마무리

이번 포스트에서는 Django와 React 애플리케이션에 HTTP-only 쿠키 기반 인증과 CSRF 보호를 적용하여 보안을 강화했습니다. 이제 사용자의 토큰이 XSS 공격으로부터 보호되며, CSRF 방어도 함께 적용됩니다.

다음 포스트에서는 리프레시 토큰 자동 갱신 및 세션 만료 처리까지 다루어 더 완벽한 인증 흐름을 완성하겠습니다.