쿠키, 세션, 스토리지

내가 만든 쿠키, 너를 위해 구웠지

늘 봐도 새롭고 헷갈리는 개념,

쿠키, 세션, 스토리지에 대해 알아보자.

일단 쿠키란 뭘까?

쿠키가 처음 등장한 배경을 살펴보자. 

1990년대 초반 즈음에 인터넷이 막 떠오르고, 인터넷으로 물건을 주문하기 시작하던 시절을 생각해보자. 여러 회사들이 웹사이트를 개발해서 사람들을 모으고, 점점 더 많은 사람들이 인터넷을 사용하게 된다. 

이때, 늘 그렇듯 사람이 많이 쓰고 빈번하게 쓰이면 쓰일 수록 불편함이 발생한다. 어떤 불편함이냐 하면, 유저가 장바구니에 담았던 물건이 웹페이지에 방문할때마다 초기화된다는 것이다. (단적인 예를 들자면)

웹브라우저에서 서버를 통해 데이터를 받을 때 http통신을 통해 데이터를 주고 받는데, 이것은 stateless하다. 이 말인즉슨, 새로운 브라우저를 켜서 사이트에 접속하고 http통신을 하면, 늘 새로운 상태라는 것이다. 무언가가 저장되지 않는다.

한참을 장바구니에 신나게 물건을 담았는데, 모르고 브라우저를 껐더니 내가 장바구니에 담았던 물건들이 모두 초기화된다. 사실 당연한 것이다. 지금도 로그인하지 않고 사이트를 방문하고 나면 거기에 내 기록의 흔적이 남지 않는다. 게다가 저 당시에는 로그인 개념도 없을 때이고, 브라우저도 이제 막 발달하기 시작한 때이니, 사람들은 어떻게 하면 정보를 저장할 수 있을까 고민을 했을 것이다.

즉, "유저를 기억하기를" 원했다. 그래서 서버에서 브라우저한테 "사용자를 기억할 수 있는 정보 조각"을 브라우저에 심어놓기로 했다. 그것이 바로 "쿠키"이다. (Netscape에서 처음 고안해냈다) 그럼 이 쿠키는 어디에서 굽냐 하면, http를 보내는 쪽에서 구워서 보내게 된다. 즉, http response를 보내는 서버쪽에서 "username=girin" 와 같은 텍스트가 포함된 쿠키(사실상 문자열)를 이 사람이 처음 접속했을 때 http response에 싣어서 보내고, 그걸 받은 브라우저는 cookie를 브라우저에 저장하게 되는 것이다. 그러면 다음에 이 유저가 똑같은 사이트에 접속했을 때, 이미 브라우저에 있던 쿠키가 자동으로 서버로 함께 전송되고, 서버는 "아, girin이구나" 라고 인식하는 것이다. 

브라우저 ───요청───> 서버
브라우저 <──응답(쿠키 포함)─── 서버

다음 방문 시:
브라우저 ───요청(쿠키 포함)───> 서버

이때 브라우저에 보낸 정보 조각이 쿠키, 서버쪽에 저장한 데이터가 일종의 세션 데이터라고 볼 수 있다. 

1차원적인 쿠키의 문제점을 보완한

SessionId 

하지만 이 쿠키는 보안상 취약한 문제가 있었다. 누군가가 쿠키를 조작해서 서버쪽에 다른 쿠키를 보낼 수도 있었다. 또 민감한 정보를 보낼 경우에는 악용할 여지가 있었다. 

그래서 다시 생각해낸게 "서버쪽에서 sessionId를 발급해서 주자" 라는 것이었다. 그러니깐 서버에 원래 "username=girin"이라고 저장하던걸 다음과 같이 객체로 저장한 후, sessionId를 발급해서 서버쪽에 저장해놓자는 것이다. 

서버 측 세션 저장소:
{
  "8f0b5db5-43a9-4dc3-9584-5b91b9bdf55a": {
    "user_id": 12345,
    "username": "john_doe",
    "login_time": "2023-09-04T10:30:00Z",
    "permissions": ["read", "write"],
    ...
  }
}

서버에서 쿠키를 다시 구워서 보내되, "8f0b5db5-43a9-4dc3-9584-5b91b9bdf55a" 이것만 쿠키에 싣어 보내는거다. 그리고 브라우저가 저 ID를 보내오면, 서버 쪽 세션 저장소에서 ID를 검색해서 다른 정보들을 검색할 수 있는 것이다. 

username 등 민감한 정보를 보내지 않으니 보안상 안전하지만, 서버쪽에서 세션ID를 별도로 관리해야 한다는 장단점이 있다.

스토리지는

말그대로, 브라우저의 저장공간

자, 그럼 스토리지는 뭐냐 하면, 말 그대로 브라우저에 저장할 수 있는 저장공간을 이야기한다. 2가지가 있는데 세션 스토리지와 로컬 스토리지이다. 어려울 것 없다. 브라우저를 꺼도 남아있냐, 끄면 휘발되느냐의 차이로 나뉜다. 

쿠키와 크게 다른 점이라고 한다면, 쿠키는 클라이언트 측에서도 접근 가능하고 서버측에서도 접근 가능하다면, 웹 스토리지는 클라이언트쪽에서만 접근 가능하다는 점이다. 그리고 스토리지의 용량이 쿠키보다 훨씬 크다. 

브라우저 개발자모드 > Application 탭에 들어가보면, 현재 브라우저에 저장된 Local storage, Session storage, Cookie들을 모두 확인해볼 수 있다.