Planify - Spring Boot + React를 활용한 JWT, Security 진행순서

🚩진행순서

1. 로그인 요청
   › 사용자가 React에서 로그인 정보를 입력하여 Spring Boot로 전송
   › Spring Security가 요청을 가로채고 입력받은 사용자 정보를 AuthenticationManager로 전달.
   › 인증 성공 시, 사용자 정보를 기반으로 JWT를 생성하여 React에 반환
   › 생성된 JWT는 HTTP-only 쿠키에 저장하도록 서버에서 설정
2. JWT 저장 및 요청
   › React는 JWT를 직접 다루지 않고, 브라우저가 HTTP-only 쿠키에 저장된 JWT를 자동으로 관리
   › 이후 모든 API 요청 시, JWT가 쿠키를 통해 자동으로 서버로 전달됨
3. Spring Security와 JWT 검증
   › Spring Security는 들어온 요청의 쿠키에서 JWT를 추출
   › 필터(JwtFilter)를 통해 토큰의 유효성을 검증
   › JWT가 유효하다면, 사용자 정보를 SecurityContext에 저장하여 인증된 상태로 처리
4. 보호된 리소스 접근
   › 인증된 사용자는 Spring Security가 보호하는 URL에 접근 가능
   › Spring Security는 사용자 권한에 따라 접근을 허용하거나 차단
5. 로그아웃 처리
   › 사용자가 React에서 로그아웃 요청 시, JWT를 삭제하여 인증 상태를 초기화
   › 필요 시 서버로 로그아웃 요청을 보내 세션을 무효화하거나 토큰 블랙리스트를 사용

 

JWT를 저장할 때 sessionStorage? localStorage? 쿠키?

JWT는 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰
JWT 정보를 request에 담아 사용자의 정보 조회, 수정 등의 작업을 수행할 수 있다.

이전 프로젝트에서는 보안 문제는 아예 생각 조차 못했는데... 이번에는 좀 더 깊이 생각해서 코드를 짜보고 싶다.

XSS(Crose Site Scripting), CSRF(Cross Site Request Forgery)
XSS는 악의적인 사용자가 악성 스크립트 삽입해서 사용자 브라우저에서 실행되도록 공격 기법
CSRF는 정상적인 request를 가로채 사용자의 의지와 무관하게 백엔드 서버에 변조된 request를 보내 악의적인 동작을 수행하는 공격 기법

쿠키에 저장하는 걸로, sessionStorage는 탭을 닫으면 정보가 사라져서 만드려는 사이트에 적합하지 않고, localStorage보다 쿠키가 나중에 확장한느 것까지 생각하면 적합하다고 판단 HTTP-only 쿠키는 javaScript로 접근할 수 없어 XSS 공격에 안전하며, 요청 시 쿠키가 자동으로 서버에 전달되므로, 클라이언트 코드가 간결해지고, 쿠키를 통해 세션과 비슷한 경험을 제공하되, 서버 상태를 저장하지 않아 확장성이 높음!

---

 

으아.. 처음보는 부분이 많아서 오래걸리다ㅠ
면접도 준비하느라 시간이 너무 부족하네ㅠ 이거.. 천천히 가도 되는건가.. 미쳐버리겠네

그래도 시간이 걸려도 꼼꼼하게 해야지..