[💻 코드스테이츠 FE 44기]쿠키, 세션

✔️ 시작

쿠키, 세션에 대해 학습했고 두개의 차이점 장, 단점에 대해 학습했다.

---

📍 배운 것

🍪 쿠키(Cookie)

"HTTP는 Stateless(무상태성)인데 어떻게 우리의 정보 유지가 될까?"

에서 쿠키가 등장하게 되었다.

• 서버에서 클라이언트에 영속성이 있는 데이터를 저장하는 방법
  - 클라이언트가 가지고 있는 데이터
  • 서버는 클라이언트 쿠키를 이용해 데이터를 가져올 수 있다.
  • 해당 도메인에 대해 쿠키가 존재한다. 웹 브라우저는 도메인에게 HTTP 요청 시 쿠키를 함께 전달한다.(자동으로)
• HTTP 프로토콜의 무상태성 보완해 주는 도구
• 쿠키는 브라우저(웹)에만 존재한다.
• 쿠키는 HTTP 헤더 사용

어디에 쓰는지?

• 쿠키는 삭제하지 않는다면 사라지지 않는 특성을 가지고 있다.
• 장기간 저장(보존)해야 하는 옵션을 클라이언테 저장하는데 적합하다. (ex - 로그인 상태 유지, 장바구니 리스트 등)

데이터를 저장한 후 아무때나 데이터를 가져올 수 없다.

• 데이터를 저장한 후 특정 조건들이 만족돼야 다시 가져올 수 있다.

🍪 쿠키 옵션

Domain

서버와 요청의 도메인이 일치하는 경우 쿠키 전송

• http://www.localhost.com:3000/users/login 인 경우 Domain은 http://www.localhost.com

Path

서버와 요청의 세부 경로가 일치하느 경우 쿠키 전송

• http://www.localhost.com:3000/users/login 인 경우 Path는 /users/login
• 명시하지 않은 경우 기본적으로 /으로 설정

MaxAge of Expires

쿠키의 유효기간 설정 (설정 시 일정 시간 후 자동 소멸, 유효기간을 설정하지 않을 경우 탈취 위험이 높다.)

• MaxAge : 쿠키가 유효한 시간을 초 단위로 설정하는 옵션(시한부 옵션을 주는 느낌)
• Expires : 언제까지 쿠키가 유효한지 심판의 날을 지정(지정된 시간, 날짜 초과 시 쿠키 자동으로 삭제)

  세션 쿠키 : MaxAge 또는 Expires옵션이 없는 쿠키(브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키, 브라우저 종료시 해당 쿠키 삭제)
  영속성 쿠키 : 브라우저 종료 여부 상관없이 MaxAge 또는 Expires에 지정된 유효시간 만큼 사용가능한 쿠키

Http Only

스크립트(<script>)의 쿠키 접근 가능 여부 결정

• 쿠키는 <script>태그로 접근 가능하다. (XSS 공격에 취약)
• 민감한 정보나 개인 정보는 담지 않는 것이 좋다.
• 옵션 값은 기본적으로 true로 지정한다.(false인 경우 쿠키에 접근할 수 있어 탈취 위험이 있다.)

Sercure

HTTP 프로토콜에서만 쿠키 전송 여부 결정

• 옵션 값이 true인 경우 HTTP를 이용하는 경우에만 쿠키를 전송할 수 있다.
• 옵션 값이 없을 경우 프로토콜 상관없이 모든 쿠키를 전송할 수 있다.(HTTP, HTTPS)

SameSite

CORS 요청의 경우 옵션 및 메서드에 따라 쿠키 전송 여부 결정

• Lax : GET 메서드 요청만 쿠키 전송 가능
• Strict : 쿠키 전송 불가
• None : 모든 메서드 요청에 대해 쿠키 전송 가능 (Secure 쿠키 옵션이 필요하다.)

서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 함께 전송해 안전하게 유지할 수 있다.

쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.

📝 세션(Session)

• 사용자 인증 상태(서버와 클라이언트가 활성화된 상태)
• 서버가 클라이언트에 유일하고 암호화된 ID를 부여
• 중요 데이터는 서버에서 관리(데이터를 서버에 저장)
• 쿠키에는 그 데이터에 대한 아이디(session_id)만 암호화된 상태로 부여

서버는 일정의 저장소에 세션을 저장한다.

• in-memory(JS 객체 비슷), 세션 스토어(redis 등과 같은 트랜잭션이 빠른 KB)
• 세션이 만들어 지면 각 세션을 구분할 수 있는 세션 아이디도 만들어진다.(클라이언트에 세션을 증명할 수단으로 세션 아이디 전달)

웹 사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용한다.

• 쿠키에서는 서버에서 발급한 세션 아이디를 저장한다.

• 서버에서 관리하기 때문에 만약 유저가 많을 경우 메모리 한영역을 세션 유저 데이터로 차지해 버린다. (서버 성능 저하)
• 기존 쿠키를 완전히 대체한게 아니기에 여전히 쿠키를 사용하고 있다. (XSS 공격에 여전히 취약)

---

✏️ 마치며

쿠키는 자주 들어봐서 익숙했지만 세션은 이번에 처음 알게 되었다.
쿠키는 클라이언트, 세션은 서버에서 데이터를 관리하는 부분이 큰 차이점이지 않을까 싶다.

서버 영역은 민감한 개인 정보와 연결되어 있는 부분으로
개발자가 어느 부분을 쿠키, 세션으로 담을지 잘 결정해야할 거 같다.

쿠키의 단점 보완한게 세션이지만 세션 또한 단점이 존재한다.
이를 보완한게 토큰인데 이부분은 다음 학습에서 배우게 된다.