[Web] 웹 브라우저 쿠키(Cookie)와 세션(Session)의 개념

 

어떠한 사이트에 한 번 로그인을 하고 나면 사이트 내 여러 페이지들을 접속할 때 로그인이 유지되거나 혹은 ID, PW를 저장해두어 며칠 뒤 재 접속을 하더라도 다시 입력하지 않고 자동 로그인 되는 경우가 있다.

반대로 몇 분 정도 해당 사이트를 이용하지 않았는데 세션이 만료되었다는 페이지가 뜨며 로그인을 다시 해야하는 경우가 발생하기도 한다.

 

세션 만료!

 

이는 사용자의 브라우저에 사용자의 정보를 저장하는 인증 방식인 세션, 쿠키의 개념과 관련이 되어 있다. 
먼저 HTTP의 특성을 되짚어본 후에 세션과 쿠키가 무엇인지 살펴보자.

 

HTTP의 특성

HTTP는 인터넷 상에서 데이터를 주고 받기 위한 서버-클라이언트 모델을 따르는 프로토콜이다. 클라이언트가 서버에게 요청(request)을 보내면 서버는 응답(response)를 보냄으로써, 데이터를 교환한다. HTTP는 비연결성 (connectionless) , 무상태성 (stateless) 이라는 특징을 가지고 있다. HTTP는 요청에 대한 응답을 처리 완료하게 되면, 연결을 끊어 버린다. 따라서 클라이언트에 대한 이전의 상태 정보 및 현재 통신의 상태가 남아있지 않게 된다는 것이다.

1. Connectionelss Protocol 비연결지향 (비연결성)
클라이언트가 서버에 요청했을 때, 그 요청에 맞는 응답을 보낸 후 연결을 끊는 처리 방식

2. Stateless Protocol (무상태성, 상태 정보 유지 안함)
클라이언트와 첫번째 통신에서 데이터를 주고받았다 해도, 두번쨰 통신에서는 이전 데이터를 유지하지 않는다.

서버는 다수의 클라이언트와 연결을 계속 유지하기 위한 자원 낭비가 뒤따르고, 비연결성 및 무상태성의 특징을 가진다면 불필요한 자원 낭비를 줄일 수 있다는 장점이 있다.
그러나, 서버는 클라이언트를 식별할 수 없게 된다는 점은 는 단점을 지니기도 한다. 로그인을 하더라도, 다음 요청에서는 해당 클라이언트를 기억하지 못하므로 또 로그인을 해야하는 문제가 발생한다. 한 번 로그인 되면, 장시간 사용하지 않거나 로그아웃을 하지 않는 이상 로그인이 유지되어야 한다. (새로고침 할 때마다 로그인을 해야 하는 상황, 장바구니에서 상품을 선택하고 구매 페이지에서 상품의 정보가 사라지는 상황은 상상하기 힘들지 않은가?)

이러한 Stateful 한 경우를 위해, HTTP의 비연결성 및 무상태성을 보완하기 위해 Cookie와 Session이 사용된다.

---

Cookie

먼저 쿠키에 대해 알아보자. HTTP 쿠키(웹 쿠키, 브라우저 쿠키)란, 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 이 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에 들어왔는지 아닌지를 판단할 때 주로 사용한다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있다. 위에서 설명한 바와 같이, 상태가 없는(stateless) HTTP 프로토콜에서 브라우저의 상태 정보를 기억할 수 있게 하는 방법이다.

 

 

쿠키는 다음의 세 가지 목적을 위해 사용된다.

 

1) 세션 관리 (Session Management)

- 서버에 저장해야 할 로그인, 장바구니, 게임 스코어, 접속 시간 등의 개인 정보 관리 

 

2) 개인화 (Personalization)

- 각 사용자에게 적절한 페이지를 보여줌 (사용자 선호, 테마 등의 세팅)

 

3) 트래킹 (Tracking)

- 사용자의 행동과 패턴을 분석하고 기록하는 용도

 

과거에는 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용했다. 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때에는 이 방법이 타당했지만, 지금은 modern storage APIs를 사용해 정보를 저장하는 것을 권장한다고 한다. 매 요청마다 쿠키가 함께 저장되기 때문에, 특히 mobile data connections인 경우 성능이 급격히 떨어지는 원인이 될 수 있다. 정보를 클라이언트 측에 저장하려면, Modern APIs의 종류 인 웹 스토리지 API (local storage와 session storage), IndexedDB를 사용하면 된다.

 

 

 

