쿠키vs세션vs웹스토리지(로컬, 세션 스토리지)

Gom La·2023년 3월 30일

it 지식 web

IT 지식

목록 보기

2/9

쿠키와 세션은 분명 많이 들어본 단어이지만 헷갈리는 개념이다.

지금은 많이 접해봤기 때문에 확실히 구분을 하고 있지만 언제 까먹을지 모르는 '나'를 위해 간단하게 정리하려한다.

🔖 HTTP의 특징과 쿠키, 세션을 사용하는 이유

HTTP 프로토콜의 특성이자 약점을 보완하기 위해 쿠키와 세션을 사용한다.

HTTP 프로토콜 환경은 'connectionless'과 'stateless'라는 두가지 없는(?) 특성을 가진다.

connectionless
클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징

HTTP는 먼저 클라이언트가 서버에 요청(request)를 보내면, 서버는 클라이언트에게 요청에 맞는 응답(response)을 주고 접속을 끊어버린다.

Header에 keep-alive라는 값을 주어 connection을 재활용하는데 이는 HTTP1.1에서 기본으로 가지고 있다.

HTTP가 tcp위에서 구현되었기 때문에 네트워크 관점에서 keep-alive 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다.

*tcp : 연결지향, udp : 비연결지향

stateless
통신이 끝나면 상태를 유지하지 않는 특징

연결을 끊는 순간 클라이언트와 서버의 통신이 끊어지며 상태 정보는 유지하지 않는다.

쿠키와 세션은 위의 두 가지 특징을 해결하기 위해 사용된다.

쿠키와 세션을 사용하지 않는다면 사용자가 옷을 사기위해 쇼핑몰에 들어가 로그인을 한 후, 장바구니에 담는다던가 결제를 하기위해 페이지를 이동하면 서버와의 연결이 끊어져 있고 상태를 가지고 있지 않기 때문에 로그인 유무를 확인할 수 없게 된다. 이렇게 되면 사용자는 다시 로그인을 해야하는 번거로운 일이 발생한다.

이렇게 쿠키와 세션을 사용하면 로그인을 유지할 수 있어 사용자에 대한 인증을 유지하게 된다.

이 특성 때문에 서버는 클라이언트가 누구인지 매번 확인해야한다.

🔖 쿠키(Cookie)

클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다.

➤ 쿠키 특성

클라이언트의 브라우저 메모리 또는 하드디스크에 저장이 된다.(🔛세션)
매번 서버에서 전송되므로 크기가 큰 경우 서버에 부담이 간다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청(request)시에 Header에 넣어서 자동으로 서버에 전달한다. 이는 다른 도메인에서 요청할 때도 자동으로 전송되는 위험성이 있다.(CSRF 취약)
클라이언트에 300개까지 쿠키저장이 가능하나, 하나의 도메인당 20개의 값만 가질 수 있따. 대략 4KB까지의 데이터를 저장할 수 있으며 유효기간이 존재한다.
Response Header에 Set-Cookie속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
대부분 브라우저가 지원한다.

➤ 쿠키 구성 요소

이름 : 각각의 쿠키를 구별하는데 사용하는 이름
값 : 쿠키의 이름과 관련한 값
유효시간 : 쿠키의 유지시간
도메인 : 쿠키를 전송할 도메인
경로 : 쿠키를 전송할 요청 경로

➤ 쿠키의 동작 방식

클라이언트가 서버에 요청(request)
서버에서 쿠키 생성
HTTP Header에 쿠키를 포함 시켜 응답(response)
브라우저가 종료되어도 쿠키 만료 기간이 있다면 크라이언트에서 보관
같은 요청을 할 경우 HTTP Header에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답

➤ 쿠키를 사용하는 예

방문 사이트에서 로그인 시 "아이디와 비밀번호를 저장하겠습니까?" 물어보는 경우
쇼핑몰 장바구니 기능
자동로그인, 팝업에서 "오늘더 이상 이 창을 보지 않음"체크

🔖 세션(Session)

➤ 세션 특징

세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와는 달리 세션은 서버에서 관리한다.
서버에서는 클라이언트를 구분하기 위해 세션 ID부여하며 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정이 가능
사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안이 좋지만 사용자가 많아지면 서버 메모리를 많이 차지하게 된다.
동접자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 된다.
클라이언트가 요청(request)를 보내면 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 것이 세션 ID이다.
보안 면에서 쿠키보다 우수

➤ 세션 동작 방식

클라이언트가 서버에 요청(request) 시 세션 ID 발급 받음
클라이언트는 세션 ID에 대해 쿠키를 사용하여 저장하고 가지고 있음
클라이언트는 서버에 요청할 때, 이 쿠키로 된 세션 ID값을 같이 서버에 전달해서 요청(request)
서버는 세션 ID를 전달 받아서 별 작업없이 세션ID로 세션에 있는 클라이언트 정보를 가져와서 사용
클라이언트 정보를 가지고 서버 요청(request)을 처리하여 클라이언트에 응답(response)

➤ 세션의 사용하는 예

로그인 같이 보안이 중요한 작업을 수행하는 경우

🔖 쿠키와 세션의 차이점

🧑🏻‍💻 위의 설명을 읽어보면 세션도 결국 쿠키를 사용하고 역할이나 동작원리도 비슷한데 두개의 차이점은 무엇일까?

가장 큰 차이점은 사용자의 정보가 저장되는 위치이다. 쿠키와 달리 세션은 서버의 자원을 사용하는 점이 다르다.

세션은 서버의 자원을 사용하고 서버의 처리가 추가되기 때문에 속도면에서는 쿠키보다 더 느리다.

쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 요청(request)에서 스니핑 당할 우려가 있어 보안에 취약하다. 반면 세션은 쿠키를 이용하여 session_id만 저장하고 그것으로 서버에서 처리하기 때문에 보안성이 좋다.

쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있따. 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있따.

반면에 세션도 만료기간을 정해서 사용할 수 있지만 브라우저가 종료되면 만료기간에 상관없이 삭제된다.

🔖 웹 스토리지

클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.

➤ 웹 스토리지 특징

키(Key)와 값(Value)의 형태로 데이터를 저장한다.
쿠키와 달리, 서버에 전송되지 않아 서버에 부담이 가지 않는다.
쿠키와 달리, 필요한 경우에만 꺼내 사용할 수 있어 자동전송이 없다. -> 다른 오리진에서 요청하는 경우 꺼내 사용하고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 사용할 수 없다.(CSRF 안전)
쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효기간이 존재하지 않는다.
HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
서버가 HTTP Header를 통해 스토리지 객체를 조작할 수 없다.(Javascript로 클라이언트 내에서만 수행)
로컬 스토리지(Local Storage)와 세션 스토리지(Storage)가 존재