Cookie & Session

웹사이트의 Cookie와 Session에 대해 정리하였습니다.

 

 

---

< Cookie & Session 사용 이유 >

쿠키와 세션은 클라이언트에 대한 정보를 저장하기 위해 만들어졌습니다.

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

 

< HTTP 특성 >

• 비연결성 :
  클라이언트가 서버에 요청을 보낼 때, 서버가 그에 맞는 응답을 전달한 후 연결을 끊는다.
• 무상태성 :
  첫 번째 통신에서 클라이언트와 서버가 데이터를 주고받더라도, 2차 통신에서는 이전 데이터를 유지하지 않습니다.

 

=> 하지만, 실제로 데이터의 유지(지속)는 요구됩니다!

만약 클라이언트에 대한 정보가 유지되지 않으면, 다른 페이지로 이동할 때마다 로그인을 하거나 고른 상품이 장바구니에 담기지 않을 것입니다.

 

 

---

< Cookie >

쿠키는 어떤 웹사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터입니다.(유저의 컴퓨터에 저장)

해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저가 도메인에게 http 요청 시 쿠키를 함께 전달합니다.

기본적으로는 쿠키는 오랜 시간 동안 유지될 수 있고, 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험합니다.

 

쿠키 이용사례) 

• 이전에 방문했던 사이트에 재방문할 때, ID와 비밀번호 자동입력
• 팝업창 "오늘 하루 보지 않기" 체크

 

< 쿠키 작동 방식 >
- Step 1 : 유저가 웹사이트에 방문 (클라이언트가 웹사이트의 코드 요청)
- Step 2 : 웹 서버가 쿠키 생성
- Step 3 : 생성된 쿠키를 HTTP 응답 프로토콜을 이용해 클라이언트(유저)에게 전달
=> 헤더에 Set-Cookie라는 프로퍼티에 쿠키를 담아 클라이언트로 전송
- Step 4 : 전달된 쿠키는 유저의 PC에 저장 -> 이후 서버로 요청을 보낼 때마다 요청과 함께 쿠키 전달
=> 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 전송

 

< 쿠키 옵션 >
1. Domain : 쿠키의 도메인옵션과 서버의 도메인이 일치하는 경우 쿠키 전송
도메인 - 서버에 접속할 수 있는 이름
ex) 요청 URL이 http://www.localhost.com:3000/list/user 인 경우 도메인은 www.localhost.com

2. Path : 쿠키의 Path옵션과 요청의 세부경로가 일치하는 경우만 쿠키 전송
명시하지 않을 경우 / 로 설정
ex) 요청 URL이 http://www.localhost.com:3000/list/user 인 경우 세부 경로는 /list/user

3. MaxAge or Expires : 쿠키의 유효기간 설정
MaxAge - 앞으로 몇 초 동안 쿠키가 유효한지 설정
Expires - 언제까지(Date) 쿠키가 유요한지 설정
=> 명시하지 않는 경우 브라우저의 탭을 닫아야만 쿠키가 제거

4. HttpOnly: 자바스크립트의 쿠키 접근 가능 여부 결정
해당 옵션이 true로 설정된 경우, 자바스크립트에서는 쿠키에 접근이 불가합니다.
false인 경우 자바스크립트에서 쿠키에 접근이 가능하므로 'XSS' 공격에 취약합니다.

5. Secure: HTTPS 프로토콜에서만 쿠키 전송 여부 결정
해당 옵션이 true로 설정된 경우, 'HTTPS' 프로토콜을 이용하여 통신하는 경우에만 쿠키를 전송할 수 있습니다.

6. SameSite : Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 쿠키옵션의 조합으로 서버의 쿠키 전송 여부 결정

• Lax : Cross-Origin 요청이면 'GET' 메소드에 대해서만 쿠키를 전송할 수 있습니다.
• Strict : Cross-Origin이 아닌 same-site 인 경우에만 쿠키를 전송 할 수 있습니다.
• None: 항상 쿠키를 보내줄 수 있습니다. 다만 쿠키 옵션 중 Secure 옵션이 필요합니다.

 => 'same-site'는 요청을 보낸 Origin과 서버의 도메인이 같은 경우를 말합니다.

 

 

---

< Session >

방문자가 웹 서버에 접속한 상태를 하나의 단위로 보고 세션이라고 합니다.
=> 서버와 클라이언트간 연결이 활성화 된 상태

중요 데이터는 웹 서버에 저장하고, 쿠키에는 해당 데이터에 대한 ID만 암호화된 상태로 전달합니다.

 

쿠키 이용사례) 

• 다른 페이지로 이동해도 로그인이 해제되이 않고 로그아웃할 때까지 유지됩니다.

 

< 세션 작동 방식 >
- Step 1 : 유저가 웹사이트에 방문 (클라이언트가 웹사이트의 코드 요청)
- Step 2 : 서버가 요청 헤더(쿠키)안에 유효한 세션 ID가 같이 전달되었는지 확인
- Step 3 : 세션 ID가 존재하지 않는다면, 서버가 관련 데이터를 저장 후 일종의 저장소에 세션 ID 생성
=> 일종의 저장소란 주로 in-memory(자바스크립트 객체), 또는 DB를 말합니다.
- Step 4 : 생성한 세션 ID를 클라이언트에게 쿠키로 전달
=> 세션 ID를 전달하기 전에 암호화과정 필요!
- Step 5 : 클라이언트가 다시 요청을 보낼 경우, 쿠키로 전달 받은 세션 ID가 세션 저장소에 있는지 확인 후 적절한 응답 전달

 

< 세션을 이용한 인증의 단점 >
- 기본적으로 세션은 서버의 메모리에 세션 정보를 저장하기 때문에 사용자가 매우 많아질 경우 서버의 가용메모리가 줄어들어 성능이 안좋아질 수 있습니다.
- 세션을 기반으로 인증한다고 해도, 여전히 쿠키를 사용하기 때문에 XSS등의 공격을 통해 쿠키가 탈취되었을 경우 인증이 취약해질 수 있습니다.

 

 

---

Video : Cookies vs Local Storage vs Session Storage