쿠키와 세션 사용 이유
HTTP는 클라이언트의 요청에 서버가 응답을 하면 연결을 끊는 비연결지향, 연결을 끊는 순간 서버가 상태을 유지하지 않는 무상태(stateless) 의 특징을 가지고 있다. 그래서 클라이언트와 서버가 통신을 할 때 통신이 끊어지고, 상태 정보가 유지되지 않기 때문에 페이지 이동을 할 때마다 로그인을 다시 해야하는 등의 문제가 발생한다. 이를 해결하기 위해 쿠키와 세션을 사용한다. 쿠키는 상태 정보를 브라우저에 저장해서 필요 시 정보를 참조하거나 재사용할 수 있다. 세션은 브라우저가 종료되기 전까지 클라이언트의 요청을 유지하게 해준다.
쿠키 🍪
쿠키는 브라우저(접속자 PC)에 저장되는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용한다. 상태 정보를 기억해주기 때문이다.
예) 쿠키에 정보를 담아서 보내면 서버는 쿠키를 통해 상태정보를 파악할 수 있게 된다. 이를 이용하여 사용자의 로그인 상태를 유지할 수 있다. 또 쇼핑몰 장바구니도 비로그인 상태에서 쿠키를 통해 정보를 유지할 수 있게 된다.
쿠키를 주기적으로 지우지 않으면 브라우저에 엄청나게 많은 쿠키들이 쌓여 있는 것을 볼 수 있다. 이것들이 사용자를 추적하고 있는 것이다.
쿠키 사용 목적
- 세션 관리: 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 개인화: 사용자 선호, 테마 등의 세팅
- 트래킹: 사용자 행동과 패턴을 기록하고 분석
💡 방문했던 사이트에 다시 방문 하였을 때 아이디와 비밀번호 자동 입력
💡 팝업창을 통해 "오늘 이 창을 다시 보지 않기" 체크
⚠️ 웹 스토리지 API 권장
과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용했다. 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때는 이 방법이 타당했지만, 지금은 modern storage APIs를 사용해 정보를 저장하는 걸 권장한다. 모든 요청마다 쿠키가 함께 전송되기 때문에, (특히 mobile data connections에서) 성능이 떨어지는 원인이 될 수 있다. 정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 웹 스토리지 API (localStorage와 sessionStorage)와 IndexedDB를 사용하면 된다.
쿠키 특징
1. 쿠키 정보는 항상 서버에 전송
네트워크 트래픽 유발- 최소한의 정보만 사용
- ⚠️ 서버에 전송하지 않고,
웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지참고
2. 클라이언트에 저장
보안에 취약- 보안에 민감한 데이터는 저장하면 안된다. (주민번호, 신용카드 번호 등)
3. 만료시점 설정
- 설정하지 않으면 브라우저 종료시 삭제
- 만료시점 설정시 브라우저 종료되도 유지
4. 용량 제한
- 한 도메인 당 20개, 쿠키 당 4KB
5. text 형식으로 저장
쿠키의 작동 방식
- 클라이언트가 서버에 페이지 요청
- 서버는 클라이언트의 요청에
유효성을 확인하고, 응답 헤더에Set-Cookie를 생성한다. 생성한 쿠키에 정보를 담아서 응답한다.- 클라이언트는 응답받은 쿠키를 가지고 있다가 서버에 요청 시
자동으로 요청 헤더에 Cookie를 포함하여 전송한다.(같은 서버에 의해 만들어진) - 서버는
이 쿠키 헤더를 파싱 해서 사용하고 HTTP 응답을 한다.
(이미지 출처: netlify)
쿠키 만들기
- Set-Cookie: 서버에서 클라이언트로 쿠키 전달
- Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달
Set-Cookie (응답 헤더)
- 서버에서
클라이언트에게 이런이런 쿠키를 저장하라고 요청하는 것
Set-Cookie: 키=값; 옵션들Set-Cookie: hello=jieun // hello라는 키에 값은 jieun으로 보냄// HTTP 응답 메시지
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[page content]Set-Cookie: sessionId=abcd123; expires=Wed, 17 Apr 2024 16:18:00 GMT;
path=/; domain=.google.com; Secure; HttpOnlyCookie (요청 헤더)
클라이언트가 서버에게 쿠키를 보낼 때는요청 헤더에Cookie릉 생성해서보낸다.서버로 이전에 저장했던 모든 쿠키들을 보낸다.- 클라이언트 요청 시 요청 헤더에 포함해서
자동으로 서버에 전송한다. - 서버는
이 쿠키 헤더를 파싱해서 사용한다.
// 문법: 이름-값 쌍
Cookie: <cookie-name>=<cookie-value>;
Cookie: name=value
Cookie: name=value; name2=value2; name3=value3// HTTP 요청 메시지
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberrySet-Cookie 옵션
1. 생명주기
1. 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 제거
2. 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지, 이후 제거
Expires
- Set-Cookie: expires=Wed, 17 Apr 2024 16:18:00 GMT
쿠키 만료일(GMT 기준)- 만료일이 되면 쿠키 자동 삭제
Max-Age
- Set-Cookie: max-age=3600 (3600초)
쿠키 지속시간- 0이나 음수를 지정하면 쿠키 삭제
2. 도메인
Domain
- domain=example.org
- 명시: 명시한 문서 기준 도메인 + 서브 도메인 포함 전송
도메인을 적어주면도메인이 일치하는 요청에서만 쿠키가 전송된다. 가끔 도메인이 다른 쿠키들이 있는데, 이런 쿠키들은써드 파티 쿠키로 사용자를 추적하고 있는 쿠키이다. 구글이나 페이스북같은 곳이 써드 파티 쿠키를 적극적으로 사용한다. 광고와 트래킹에 주로 사용되고, 다른 도메인의 서버 상에 저장된 (광고 배너와 같은) 이미지 혹은 컴포넌트를 포함한다. - 생략:
현재 문서 기준 도메인만 적용전송
3. 경로
Path
- path=/루트
- Cookie 헤더를 전송하기 위하여
요청되는 URL 내에 반드시 존재해야 하는 URL 경로 - Path를 명시하면 이
Path와 일치하는 요청 요청에서만 쿠키가 전송 - 이 경로를 포함한
하위 경로 페이지만쿠키 접근path=/home지정,path=/home/level1/level2매치
💡 도메인과 경로는 쿠키의 스코프를 정의한다. (어떤 URL을 쿠키가 보내야 하는지)
4. 보안
Secure
https에서만 쿠키 전송- Secure이더라도
민감한 정보는 절대 쿠키에 저장하면 안된다.
HttpOnly
자바스크립트에서 쿠키에 접근 불가XSS 공격 방지(XSS 공격을 막으려면 활성화해두는 것이 좋다.)
- 자바스크립트에서 이용 가능한 쿠키들은 XSS를 통해 감청될 수 있다.HTTP전송에만 사용
SameSite(👩🏻🔬실험 중)
CSRF 공격 방지(cross-site 요청 위조 공격)- 요청 도메인과 쿠키 설정된 도메인이 같은 경우만 쿠키 전송
세션
HTTP 세션이란 서버에 세션에 대한 정보(세션 상태, 클라이언트 상태, 세션 데이터 등)를 저장해 놓고, 세션 쿠키(고유한 세션 ID)를 클라이언트에게 주어 서버가 클라이언트를 식별할 수 있도록 하는 것이다. 그래서 브라우저가 종료되기 전까지 클라이언트의 요청을 유지해준다.
보안상 노출되면 안되는 중요한 정보들을 다루기 위해 사용한다. 데이터를 서버에 두기 때문에 쿠키보다 보안에 좋다. 하지만 데이터를 서버에 저장하기 때문에 사용자가 많아지면 서버 부하가 발생할 수 있고, 쿠키보다 속도가 느리다.
세션 특징
- 데이터를 접속한
서버에 저장한다. - 웹 서버에 저장되는 쿠키
(세션 쿠키) 용량 제한 없다.(서버가 허용하는 한)만료 시간 지정가능하지만,브라우저가 종료 시 삭제- 서버에 접속해서
브라우저를 종료할 때까지 인증 상태 유지 - 쿠키의 단점인 트래픽 문제와 보안상 취약점을 해결하기 위해 사용
- 서버에
세션 객체를 생성해서 각 클라이언트 마다고유한 세션 ID를 부여한다.
세션 동작 방식
- 클라이언트가 서버에 페이지 요청
- 서버는 요청의
유효성을 검사하고,세션 객체를 생성해서각 클라이언트마다 고유한 세션 ID를 부여한다. - 서버는 응답 헤더의
쿠키에 세션 ID를 추가해서 응답한다. - 클라이언트는
요청할 때마다 자동으로 세션 ID를 서버에 전달한다. 서버는 요청받은 세션 ID의 유효성을 검사하고, 요청을 처리해서, 응답한다.(상태 유지)
쿠키와 세션 차이점?🚀
1. 데이터 저장 위치
- 쿠키:
클라이언트에 파일로 저장 - 세션:
서버에 저장
2. 보안 (쿠키<세션)
- 쿠키:
클라이언트의 브라우저 로컬에 저장되기 때문에 변질되거나 HTTP 요청 시에 이를 갈취당할 수 있어서보안에 취약하다. - 세션: 쿠키를 이용해서
세션 id만 저장하고, 데이터는서버에서 처리하기 때문에비교적으로 안전
3. 라이프 사이클
- 쿠키: 만료 시점 지정하면
브라우저를 종료해도 계속해서 정보가 남아있다.만료기간에 따라 쿠키 유지된다. - 세션: 만료 시점을 정할 수는 있지만
브라우저가 종료되면 그에 상관없이 삭제
4. 속도 (쿠키>세션)
- 쿠키:
쿠키에 정보가 있기 때문에서버에 요청시 속도가 빠르다. - 세션:
정보가 서버에 있기 때문에처리가 요구되어비교적으로 느리다.
참고
Cookie (MDN)
Set-Cookie (MDN)
웹 스토리지 vs 쿠키 vs 세션(netlify)
알아둬야 할 HTTP 쿠키 & 캐시 헤더(제로초님 블로그)
모든 개발자를 위한 HTTP 웹 기본 지식- 쿠키 (인프런 김영한님 강의)
HTTP 쿠키 (MDN)
쿠키와 세션 (Github 블로그)
쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지) (블로그)
