본문 바로가기
WEB

쿠키/세션, 웹 스토리지 그리고 토큰

by 일태찡 2023. 4. 24.

 

등장 배경과 사용 이유

 

데이터를 주고받는 약속, HTTP 프로토콜의 특성 때문에 등장하게 되었습니다.

그 두 특성을 먼저 이해하고 넘어가 봅시다.

 

비연결성(connectionless)

 

초고~~ 급 식당, 오마카세가 아닌 이상 테이블 별로 개인 담당 서버가 있지 않고 주문을 받고 해결하는 흐름일 것입니다. 이는 서버가 최소한의 자원으로 일을 해결하기 위함입니다. 주문이 들어오면 서버는 응답을 보내고 연결을 끊습니다. 즉, 이 고객과 서버는 항상 연결되고 유지되는 것이 아닙니다.

 

반대로 연결 지향(connection oriented)은 담당 서버가 있고 주문을 하지 않아도 계속 물 부족하면 따라주고 냅킨 챙겨주고 음식 맛 괜찮냐 물어보고 그러겠죠? 그래서 서버의 자원을 계속 소모하고 있는 것입니다.

 

무상태성(stateless)

 

무상태성이란 서버가 클라이언트의 상태를 기억하지 않는 것을 의미합니다. 이 서버는 외국인이고 대화가 통하지 않습니다. 클라이언트가 아무리 뭐 달라~ 해줘라~ 해도 모르겠죠? 그것과 비슷한 맥락입니다. 그러기에 메뉴판에 주문할 내용을 정확히 명시해서 전달해줘야 하고 이는 불편할 것입니다.

 

하지만 서버가 외국인이든 외계인이든 주문하면 서버는 그 내용을 받고 해결하기만 하면 되는 것입니다. 그러기에 서버의 확장이 편합니다. 또 서버 하나가 망가져도 다른 서버가 해결하기도 쉽습니다.

 


 

이 까다롭고 어려운 서버를 위해 클라이언트 쪽에서 어느 정도의 정보를 저장하고 넘겨주어야 한다는 가닥은 잡히실 겁니다. 이 개념에서 바로 쿠키와 세션이 등장했으며 이 둘을 알아봅시다.

 

 

쿠키(Cookie)와 세션(Session)

 

쿠키(Cookie)

 

쿠키는 일반적으로 클라이언트가 오면 웰컴 쿠키를 주고 간직하고 있으라 합니다. 클라이언트는 이 쿠키를 다음 주문 때 들이밀며 자신을 인증받습니다. 또 클라이언트는 이 쿠키를 소중히 생각하고 있기에 브라우저가 종료되어도 조용히... 간직하고 있습니다. 로그인을 할 때 로그인 정보를 저장하면 다음에 그 사이트에 들어가면 자동으로 로그인이 되는데 그때 모르셨지만 주머니에 쿠키가 들어있었습니다. 이 쿠키는 클라이언트당 300개까지 가지고 있을 수 있으며 식당 별로 20개, 쿠키하나의 토핑은 4kb까지 가능합니다. 정확한 용어로는 도메인 별로 20개, 제한 용량은 4kb입니다.

 

이 쿠키의 토핑, 즉 구성 요소로는 쿠키의 이름과 성분이 먼저 있겠죠. 즉 데이터의 이름과 값이 들어있습니다. 또 유통기한이 있습니다. 요즘은 소비기한으로 바뀌고 있는 추세라던데 아무튼 쿠키의 유효기간이 존재하고 쿠키를 나눠준 식당, 도메인 그리고 경로가 존재합니다.

 

 

세션(Session)

 

