[Dev] 카카오 로그인 시 쿠키 저장 및 관리

[kyubumjang]

어떤 기능인가요?

카카오 로그인 후 토큰을 받은 후 관리합니다.

작업 상세 내용

• get access token API 호출
• httponly samesite 설정 후 cookie 사용하여 저장
• 쿠키에서 꺼내서 API 호출 시 Bearer Token 설정
• 로그인 여부를 token으로 판단하는 것으로 처리

참고할만한 자료(선택)

Authorization token을 저장할 때 보안성과 기능 구현의 적합성을 고려해야 합니다. 각 저장소의 특성과 장단점을 살펴보면 다음과 같습니다.

1. Cookie
   장점: HTTPOnly 및 Secure 플래그를 설정하면 JavaScript에서 접근할 수 없으므로 XSS 공격에 대한 저항력이 높습니다. SameSite 속성을 설정하여 CSRF 공격을 방지할 수 있습니다.
   단점: 서버 측에서 관리해야 하며, 클라이언트에서 직접 접근할 수 없습니다. 쿠키 크기 제한이 있어 큰 데이터를 저장하기 어렵습니다.
2. 전역 상태 관리 툴 (예: Redux, Justand 등)
   장점: 애플리케이션의 상태를 중앙에서 관리할 수 있어 상태 변경이 용이합니다.
   컴포넌트 간의 데이터 공유가 간편합니다.
   단점: 페이지 새로 고침 시 상태가 초기화되므로, 지속적인 저장이 필요합니다. XSS 공격에 취약할 수 있습니다.
3. localStorage
   장점: 클라이언트 측에서 쉽게 접근할 수 있으며, 데이터가 브라우저에 영구적으로 저장됩니다. 크기 제한이 상대적으로 큽니다.
   단점: XSS 공격에 취약하여, 악성 스크립트가 접근할 수 있습니다. 보안 설정이 없으므로, 민감한 정보를 저장하기에는 부적합합니다.
4. sessionStorage
   장점: 현재 세션 동안만 데이터를 저장하므로, 브라우저 탭을 닫으면 데이터가 사라집니다. localStorage보다 보안적으로 조금 더 안전할 수 있습니다.
   단점: 페이지 새로 고침 시에도 데이터가 유지되지만, 탭을 닫으면 사라지므로 지속적인 저장이 필요할 경우 불편합니다. XSS 공격에 취약합니다.

결론
가장 보안적으로 우수하고 기능 구현에 적합한 방법은 HTTPOnly 쿠키입니다. 쿠키에 Secure 및 SameSite 속성을 설정하면 XSS 및 CSRF 공격에 대한 저항력을 높일 수 있습니다.

전역 상태 관리 툴은 상태 관리에 유용하지만, 보안적인 측면에서는 쿠키에 비해 취약합니다. localStorage와 sessionStorage는 XSS 공격에 취약하므로 민감한 정보를 저장하는 데는 적합하지 않습니다.

따라서, 보안과 기능을 모두 고려할 때 HTTPOnly 쿠키를 사용하기로 결정했습니다.

https://blog.logrocket.com/javascript-developer-guide-browser-cookies/

https://blog.logrocket.com/guide-cookies-next-js/

https://www.mintmin.dev/blog/2403/20240316
https://www.mintmin.dev/blog/2403/20240331

https://www.npmjs.com/package/cookies-next

[kyubumjang]

#31