인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

초무님의 프로필 이미지

작성한 질문수

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[22-05] 로그인 토큰과 새로고침

accessToken 저장 방식에 대해 질문 드립니다.

해결된 질문

작성

·

65

0

zustand에 저장과 cookie 저장에 대해 보안적으로는 cookie가 더 안전하다고 들었습니다.

 

xss 공격에는 HttpOnly를 통해 해결할 수 있지만 반환된 accessToken을 js로 접근하지 못하다 보니 저장을 할 수 없는 문제가 있지만

secure을 통해 https에서만 요청가게 할 수 있으며, sameSite를 통해 csrf의 공격에 방어할 수 있다 해서

secure, sameSite를 사용해 accessToken을 쿠키에 저장하는게 더 좋은 방법이라 생각 했는데 어떤 방식을 주로 사용하나요?

답변 2

1

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 초무님!

정확히 알고 계십니다!
저같은 경우 상황에 따라 2가지 방법 모두 사용하는데요!,

 

최근에는 하이브리드앱을 구현함에 있어서 accessToken을 웹과 앱에서 공유하도록 처리하기 위해 accessToken을 변수로 담는 방법을 더 많이 사용중에 있답니다!

 

 

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. 초무 님.

AccessToken의 저장 방식에 대한 보안적 고려는 매우 중요합니다. 일반적으로 다음과 같은 두 가지 방법이 사용됩니다:

  1. 쿠키(Cookie)에 저장:

    • 장점: HttpOnly, Secure, SameSite 옵션을 사용하여 XSS 및 CSRF 공격을 예방할 수 있습니다.
    • 단점: 쿠키를 사용하면 서버 간 요청 간에 더욱 읽기 쉬운 상태로 토큰을 저장하는 것이기 때문에 관리가 좀 더 복잡할 수 있습니다.
  2. 클라이언트 상태 관리 툴(e.g., Zustand)에 저장:

    • 장점: 빠르고 간편하게 애플리케이션 상태를 관리할 수 있습니다.
    • 단점: 토큰이 클라이언트 쪽 자바스크립트 메모리에 저장되기 때문에, XSS 공격에 노출될 위험이 있습니다.

보안적 관점에서는 쿠키에 저장하는 것이 더 안전한 방법입니다. HttpOnly, Secure, SameSite와 같은 옵션을 적절히 설정하면, XSS와 CSRF에 대한 위험을 낮출 수 있기 때문입니다.

해당 주제에 대해 더 깊이 이해하고 싶으시면 비슷한 질문에 대한 답변을 참고하시면 좋을 것 같습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

초무님의 프로필 이미지

작성한 질문수

질문하기