지금까지 비교개념과 다르게 세션이니 학교에 개념에 빗대어 보겠습니다. 클라이언트가 도착하면 서버 선생님은 출석부를 확인하고 ID를 클라이언트에게 줍니다. 이 클라이언트 학생은 받은 ID를 쿠키에 새깁니다. 일단 학생의 정보, 즉 데이터가 서버 쪽에서 관리되고 있습니다. 그렇기에 이제 서버 선생님은 클라이언트 학생의 요청을 확인할 때 세션 ID만 확인하면 되는 것입니다. 그리고 이 세션 ID를 담는 쿠키는 너무 커서 주머니에 가지고 다닐 수 없습니다. 브라우저가 종료되면 데이터가 날아가는 개념을 표현해 봤습니다^^. 

 

 


 

이렇게 일반적으로 이용되던 클라이언트(브라우저)의 정보를 저장하는 두 가지를 알아봤습니다. 두 방법은 동작원리도 비슷하고 결국 쿠키를 이용해 데이터를 저장합니다. 하지만 그냥 쿠키에 정보가 담겨있냐 ID가 담겨있냐 생각해 보면 보안이 어디가 취약한 지 뻔하게 알 수 있겠죠? 그럼 왜 다 세션 쓰지 쿠키 왜 있냐? 하시겠지만 서버 선생님 학생기록부가 무한이 아니고 또 ID를 확인하는 절차도 필요합니다. 즉 이렇게 보안과 속도에서의 서로의 강점이 있으며 그에 알맞게 활용하면 되는 것입니다.

 

더보기

쿠키(Cookie)와 브라우저 캐시(Browser Cache)

 

둘 다 요청에 대한 서버의 응답을 저장하는 것은 같은 개념이지만 그 목적에서 다릅니다. 쿠키는 빠른 유저 검증을 통한 자동 로그인 등 사용자의 편의성을 위한 저장소라면 캐시는 반복적으로 요청하는 데이터를 저장해 이용할 시 서버에 요청하지 않고 바로 꺼내 사용해 서버의 부담을 줄이기 위한 목적이 큽니다.

 

웹 스토리지

 

 

웹 스토리지(Web Storage)는 HTML5부터 추가되었으며 지금까지 저장했던 데이터를 저장했던 쿠키를 대체하기 위한 저장소입니다. 이 저장소는 '키-값' 쌍으로 데이터가 저장되며 쿠키보다 더 많은 용량을 저장할 수 있고(모바일은 2.5MB, 데스크톱은 5~10MB) 쿠키와 다르게 상하지 않아 완전히 영구적으로 저장이 가능합니다. 또 쿠키는 클라이언트가 원하든 않든 관계없이 요청을 보낼 때 자동으로 담겨 위험할 수 있는데 이 웹스토리지는 그걸 방지할 수 있습니다. 또 도메인뿐만 아니라 프로토콜, 포트까지 접근 범위를 좁혀 CSRF(Cross Site Request Forgery) 취약점을 해결합니다. CSRF란 대충 위의 예시들과 비교하자면 식당에서 악의적으로 다른 사람이 테이블 번호를 속이고 내 주문을 무진장 때려버리는 것입니다. "식당-테이블번호-사람"(도메인-프로토콜-포트)까지 확인하니 이런 취약점은 방지할 수 있겠죠? 마지막으로 이 저장소에 저장하려면 문자열이어야 합니다. 이 정도로 하고 웹스토리지의 두 가지를 알아보겠습니다.

 

더보기

XSS와 CSRF

 

XSS라 불리는 크로스 사이트 스크립팅(Cross Site Scripting)은 이메일에 첨부된 링크를 클릭하거나 게시글을 열어보는 방법들을 통해 악성 코드가 삽입된 웹페이지를 보게 함으로써 공격을 하는 기법입니다. 위의 예시와 비교하자면 가짜 메뉴판을 들이밀며 손님 정보를 채가는 정도겠죠? 이는 클라이언트 쪽으로 데이터를 저장하는 방식에서는 모두 위험하지만 쿠키에 httpOnly 옵션을 설정해 그나마 더 안전해질 수 있습니다.

 

