티스토리 뷰
최근 로그인 구현 로직을 짜면서 Cookie, Session, Token에 대한 지식이 없어서 고생을 좀 했다.
세 가지 개념을 정리해보고 어떤 역할과 장단점이 있는지 정리해보았다.
쿠키(cookie)
쿠키는 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 데이터를 저장해 두었다가 동일한 서버에 재요청되었을 때 저장된 데이터를 함께 전송한다. 쿠키는 두 요청에 대해서 동일한 브라우저에서 들어온 요청인지 판단할 때 주로 사용한다.
장점
- 사용자의 브라우저에 저장되기 때문에 서버에 부하가 들지 않는다.
단점
- 개인정보를 담고 있기 때문에 사생활 문제가 있을 수 있고, 웹 브라우저 자체의 쿠키 거부 기능이 활성화되어있다면 쿠키 자체를 사용하기 힘들다.
- 클라이언트에 저장되어있기 때문에 쿠키로만 인증을 할 경우 중간에 정보를 탈취당할 수 있다.
쿠키에는 직접적인 사용자 정보를 저장하지 않고, 다음과 같은 경우에 많이 사용된다.
- 세션 관리
- 개인화 (personalization)
- 트래킹
세션(Session)
일전동안 사용자의 모든 요청을 하나의 상태로 보고, 상태를 일정 시간 유지시키는 기술이다.
일정 시간 동안이라는 것은 세션이 시작되고 웹 브라우저가 종료될 때까지의 시간을 말한다.
세션은 쿠키와 달리 서버에 데이터를 저장하고, 세션 id 값을 클라이언트로 넘겨준다.
브라우저에서는 필요에 따라 세션 id를 활용하여 서버에 저장된 데이터를 사용한다.
장점
- 쿠키에 비해 보안성이 좋다.
- 개수나 용량에 제한이 없음
단점
- 서버와의 통신을 하기 때문에 상대적을
- 서버에 데이터가 저장된다면 세션의 개수가 늘어나면 서버 쪽 부하가 걸리게 된다
세션 / 쿠키 통신방식
- 사용자가 인증을 시도한다.
- 서버에서 인증 정보를 확인하고, 인증 결과를 세션 정보에 저장한다. 세션정보를 가리키는 Id를 쿠키에 저장한다.
- 클라이언트 브라우저에서는 전달받은 세션의 id 값을 쿠키에 저장하고, 이후 인증이 필요할 때 쿠키를 헤더에 포함시켜 전달한다.
- 서버는 쿠키에 포함되어있는 id 값을 통해 세션의 정보를 찾는다.
- 인증이 완료되고, 사용자에게 정보를 전달한다.
Token (JWT)
JWT(JSON Web Token)은 인증에 필요한 정보를 암호화시킨 토큰을 말한다. 인증을 과정이 끝나면 사용자에게 암호화된 토큰을 발행해주고 이 토큰을 활용하여 인증 여부를 검증받는다.
위 쿠키/세션 방식과 동일하게 이후 요청에 토큰 정보를 같이 보내 서버에서 인증 여부를 확인한다.
Token은 제한 시간이 있어, 일정 시간이 지나면 만료되고, 만료되었을 때는 다시 생성해야 한다.
장점
- 쿠키 / 세션과 달리 별도의 저장소를 필요로 하지 않는다. 서버는 전달받은 토큰에 대해서 정합성만 판단하여 토큰 값에 관련된 데이터만 전달해주면 된다.
- JWT구조에 signature이 포함되어있기 때문에 정보 교환에 있어서 중간 정보 조작 여부를 감지할 수 있다.
- 확장성이 뛰어나다. SNS로 로그인하기와 같은 기능을 사용하게 해주는 OAuth 도 토큰 기반 인증방법이다.
단점
- 현재 발급된 JWT의 경우 유효기간이 끝나기 전까지는 계속 사용할 수 있다. 쿠키와 달리 임의 삭제가 불가능하기 때문에 토큰 유효기간을 짧게 설정하여 여러번 발급하는 방식으로 단점을 보완할 필요가 있다.
## Reference
'지나가는 개념 정리' 카테고리의 다른 글
Content-Type (0) | 2022.05.09 |
---|---|
Generator 함수 (0) | 2022.04.29 |
HTTP의 Stateless / Connectionless (2) | 2022.03.23 |
OAuth (0) | 2022.03.18 |
Lazy Loading 이란? (0) | 2022.03.15 |
- Total
- Today
- Yesterday
- Transpiler
- 백준
- SOAP API
- programmers
- Vue
- AxiosInterceptor
- 프로그래머스
- redux-thunk
- Vue.js
- bundler
- 문제풀이
- TypeScript
- Repository Pattern
- clean code
- React
- Preloading
- error
- redux
- python
- SPA
- reactrouter
- React.memo
- GraphQL
- 파이썬
- 상호평가
- 알고리즘
- Vuex
- webpack
- v-for
- js
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |