1. 쿠키 기반 로그인 (세션)

가장~~많이 사용됨.

서버가 세션 ID 생성 후 쿠키에 담음→브라우저에 저장. 모든 HTTP 요청 시에 브라우저가 자동으로 HTTP 헤더에 포함시켜서 서버로 전송.

httpOnly로 설정 안하면 접근이 가능하니 보안 유의

프론트는 뭐해요? 사실 할거 없음. httpOnly만 잘 설정해주자

  • 쿠키 받아서 저장. 헤더에 자동으로 포함시켜서 서버에 보내기.

2. 토큰 기반 로그인

최근 많이 이용함. 로그인 성공하면 Access Token 발급하고 클라이언트는 토큰 저장했다가 요청마다 포함시켜 전송. JWT는 토큰 자체에 서명이랑 정보를 담아서 서버가 상태를 저장해두지 않아도 인증 가능 . 즉, 토큰만 유효한거 판단하면 딱히 기록을 뒤지거나 유저 상태를 보지 않아도 됨.

프론트 역할: 로컬이나 세션 스토리지 or 쿠키( httpOnly, Secure)

  • 액세스 토큰(리프레시 토큰)을 안전한 곳에 저장해둬야 함. 또는 쿠키에다가…
  • 근데 JWT의 payload는 누구나 디코딩할 수 있으므로 비밀번호 이런거는 안되고 이름이나 닉네임, 이메일 정도? 그리고 너무 토큰 크기가 너무 커지면 안되니까 정보 적당히 담기.
  • 주로 Autorization 헤더에 Bearer 토큰 형식으로 저장해서 서버로 전송. 아니면 인터셉트해서 전송.
  • 토큰 관리는요? 액세스토큰: 보안위해서 짧게. 만료됐으면 리프레시 토큰으로 액세스 토큰요청. 리프레스도 빠이빠이 하면 다시 로그인.
  • 로그아웃은 토큰을 클라이언트에서 측에서 삭제.

JWT+cookie

xss로부터 막으려면(접근 못하게) httpOnly로 설정했다. 이러면 자동으로 전송하고 samesite로 다른 출처에서 발생한 쿠키도 제어할 수있음. Secure로 https 연결 강제 해서 토큰 탈취도 방지할 수 있다.

근데 프론트엔드는 JWT에 쿠키가 담겨있어서 이름을 꺼낼수가 없음. 이런 경우, 응답 본문에 사용자 정보를 담아주던지 별도 API엔드포인트를 가져오면 된다.

이럴때 쿠키 접근이 불가능하니 로그아웃은 서버측에서 해야한다. 쿠키를 만료시키거나 무효화해함. 그리고 로그인 여부도 API호출 결과로 관리해야 한다.

왜 그때는 못했을까

결국 이전에 cookie+JWT로 최강 보안 + 상태 없는 걸 구현하려고 했으나… 백엔드에서 로그인 정보를 안주고 담아서 줬기에 사용자 정보를 payload로는 절대 얻을 수 없는 거였다 ㅜㅜ 차라리 할거면 body로 주고 상태로 관리해서 저장하거나 세션/로컬 스토리지에 저장해놔야 했었다.(물론 민감한거 담으면 안되지만)

즉 알고 쓰자 ^^