🍪 쿠키와 세션 (feat. 웹에서 로그인을 유지하는 원리)

⚠️ 이 글의 모든 예시는 '웹에서 로그인된 상태를 관리'하는 것에 초점을 맞추고 있다. 실제로 쿠키와 세션은 각자의 기능을 살려 로그인 외에도 다양한 상황에 응용될 수 있다. 

---

 

간단한 탄생 비화

...태초에 Http가 있었다. Http는 HTML과 같은 리소스를 교환할 수 있도록 설계된 프로토콜(규약)이며, 다양한 이점들 덕분에 지금까지도 주소창에 http://... 로 남아 활발하게 사용되고 있다.

쿠키와 세션은 그중에서도, http의 Stateless한 특성 때문에 만들어졌다. Stateless란, "상태"가 없음을 의미한다.

상태가 있고 없음이란 무엇일까? 아래 대화를 읽어보자!

 

🟢 Stateful 대화

A: 난 김xx 이야.
B: 넌 김xx이구나.
A: 난 10살이야.
B: 오호 넌 10살인 김xx이구나.

🟠 Stateless 대화1.. (B는 A의 이름을 기억하고 있을까?)

A: 난 김xx 이야.
B: 넌 김xx이구나.
A: 난 10살이야.
B: 넌 10살이구나.

🟠 Stateless 대화2

A: 난 김xx 이야.
B: 넌 김xx이구나.
A: 난 김xx이고 10살이야.
B: 오호 넌 10살인 김xx이구나.

 

핵심은 가장 마지막 내용만을 기억하는 것이 아니라, 이전 대화 내용을 기억하지 않는,

즉, 이전에 교환했던 정보의 상태를 알지 못한 채로 요청에 대해서 독립적으로 응답하는 점이다.

 

 

🤔이게 뭔상관일까?

로그인을 하면 게시판과 마이페이지를 사용할 수 있는 서비스가 있다고 생각해보자.

 

🟢 Stateful 서비스

로그인 -> 게시판 정상사용 -> 마이페이지 클릭 -> 마이페이지 정상사용

🟠 Stateless 서비스

로그인 -> 게시판 정상사용 -> 마이페이지 클릭 -> 다시 로그인 -> 마이페이지 정상사용

Stateless 서비스에서는 로그인을 했는지 기억하지 못한다. 로그인이 필요한 페이지에 접근할 때마다 로그인을 해야 하기때문에 너무 불편할것이다.

이를 해소하기 위해 Stateless http에서 상태를 관리하는 방법이 필요해졌다.

 

 

 

 

 

쿠키 Cookie

stackoverflow에서 많이 본 그것

Http의 규격을 확장하여 웹 애플리케이션과 웹브라우저 정보교환을 가능하게 하는 작은 데이터 조각으로, 저장할 수 있는 데이터의 크기는 4KB로 제한적이다. 쿠키는 key-value 쌍으로 구성되며 필요에 따라 Expires, Path, Domain 등 다양한 옵션을 가진다.

쿠키를 통해 사용자의 컴퓨터에 일시적으로 데이터를 기록하므로서 웹 애플리케이션과 서버 사이의 상태를 보존할 수 있다.

 

쿠키로 로그인 유지해보기

1) 사용자가 로그인을 요청Request한다.
2) 서버에서 사용자를 확인하면 set cookie를 포함한 응답Response을 전송한다. 로그인을 위한 비밀번호를 쿠키에 저장한다고 생각해보자.

Set-Cookie: pw=mydifficultpassword

3) 브라우저에서 쿠키가 set된 후, 로그인 정보가 필요한 리소스를 서버로 요청할 때 http 헤더에 비밀번호가 담긴 쿠키가 포함된 채 전달된다.

• 쿠키의 Domain, Path와 일치하는 site에서의 요청에만 쿠키가 헤더에 set되며, 다른 서버로는 보내지 않는다. 네이버 로그인했다고 구글 요청 헤더에 쿠키가 포함되진 않는다는 의미다.

