쿠키와 세션

📓 Cookie

쿠키는 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하기 위해 키와 값의 형태로 브라우저에 저장되는 데이터다.
웹 서버는 웹 브라우저의 요청이 반복될때, 이전에 요청한 유저란걸 파악해야한다면 웹 서버가 최초의 응답 반환 시 요청자 정보를 포함하여 반환을 해야 한다.

동일한 서버에 재요청 시 저장된 데이터를 함께 전송한다.

🏷️ 쿠키와 세션 사용 이유

이전에 stateless를 배웠었다. stateless는 통신이 끝나면 상태를 유지하지 않는 특징이었다.
그래서 클라이언트와 서버의 통신이 끝나면 상태 정보가 유지 되지 않는 특징을 해결하기 위해 사용된다.

하나 더 비연결성으로 클라이언트가 요정을 한 후 응답을 받으면 그 연결을 끊어버리는 특징때문에 이러한 단점을 보완하고자 사용한다.

ex) 홈페이지에 로그인 함 -> 내가 원하는 상품에 대해 보기 위해 페이지 이동을 함 -> 페이지 이동했으니 다시 로그인을 해야 함.
(매우 번거로움.)

🏷️ Stateful HTTP를 위한 웹 브라우저 저장소 (Cookie)

웹 서버의 제어 : Set-Cookie 헤더를 통해 웹 브라우저 저장 제어.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.

서버와 브라우저 간 쿠키 전송 방식

✔️ 웹 서버가 웹 브라우저에게 최초로 전달해줄 때 웹 서버 응답의 헤더 Set-Cookie로 전송.
✔️ 웹 브라우저가 그 이후로 웹 서버에게 전달할 때 웹 브라우저 요청의 헤더 Cookie로 전송.

🏷️ 쿠키 사용 기준

Domain + Path

명확한 쿠키 구성 요소
1. 쿠키 이름 ➵ 쿠키를 구별하는 데 사용되는 이름
2. 값 ➵ 쿠키의 이름과 관련된 값 (value)
3. Domain ➵ 쿠키를 전송할 도메인
4. Path ➵ 쿠키를 전송할 경로
5. 유효시간

🏷️ 쿠키 동작 시나리오

1. 웹 브라우저 첫 요청
2. 서버는 첫 응답을 해줄 때 쿠키 값을 생성하고 요청 값(HTML, CSS, JS)과 함께 응답함
3. 클라이언트는 쿠키 값을 쿠키에 저장함.
4. 이후 클라이언트는 다음 요청할 때 쿠키에 저장된 Domain/Path값과 동일한 주소의 요청이라면 쿠키 값을 함께 요청과 보냄.
5. 서버는 쿠키를 통해 웹 브라우저를 인지함.

이때 쿠키는 어떤 값이든 가능하나, 일반적으로 인간이 이해할 수 있는 정보가 아닌 암호화난 난수를 보낸다.

🏷️ 쿠키 유효기간

쿠키 유효기간은 MaxAge 또는 Expires로 사용자 인증이 유효한 시간을 정해줄 수 있고, 브라우저가 종료되어도 이 인증을 유지해 준다는 특징이 있다.

• 명시된 경우 : Persistent Cookie - 브라우저가 종료되어도 로그인 상태 유지

  • 🌌 세션 쿠키와 달리 브라우저를 닫아도 지속적인 쿠키는 설정된 유효 기간 동안에 계속해서 유지.
  • 🌌 사용자가 브라우저를 재시작하더라도 이 쿠키는 계속해서 사용 가능. 장기적인 사용자 상태 정보를 유지.
  • 🌌 주로 로그인 상태, 사용자 환경 설정, 사용자 선호도 등을 저장하는데 활용. (자동 로그인)
  • 🌌 하지만 중요한 정보를 저장할 때는 보안 주의.

• 명시되어 있지 않은 경우 : Session Cookie

  • 🪐 사용자가 웹사이트 접속하고 브라우저 닫을 때까지만 유효하다. 브라우저가 종료되면 세션 쿠키는 삭제.
  • 🪐 단기적인 사용자 상태 정보를 유지하는데 사용.
  • 🪐 로그인 세션, 장바구니 정보와 같이 브라우저 세션 동안만 필요한 정보를 저장하는데 활용. (온라인 쇼핑 카트에서 장바구니)
  • 🪐 보안 상 이점이 있음.

쿠키가 위 2가지로 나뉘어지는 것이 아닌 유효기간을 기준으로 명시되어있는지 아닌지로 나뉘어지는 것이다.

---

📓 세션

세션은 쿠키를 기반하고 있지만 클라이언트에 저장되는 쿠키와 달리 서버 측에서 저장한다.
서버에서는 클라이언트를 구분하기 위해 세션 ID를 발급하고 해당 세션 ID를 Key로 설정하여 Value에는 사용자 정보 데이터를 저장한다.
사용자에 대한 정보를 서버 측에 저장하여 보안이 좋지만 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다고 한다.
ex) 동접자수가 많을 때.

