Cookie

 

Intro

개인화 이슈에서 기인

쿠키가 도입되면서 웹 브라우저는 이전에 접속했던 사용자의 정보를 웹 서버에 전송할 수 있게 되었다.

---

쿠키는 왜 필요한가?

쿠키 미사용 시

로그인

로그인 이후 welcome 페이지 접근

로그인했는데 서버가 기억하지 못한다..

 

HTTP가 stateless한 프로토콜이기 때문이다!

• 클라이언트와 서버가 요청과 응답을 주고 받으면 연결이 끊어진다 (connectionless)
• 클라이언트와 서버는 서로 상태를 유지하지 않는다 (stateless)

 

그렇다고 요청에 사용자 정보를 매번 포함하는 것은 보안상 위험하고 개발자가 매번 처리하기 번거롭다..

 

쿠키 도입

1. 서버는 쿠키를 만들고 브라우저에게 보낸다.

2. 브라우저 내부에는 쿠키 저장소가 있다

 

3. 이후 요청을 보낼 때마다 브라우저는 쿠키 저장소를 뒤져 해당 쿠키를 서버에 보낸다

4. 모든 요청에 쿠키 정보를 자동으로 포함한다

 

 

---

정리

쿠키란?

HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 

브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송.

쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용.

→이를 이용하면 사용자의 로그인 상태를 유지할 수 있다. stateless HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문

 

사용 용도

1. Session management : 인증, 서버에 저장해야 할 로그인, 장바구니 등의 정보 관리
   사용자 로그인 세션 관리 (세션은 쿠키로 구현되어 있다. 서버는 세션 id를 만들어 쿠키로 반환)
2. Personalization: 사용자 선호, 테마 등의 세팅
3. Tracking: 사용자 행동을 기록하고 분석하는 용도
   광고 정보 트래킹 (사용자가 어떤 광고를 보는지)

 

단점 : 쿠키 정보는 항상 서버에 전송된다

• 네트워크 트래픽 추가 유발
• 보안에 민감한 데이터는 저장하면 안된다
• 따라서 최소한의 정보만 사용해야 한다(세션 id or 인증 토큰)

   ※ 서버에 전송하지 않고, 웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지를 사용. (필요시 JS로 꺼내 씀)

과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했지만,
지금은 modern storage APIs를 사용해 정보를 저장하는 걸 권장한다.

모든 요청마다 쿠키가 함께 전송되기 때문에, 성능이 저하되기 때문이다.

정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 
웹 스토리지 API (localStorage와 sessionStorage) 와 IndexedDB를 사용하면 된다.

 

쿠키 전송 대상 범위 줄이기(필터)

1차: Domain(그룹)
예) domain=naver.com

• 도메인 명시할 경우: 쿠키 전송 범위가 명시한 문서 기준 도메인과 서브 도메인을 포함
  ex) domain=example.org를 지정해서 쿠키 생성 → example.org는 물론이고, dev.example.org도 쿠키 접근
• 도메인 생략할 경우: 현재 문서 기준 도메인만 쿠키 전송
  ex) example.org에서 쿠키를 생성하고 domain 지정을 생략 → example.org에서만 쿠키 접근

2차: Path(경로)

이 경로를 포함한 하위 경로 페이지만 쿠키 접근

예) path=/home 지정

    /home, /home/level1, /home/level1/level2 → 가능

    /hello → 불가능

 

쿠키 생명주기

• 만료일이 되면 쿠키 삭제
  Set-Cookie: expires=Sat, 26-Dec-2020 04:39:21 GMT
• 남은 시간 지정(0이나 음수를 지정하면 쿠키 삭제)
  Set-Cookie: max-age=3600 (3600초)

▷ 쿠키 종류

• 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지
• 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지

 

보안을 강화한 쿠키

• Secure
  쿠키는 http, https를 구분하지 않고 전송하는데, Secure를 적용하면 https인 경우에만 전송

• HttpOnly
  HTTP 전송에서만 쿠키 사용.
  자바스크립트로 접근 불가(XSS 공격 방지)

• SameSite
  요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송
  XSRF 공격 방지

 

---

코드로 이해해보기

쿠키 생성

서버가 응답과 함께 Set-Cookie 헤더를 전송.

쿠키는 보통 브라우저에 의해 저장되며,

그 후 쿠키는 같은 서버에 의해 만들어진 요청(Request)들의 Cookie HTTP 헤더 안에 포함되어 전송됨.

 

 

쿠키 활용해보기

request 객체의 header에 있다.

request.headers.cookie

cookie 모듈을 이용해 객체로 parsing

cookies = cookie.parse(request.headers.cookie);

 

 

이런 식인 것이지 실제로 이렇게 쓰진 않는다.

쿠키로 직접 아이디, 비밀번호를 저장하는 대신 sessionId를 주면 로그인 상태를 유지할 수 있다.

문제점: 브라우저에서 그 값을 복사해서 다른 브라우저에 저장해도 로그인이 된다.

 

 

쿠키 삭제

Max-Age를 0 으로 줘서 만료되게 한다.

 

쿠키 옵션

• 쿠키의 라이프타임
  • session cookies: 브라우저 끄면 사라짐 (default)
  • premanet cookies: 껐다 켜도 살아있음
    

    

• path & domain
  

  

  path 옵션: 어떤 path에서 동작하게 할 것인가

 

 

---

 

참고 자료 & 이미지 출처
생활코딩    (이고잉 님)
모든 개발자를 위한 HTTP 웹 기본 지식 (김영한 님)