(React) 카카오 로그인 - 1

카카오로그인

예전에 개인 프로젝트를 하면서 firebase로 일반 로그인과 구글 로그인을 구현한 적이 있었는데,

카카오 로그인은 안 해봐서 이 부분을 내가 맡아보겠다고 했다.

 

처음에 내가 해야 할 일은 아래 이미지에서 step1. 까지, 카카오에서  인가 코드를 받고 백에다가 그 인가 코드를 넘겨주는 것이라 생각했다. 하지만 백엔드분과 프론트엔드의 다른 분과 회의를 했을 때 step2. 토큰까지 받아서 그 토큰을 백에다가 넘겨주는 것까지 해야 한다고 하셔서 일단 하기는 함. 보안을 강화해야 할 카카오 액세스토큰과 리프레쉬토큰을 프론트에서 다룬다? 조금 의아하긴 하지만 뭔가 백에서도 자체 로그인할때 액세스토큰과 리프레쉬토큰을 프론트에 넘겨주고 그것을 프론트에서 관리해야하니까 맞는것 같기도.. 그래서 이부분은 멘토님께 여쭤보니 상용화 할때는 문제가 되지만 포폴용으로는 여기까지 해봤다고 할 수 있기 때문에 프론트에서 여기까지 하는 것도 나쁘지 않겠다 하셔서 그냥 고. (대신 보안을 어떻게 할 지도 생각하라고 하셨음.)

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api 참고

 

 

 

🔐 그렇다면 AccessToken과 RefreshToken을 어디에 저장하는 게 안전할까?

 🛡️ Access Token 보안

• 로컬 변수에 저장 : Access Token을 프론트에서 로컬 변수에 저장 후 로컬 스토리지에 저장. 브라우저의 쿠키와 달리 스크립트에서 직접 접근할 수 없으므로 XSS 공격에 대응할 수 있다.
• 하지만 완전히 방어하는 것은 아니므로 Access Token의 만료시간을 짧게 설정함으로써 XSS 공격에 대한 추가적인 대응 가능. 만료 시간이 짧으면 토큰이 탈취될 경우 토큰이 자동으로 만료되어 공격자의 악의적인 활동을 제한할 수 있기 때문.

 🛡️ Refresh Token 보안

• HTTP Only와 Secure 속성을 가진 쿠키에 저장. 스크립트를 통한 접근 방지 가능.
• Refresh Token은 쿠키에 저장되어 있어 CSRF 공격에 대응가능. 공격자가 쿠키에 접근할 수 없기 때문에 인증되지 않은 요청을 보내는 것이 불가능하기 때문 

 

XSS 공격 : 공격자가 제작한 악성 스크립트를 웹 페이지에 삽입하여 사용자 브라우저에서 실행되게 하는 공격

CSRF 공격 : 사용자가 자신의 의지와 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 공격

 

Kakao Developers

 

 

프론트 엔드에서 JWT: AccessToken, RefreshToken 다루기

 

JWT의 Refresh Token과 Access Token은 어디에 저장해야 할까?