세션 ID : 클라이언트 정보를 가지고 서버 요청을 처리하면 클라이언트에게 유일한 ID를 제공하는데 이게 세션 ID이다.

세션도 결국 쿠키를 사용.

세션 사용하면 좋은데 쿠키를 사용하는 이유
지속성의 차이도 있지만 세션은 서버의 자원을 사용하기 때문에 무분별하게 만들면 서버 메모리에 부하가 생기게 되고 속도가 느려질 수 있기 때문에 쿠키를 사용하는 경우가 생긴다.

🏷️ 세션 동작 시나리오

1. 클라이언트가 서버에 접속하면 세션 ID를 받음.
2. 클라이언트는 세션 ID를 쿠키에 저장하고 있음.
3. 이후 클라이언트가 다음 요청을 할 때 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청.
4. 서버는 세션 ID를 전달받았으니 즉시 세션 ID로 세션에 있는 클라이언트 정보를 가져옴.
5. 클라이언트 정보를 가지고 서버 요청을 처리해서 클라이언트에게 응답.

!. 쿠키와 세션을 같이 사용.

특징
◻️ 세션 ID를 제공해서 클라이언트 구분하고 요구에 맞는 서비스 제공.
◻️ 보안이 쿠키보다 우수.
◻️ 사용자가 많아질수록 서버 메모리 많이 차지.

🏷️ 쿠키와 세션 차이

🔊 저장되는 위치 -> 각각 클라이언트와 서버
🔊 세션은 서버의 처리가 필요하므로 요청 속도가 쿠키가 세션보다 빠름. 대신 세션이 보안 우수.
🔊 쿠키는 유효기간 있어도 브라우저가 종료됐을 때 정보를 유지할 수 있다. 세션도 유효기간 정할 수 있지만 브라우저 종료되면 바로 삭제됨.

---

📓 쿠키와 세션, 캐시 차이

캐시는 이미지, CSS, JS파일 등의 정적인 파일들을 클라이언트나 서버 측에 저장해놓고 사용하는 임시 저장소였다. 동일한 자원에 대한 반복적인 요청 시에 캐시된 데이터를 사용한다.
반면에 쿠키는 클라이언트와 서버 간의 상태를 유지하고 세션 관리, 사용자 추적 등과 같은 목적으로 사용한다. 또한 문자열 형태의 사용자 정보, 세션ID와 같은 동적인 정보를 저장하는데 사용한다.

쿠키는 주로 클라이언트 상태를 관리하는 데 사용되고, 캐시는 성능 최적화를 위한 리소스 저장 및 재사용에 사용된다고 생각하면 된다.

🏷️ 라이프 사이클

쿠키와 세션 차이를 말할 때 저장위치, 보안, 속도를 말하는 것도 좋지만 라이크 사이클을 말하면 더 좋다고 한다. 기억해두자

쿠키 : 만료시간에 따라 브라우저를 종료해도 계속해서 남아 있을 수 있다.
세션 : 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제된다.

---

📓 쿠키와 세션 그림 설명

쿠키 정보가 웹 브라우저에 저장되다보니

• 민감 정보들이 안전하지 않은 채로 저장되어 있음. (HttpOnly, Secure, SameSite 방어는 가능)
• 웹 브라우저 간 공유 불가
  • 웹 브라우저 단위의 저장소다보니 지역성 문제
  • ex) 유저가 PC 방을 돌아다니며 매 웹 브라우저에서 매번 유저가 로그인해야 함.

Session은 정보를 웹 서버측에 저장하다보니

• 민감 정보들이 웹 서버측에 안정하게 저장됨.
• 웹 브라우저 간 공유 가능.

1. 쿠키는 Domain + Path 만 일치한다면 해당 웹 서버로 모든 쿠키를 담아 보내다보니
   • 쿠키로 저장하려는 정보량이 많아질수록 → 요청 크기가 커진다
     • 불필요한 Network Overhaed : 비대해질수록 요청 사이즈도 커진다

• Session 은 정보를 웹 서버측에 저장하는것이기에, 아무리 많은 정보를 저장하더라도 요청을 방해하지 X

😫 착각한 것
쿠키와 세션이 다르다는 것은 알았지만 각각 따로 사용하는 관계가 없는 것인 줄 알았다. 그래서 쿠키는 쿠키대로 따로 세션은 세션대로 인 줄 알았다.
그게 아닌 쿠키와 세션을 같이 사용하는 것이고 클라이언트에 쿠키를 저장하여 세션 ID와 같은 중요한 정보를 유지하는 것이다.

또 세션 덕분에 브라우저 종료해도 로그인 상태가 유지되는 것으로 생각했는데 쿠키의 유효기간 Persistent Cookie 덕분이었음.

🔗 https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%BF%A0%ED%82%A4-%EA%B0%9C%EB%85%90-Cookie-%ED%97%A4%EB%8D%94-%EB%8B%A4%EB%A3%A8%EA%B8%B0#%EC%BF%A0%ED%82%A4_httponly - 웹 브라우저의 쿠키란?

🔗 https://interconnection.tistory.com/74 - 쿠키와 세션 개념