HTTP의 특징과 쿠키와 세션을 사용하는 이유
쿠키와 세션을 사용하게 된 이유는 HTTP 프로토콜의 특징이자 약점을 보완하기 위해 사용합니다. 우선 HTTP 프로토콜의 특징에 대해 알아보겠습니다.
HTTP 프로토콜
HTTP는 TCP 기반으로 데이터를 주고 받는데 사용되는 프로토콜입니다. HTTP는 클라이언트와 서버 간에 데이터를 전송하고, 웹 페이지, 이미지, 동영상 같은 여러 가지 리소스를 요청하고 전송하는 역할을 합니다.
HTTP 프로토콜은 몇 가지 특징이 있는데, 그 중 Connectionless와 Stateless에 대해 살펴보겠습니다.
1. Connectionless 프로토콜
클라이언트가 서버에 요청했을 때 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리방식입니다.
- HTTP 1.1버전에서 커넥션을 계속 유지하고, 요청에 재활용하는 기능이 추가되었습니다. HTTP Header에 keep-alive 옵션을 주어 커넥션을 재활용할 수 있습니다.(keep-alive 옵션은 default 옵션입니다.)
개인적으로 궁금했던 점
Q: HTTP 프로토콜은 TCP 기반 통신이다. TCP는 연결형 통신인데 HTTP 프로토콜은 왜 Connectionless 한걸까?
A: TCP 통신이 연결형 통신인 이유는 3-way handshake를 하기 때문이다. 3-way handshake는 연결을 설정하기 위해 신뢰성 있는 통신을 위한 초기 단계이다. 이 과정에서 클라이언트가 서버에 연결을 요청하고, 서버가 수락하는 과정을 거쳐 연결이 확립된다. 이를 통해 HTTP 프로토콜이 데이터를 주고 받을 준비를 마친다. HTTP는 요청을 보내고 응답을 받으면 연결을 유지하지 않기 때문에 TCP 기반임에도 Connectionless 합니다.
2. Stateless 프로토콜
커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있습니다. 클라이언트와 첫 번째 통신에서 데이터를 주고 받았다고 해도 두 번째 통신에서 이전 데이터를 유지하지 않습니다.
정보가 유지되지 않으니, 매번 페이지를 이동할 때마다 로그인을 해야 하거나 상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없는 상황이 발생합니다.
따라서 이러한 특징을 보완하기 위해 쿠키와 세션을 사용하게 되었습니다. 쿠키와 세션의 가장 큰 차이점은 상태 정보의 저장 위치입니다.
쿠키는 클라이언트에 저장하고 세션은 서버에 저장합니다.
쿠키
쿠키는 클라이언트에서 저장하고 관리하는 데이터들이고, 만료 날짜를 설정한다면 브라우저를 닫아도 데이터를 유지할 수 있습니다. 서버에서 Set-Cookie를 응답 헤더로 내려주면 클라이언트는 이를 받아 저장합니다. 쿠키의 취약점은 XSS(Cross-Site-Script) 공격을 당할 수 있는 것입니다. 보안에 취약하기 때문에 중요한 개인 정보를 저장할 수 없습니다.
동작 순서
1. 클라이언트가 페이지를 요청
2. 서버가 쿠키 생성
3. 생성한 쿠키 정보를 응답 Header에 담아 내려준다.
4. 클라이언트는 받은 쿠키를 서버에 요청할때 요청 Header에 담아 보낸다.
- 사용 예시)
- 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
- 팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크
세션
세션도 쿠키처럼 클라이언트와 서버 간의 통신에서 사용자의 상태를 유지하는 데 사용됩니다. 쿠키는 클라이언트에서 저장하고 관리되는 반면, 서버는 클라이언트에게 session ID를 응답 Header를 통해 내려주고 실제 세션 정보는 서버측에 저장됩니다. 세션은 서버에 저장되기 때문에 과도한 세션 사용은 서버 부하를 초래할 수 있습니다. 이런 문제 때문에 최근엔 사용자 인증 문제를 JWT 토큰을 많이 사용하기도 합니다.
동작 순서
1. 클라이언트가 페이지 요청
2. 서버는 요청 Header의 Cookie를 확인하여 Session-ID를 보냈는지 확인
3. Session-ID가 존재하지 않는다면 Session-ID를 새로 생성하여 응답 내려준다.
4. 클라이언트는 받은 id를 쿠키에 저장하고 요청시 요청 Header에 담아 요청
5. 서버는 요청 Header를 통해 Session-ID를 확인하고 응답 처리
- 사용 예시)
- 화면 전환시 로그인 유지(유저가 로그아웃 하기 전까지)
웹 스토리지
웹 스토리지는 브라우저 내에서 데이터를 저장하고 관리할 수 있는 저장 공간으로 로컬 스토리지와 세션 스토리지가 있습니다. 쿠키는 약 4KB까지 저장 공간을 이용할 수 있지만 웹 스토리지는 약 5MB까지 저장 가능합니다. 또, 쿠키는 데이터를 String으로 관리되기 때문에 데이터를 사용하려면 따로 라이브러리를 사용하거나 직접 구현을 해야 하는 반면, 웹 스토리지는 key, value로 관리되고 getItem, setItem을 통해 쉽게 접근 가능합니다.
로컬 스토리지
로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지됩니다. 브라우저 자체에 반영구적으로 데이터가 유지되지만 도메인이 다른 경우에는 로컬 스토리지에 접근할 수 없습니다.
세션 스토리지
세션 스토리지는 각 세션마다 데이터가 개별적으로 저장됩니다. 예를 들어, 브라우저에서 여러 개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장됩니다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되고, 같은 도메인이더라도 다른 세션이라면 데이터에 접근할 수 없습니다.
면접 관련 질문
-
쿠키와 세션에 대해 설명해주세요.
쿠키와 세션은 HTTP 프로토콜의 단점을 보완하기 위해 사용합니다. 쿠키는 클라이언트에 저장되고 만료 날짜를 설정한다면 브라우저가 종료돼도 데이터가 유지됩니다. 서버에서 쿠키를 만들어 응답 헤더에 Set Cookie로 내려주면 클라이언트는 이를 저장합니다. 쿠키의 단점은 XSS 공격에 취약하여 개인 정보를 저장할 수 없습니다. 반면에 세션은 정보가 서버측에 저장되기 때문에 인증 정보를 저장할 수 있습니다. 서버는 클라이언트에게 세션 id를 응답 헤더에 담아 내려주고 클라이언트는 세션 id를 쿠키에 저장하고 요청할때 요청 헤더에 담아 요청합니다. 세션 정보가 서버에 있다보니 사용자가 과도할 경우 서버에 부하가 있을 수 있습니다. -
웹 스토리지에 대해 설명해주세요.
웹 스토리지는 브라우저 내에서 데이터를 저장하고 관리할 수 있는 저장 공간으로 로컬 스토리지와 세션 스토리지가 있습니다.
로컬 스토리지는 브라우저에 데이터가 반영구적으로 저장되며 브라우저를 종료해도 데이터가 유지됩니다. 또, 도메인이 같을 경우에만 로컬 스토리지에 접근할 수 있습니다.
반면 세션 스토리지는 각 세션별로 데이터가 개별적으로 저장됩니다. 세션 스토리지는 세션이 종료되면 데이터가 제거되고, 같은 도메인이더라도 다른 세션이라면 데이터에 접근할 수 없습니다.