4) 사용자는 한 번의 로그인만으로 웹사이트를 누비며 여러가지 컨텐츠를 즐길 수 있다. 컨텐츠를 요청할때마다 서버는 쿠키에 포함된 비밀번호를 확인하여 요청에 응답하기 때문이다.

5) 사용자가 로그아웃을 요청한다.
6) 서버는 로그아웃을 위해 쿠키를 삭제하며, 보통 쿠키의 만료일자expire date를 과거로 설정한다.

 

쿠키는 안전한가?

사실 위 예시처럼 비밀번호와 같은 중요한 정보를 쿠키에 저장하는 것은 보안상 큰 문제가 있다. 쿠키는 사용한 컴퓨터에도 파일로 남아있으며, 누구나 볼 수 있는 Http Request/Response 내용에 포함되기 때문이다.

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly

자바스크립트에서 쿠키에 접근하는 것을 막기 위해 HttpOnly, 네트워크상에서 쿠키가 암호화될 수 있도록 Secure postfix를 사용할 수도 있지만, 단순하고 기본적인 보안 방법이며 완벽하지 않다.

• HttpOnly: 자바스크립트를 경유해서 쿠키를 취득하지 못하도록 함
• Secure: 웹 페이지가 Https에서 열렸을 때 Https프로토콜을 통해 암호화 전송

쿠키는 사용자의 이전 선택 옵션 우선 표시 또는 이전에 방문했던 사용자인지 판별하는 등, 사용자 중심의 기능에 사용되는 경우가 많다.

 

 

 

 

 

 

세션 Session

세션이란 복수 개의 기기들이 네트워크를 통해 서로 통신하며 정보를 주고받는 일련의 처리 흐름을 의미한다. 내가 어떤 게임에 접속한 것 만으로도 '게임 서버와 세션이 연결되었다'고 표현할 수 있다.

세션은 쿠키의 문제점들을 보완하며, 정보 교환 과정의 안정성을 높이고 쿠키의 용량 제한 문제도 해결할 수 있다.

 

세션+쿠키로 로그인 유지해보기

1) 사용자가 로그인을 요청한다.
2) 서버에서 로그인 정보를 확인한 뒤, 사용자(웹 클라이언트) 식별을 위한 세션ID를 발행하며, 발행 정보를 저장한다. 세션ID는 응답Response 쿠키에 포함하며, 의미 없는 숫자 또는 문자열로 구성된다.

3) 이제 사용자는 서버로 보내는 요청에 세션ID가 담긴 쿠키를 전송하게 되고, 서버는 쿠키에서 ID를 꺼내어 메모리/데이터베이스를 참조하여 정상적인 사용자인지 판단, 요청에 응답한다.

 

최근의 탭형 브라우저는 같은 창의 다른 탭에서도 쿠키(세션)을 공유하기 때문에 새 탭을 열어봐도 로그인이 유지된다. 대신 다른 창을 켜거나 다른 브라우저에서는 세션이 유지되지 않으므로 다시, 혹은 다른 계정으로 로그인할 수 있다.

 

 

 

 

맺으며

나도 쿠키와 세션의 특징, 비교 내용에 대해 여러 블로그를 돌아다니며 읽어보고 정리(를 빙자한 복붙)하여 사용한 적도 있었지만, 이 글에서는 최근 웹 프로그래밍 기초 서적으로 추천받은 책들을 읽으며 머릿속에 자연스럽게 정리된 내용을 집중적으로 담았다. 앞으로는 책을 더 많이 읽어야지,,!

 

참고한 책들! (+ 글또 피드백)

• 웹을 지탱하는 기술
• 비전공자를 위한 이해할 수 있는 It지식
• 그림으로 배우는 http&network basic
• 프로가 되기 위한 웹기술 입문