---

쿠키는 어떻게 만드는가?

Set-Cookie, Cookie Header

 

쿠키의 데이터 형태는 Key와 Value로 구성된 String이다. 4KB 이상 저장할 수 없다.

HTTP요청을 수신할 때, 서버는 응답과 함께 Set-Cookie 헤더를 전송할 수 있다. 

쿠키는 보통 브라우저에 의해 저장되며, 그 후 쿠키는 같은 서버에 의해 만들어진 요청(Request)들의 Cooke HTTP 헤더 안에 포함되어 전송된다. 만료일 혹은 지속시간이 명시될 수 있으며, 만료된 쿠키는 더이상 보내지지 않는다. 

또한, 브라우저마다 저장되는 쿠키는 다르다. 크롬에 남긴 쿠키는 인터넷 익스플로어에서 사용할 수 없으며, 브라우저가 다르면 서버는 다른 사용자로 인식한다.

 

클라이언트가 서버에 요청하면, 서버가 응답할 때 쿠키에 저장하고자 하는 정보를 Header의 Set-Cookie로 함께 전달한다.

Set-Cookie: <cookie-name>=<cookie-value>

 

클라이언트는 서버로 전송하는 모든 요청에, 현재 브라우저에 저장된 모든 쿠키를 Header의 Cookie로 전달한다.

Cookie: <cookie-name>=<cookie-value>

 

서버가 쿠키와 함께 아래와 같은 응답을 클라이언트에게 전달했다고 하면,

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

 

이후로 해당 클라이언트는 매번 저장된 쿠키를 헤더에 포함하여 요청을 보내게 된다.

GET /sample_page.html HTTP/1.1
Host: www.dream-and-develop.tistory.com
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

 

웹 브라우저의 검사(Inspection) 기능을 이용하면 Application 탭에서 저장된 Cookies를 확인할 수 있다. 

임의로 추가, 변경, 제거도 가능하다.

 

 

 

---

쿠키의 LifeTime

Session 쿠키 & Permanent 쿠키

 

쿠키의 라이프타임은 Session Cookie와 Permanenet 쿠키 두 가지 방법으로 정의될 수 있다.

Session 쿠키란 웹 브라우저가 종료될 때 제거되는 쿠키, 즉 현재 세션이 끝날 때 삭제되는 쿠키를 말한다. 위에서 살펴본 쿠키는 Session 쿠키이다.

브라우저가 종료되더라도 쿠키를 유지하고 싶다면, Permanent 쿠키를 이용하면 된다. 쿠키를 생성할 때 Expires 또는 Max-Age 옵션을 추가하면 된다.

 

- Expires : 쿠키가 만료될 날짜 지정

- Max-Age : 현재 시간을 기준으로 얼마동안 쿠키를 유지시킬 것인가를 지정

Set-Cookie: yummy_cokie=choco; Expires=Wed, 26 Oct 2022 07:28:00 GMT;

 

Secure & HttpOnly & Path & Domain 옵션 

쿠키를 제어하기 위한 옵션들이 몇 가지 더 있다.

 

- Secure : HTTPS 프로토콜 상에서 암호화된 요청일 경우에만 전송

- HttpOnly : Cross-site 스크립팅 공격을 방지한다. Javascript의 document.cookie API에 접근할 수 없도록 한다.

- Domain, Path : 쿠키의 스코프를 정의한다.

 

Set-Cookie: yummy_cokie=choco; secure; httpOnly;

 

쿠키의 용도

여러 페이지를 이동할 때마다 로그인을 하지 않고 사용자 정보를 유지할 수 있게 해주는 것이 쿠키이다. 이는 ID를 저장하거나 로그인 상태를 유지할 때 사용되며, 하루동안 다시 보지 않기(쿠키에 체크한 날짜를 기록하여 다시 방문했을때의 시간과 시차를 이용해 계산), 최근 검색한 상품들을 광고에서 추천, 또는 쇼핑몰 장바구니 기능에 사용된다.

 

---

Session

 

