프론트와 백엔드 로그인 유지시키기 (feat. react, django)

현재 부트캠프 과정 중이며, Django로 백엔드를 담당하고 있다. 이번 프로젝트는 두 번째로 진행하는 프로젝트인데, 첫 번째 프로젝트에서는 Django의 Set-Cookie를 사용해 쿠키를 설정했었다. 하지만 문제가 발생했다. 페이지를 이동할 때마다 쿠키가 사라져 버려서, 결국 프론트엔드에서 세션 스토리지에 access tokenrefresh token을 저장하여 로그인 상태를 유지하는 방식으로 해결했다.

첫 번째 프로젝트의 로그인 유지 방식:

  1. 백엔드에서 유저가 로그인하면 access tokenrefresh token을 발급.
  2. 이 토큰을 프론트엔드의 세션 스토리지에 저장.
  3. 프론트엔드에서는 각 요청마다 access token을 Authorization 헤더에 담아 전송.
  4. access token이 만료되면, 저장된 refresh token을 사용해 새로운 access token을 받아오는 방식으로 세션을 유지.

문제점:
웹 스토리지에 토큰을 저장하면 보안 취약점이 발생할 수 있다. 예를 들어, XSS(Cross-Site Scripting) 공격에 노출될 위험이 있다. 그래서 이번 프로젝트에서는 이러한 문제를 해결하기 위해, 웹 스토리지에 토큰을 저장하지 않고 쿠키를 통해 로그인 상태를 유지하는 방법을 시도하고자 한다.

두 번째 프로젝트 목표:
이번 프로젝트에서는 JWT 토큰을 쿠키에 저장해서 로그인 상태를 유지하려고 한다. 하지만 아직 백엔드에서 쿠키를 어떻게 다루어야 할지 확실히 알지 못해 고민이 된다. 특히 쿠키의 지속성을 보장하고, 페이지를 이동해도 로그인 상태가 유지되게 하는 것이 중요하다.

현재 구조:

  1. 프론트엔드와 백엔드를 하나의 도메인으로 통합하여 설정했다.
  • www.domain.com: 프론트엔드
  • api.domain.com: 백엔드
  1. AWS Route 53에서 도메인을 설정했고, CORS 문제를 피하기 위해서 도메인을 이렇게 나누었다. 이제 쿠키가 서로 다른 서브 도메인 간에도 작동하도록 SameSite 속성을 적절히 설정하는 것이 필요하다.

해야 할 일:

  1. 백엔드에서 쿠키 설정하기: Django에서 Set-Cookie를 사용할 때, HttpOnly, Secure, SameSite 속성을 적절히 설정해서 쿠키가 보안적으로 안전하면서도 다른 페이지로 이동해도 유지되도록 해야 한다.
  2. 프론트엔드와의 통신: 프론트엔드에서는 쿠키에 있는 JWT 토큰을 이용해 요청을 보낼 때 자동으로 포함되도록 해야 한다. 이를 위해 Axios 등의 라이브러리에서 withCredentials 옵션을 사용해야 할 수 있다.
  3. 리프레시 토큰 전략: access token의 유효기간이 짧기 때문에, 백엔드에서 refresh token을 활용해 새로운 access token을 자동으로 발급하는 로직이 필요하다.


게시됨

카테고리

작성자

태그:

댓글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다