CSRF는 이 악성 스크립트를 사용자가 자신의 의지와 무관하게 서버에 요청(송금, 삭제 등)하게 한다는 차이가 있습니다. 웹스토리지는 접근 범위를 좁히기에 어느 정도 안전하지만 XSS로 데이터를 탈취당하면 똑같기에 이 두 취약점을 잘 관리해야 합니다.

 

 

로컬 스토리지(Local Storage) vs 세션 스토리지(Session Storage)

 

기본적으로 로컬 스토리지는 도메인마다 큰 우물을 하나 만든다고 보면 됩니다. 이 우물은 웹이 사라져 통째로 매립되거나 사용자가 고의로 물의 씨를 말려버리거나 하지 않으면 영원히 보존됩니다. 또 이 우물은 지역마다 이용 제한이 있어 같은 도메인이 아니면 사용할 수 없습니다. 

 

세션 스토리지는 로컬 스토리지와 같이 같은 도메인이 아니면 이용할 수 없지만 한 번 먹고 휙~ 버리는 생수통과 비슷한 개념입니다. 각 도메인마다 물병이 생기고 브라우저를 닫으면 싹 버려서 폐기해 버립니다. 그리고 같은 도메인이라도 다른 물병이 생기므로 이는 저장소 제공이 도메인이 아닌 윈도우 객체라 할 수 있습니다.

 

 

토큰

 

 

위에서 세션이 보안이 좋다고 했는데.. 사실 그럴까요? 세션 ID만 슬쩍하고 클라이언트인 척한다면 문제가 되지 않을까요? 간단히 세션 ID 유출에 대한 기사만 검색해도 최근까지도 아주 빈번하게 일어나고 있습니다. 또 많은 ID를 관리해야 한다면 서버의 부담이 커질 것입니다.

 

https://www.cctvnews.co.kr/news/articleView.html?idxno=235045 

 

자동차업계 데이터 유출 심각, BMW·도요타 이어 볼보까지 - CCTV뉴스

자동차 제조사 볼보(Volvo)의 브라질 매장에서 중요 정보가 유출되는 사고가 발생했다.볼보의 브라질 현지 소매업체인 디마스(Dimas) 볼보의 웹사이트를 통해 중요 파일이 1년 동안 유출된 것으로

www.cctvnews.co.kr

 

이러한 개념에서 토큰이 등장합니다. 이 암호화된 토큰을 ID 대신에 보내고 클라이언트 쪽에서 복호화해 데이터를 추출하고 서버는 다음 요청에 대해 헤더에 실린 토큰이 유효한지만 확인하면 됩니다. 그리고 토큰에 자체적으로 정보가 들어 있기 때문에 서버가 무상태성이 되어 리소스를 절약하고 확장과 유지보수가 편해집니다.

 

하지만 역시 이 토큰 자체도 탈취당하면 대처하기 어렵고 토큰 자체가 많은 데이터를 포함할 수 있기에 네트워크에 부하가 올 수 있습니다.

 

 

JWT(JSON Web Token)

 

 

JWT란 토큰 중에서 가장 범용적으로 이용되는 것이며 복호화된 데이터가 JSON 형식으로 이루어졌습니다. 또 토큰 내부에는 위변조 방지를 위한 서명도 있습니다. 그리고 JWT는 토큰 자체가 탈취당하는 리스크를 어느 정도 보안하기 위해 Access Token과 Refresh Token 두 가지를 만들고 관리합니다. 일반적으로 Access Token이 위의 개념과 연결되는 실제 유저 정보가 담긴 토큰이고 Refresh  Token은 Access Token의 유효 기간 만료 시 재발급을 위해 확인하는 토큰입니다.

 

 

 

 

 

 

'WEB' 카테고리의 다른 글

CORS  (6) 2023.06.08
Virtual DOM  (6) 2023.06.01
CSRF & XSS  (5) 2023.05.25
브라우저 구조와 렌더링 과정  (6) 2023.04.28
REST API  (6) 2023.04.27