클라이언트의 웹 브라우저에 쿠키를 저장해놓고, 매 요청마다 헤더에 쿠키를 넣어 전달하는 방식을 사용하는 방식으로 인증을 구현할 경우, 쿠키가 유출되거나 조작될 수 있는 등 보안상 결함이 존재한다. 개인 소유가 아닌 공용 컴퓨터에서 사용할 경우, 누구나 그 사용자의 비밀번호를 확인할 수 있게 되며 HTTP로 개인 정보를 주고 받는 것은 매우 위험하다.

 

Session 이란, 비밀번호를 비롯한 인증 정보를 쿠키가 아닌, 서버 측에서 저장하고 관리하는 방식이다.

 

HTTP/1.1 200
Set-Cookie: JSESSIONID=FDB5E30BF20045E8A9AAFC788383680C;

 

서버는 클라이언트에 로그인 요청에 대한 응답을 작성할 때, 인증 정보는 서버에 저장하고 사용자의 식별자인 JSESSIONID(session_id) 를 쿠키에 담아 전송한다. 이후 클라이언트는 요청을 보낼 때마다 JSESSIONID 쿠키를 함께 보내고, 서버는 이 ID의 유효성을 판별하고 클라이언트를 식별한다.

 

웹 브라우저에 쿠키를 저장하여 HTTP로 전송하는 방식 대신, 서버에 사용자의 인증 정보를 저장하며 session_id를 쿠키에 담아 전송하는 Session 방식이 보안상 훨씬 안전한 방법이라 할 수 있다. 

 

 

세션의 동작 순서

1. 클라이언트가 서버에 처음으로 Request를 보냄 (session id가 존재하지 않음)
2. 서버에는 session id 쿠키 값이 없는 것을 확인하고 새로 발급하여 응답함
3. 클라이언트는 전달받은 session id값을 매 요청마다 헤더 쿠키에 넣어 저장
4. 서버는 session id를 통해 사용자를 식별
5. 클라이언트가 로그인 요청 시, 서버는 session을 로그인 사용자 정보로 갱신하고 새로운 session id를 발급하여 응답
6. 이후 클라이언트는 로그인 사용자의 session id 쿠키를 요청과 함께 전달하고 서버에서도 로그인된 사용자로 식별 가능
7. 클라이언트 종료(브라우저 종료)시, session id 제거하고 서버에서도 세션을 제거한다.

 

 

세션의 특징

- session id는 브라우저 단위로 저장되고, 브라우저 종료 시 소멸된다.

- 로그인한 사용자에 대해서만 세션을 생성하는 것이 아니다. 따라서 로그아웃 하면 새로운 사용자로 인식하여 새로운 세션이 생성된다.

- 사용자의 로그인 상태, 닉네임 등 사용자가 요청할 때마다 필요한 정보들을 세션에 담아두면, 사용자 DB에 접근할 필요가 없어 효율적이다.

 

 

장점과 보안적 결함

- 쿠키를 포함한 요청이 외부에 노출되더라도, 세션 ID 자체는 유의미한 개인정보를 담고 있지 않으므로 쿠키 방식보다는 훨씬 안전하다.  그러나 누군가가 어떤 사용자의 session id를 탈취하여 클라이언트인 척 위장하여 로그인하여 사용할 수 있게 된다는 한계가 존재한다.

- 각 사용자마다 고유한 세션 ID가 발급되므로, 요청이 들어올 때마다 회원 정보를 DB에 접근하여 확인할 필요가 없다.

- 서버에서 세션 저장소를 사용하므로 요청이 많아지면 서버의 부하가 심해진다.

- https를 이용해 통신하는 것이 좋으며, cookie와 마찬가지로 session의 secure 옵션을 true로 주면 https에서만 세션 정보를 주고받을 수 있으며, HttpOnly 옵션을 true로 주는 경우 js를 통해서 세션 쿠키를 사용할 수 없도록 강제할 수 있다.

 

 

 

---

[참고자료]
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
https://cjh5414.github.io/cookie-and-session/

https://tecoble.techcourse.co.kr/post/2021-05-22-cookie-session-jwt/
https://88240.tistory.com/190
https://crossjin.tistory.com/entry/%EC%84%B8%EC%85%98Session%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C