Cookie

쿠키는 브라우저에 저장되는 문자열로 RFC 6265에서 정의한 HTTP 프로토콜의 일부이다.

HTTP 프로토콜에는 비연결성 (Connectionless)과 비상태성 (Stateless)의 특징이 있다. 모든 사용자의 요청마다 연결과 해제의 과정을 거치며 연결 상태를 유지하지 않고 해제 후에도 상태 정보를 저정하지 않기 때문에 서버의 자원을 크게 절약할 수 있다. 하지만, 이로 인해 사용자를 식별할 수 없기 때문에 같은 사용자의 요청이라도 매번 새로운 사용자로 인식하는 단점이 있다. 이러한 특성들을 보완한 기술이 쿠키와 세션이다.

세션은 쿠키를 이용한다. 브라우저가 서버에 요청을 하면 서버는 세션 아이디를 할당하여 응답시 함께 전달한다. 브라우저는 세션 아이디를 쿠키에 저장하고 매 요청마다 세션아이디를 전달하는 것이다. 서버는 세션 아이디를 바탕으로 사용자를 식별하여 사용자의 데이터를 서버에 저장하여 관리한다.

쿠키는 서버가 사용자의 브라우저에 저장하는 데이터이며 형태는 Key & Value로 구성되고 String으로 이루어져 있다. 4KB 이상의 저장은 불가능하다.

쿠키의 세 가지 목적

1. 세션 관리 (Session management)

• 로그인, 장바구니, 접속 시간 등 서버가 알아야 할 정보 저장

2. 개인화 (Personalization)

• 사용자마다 다른 페이지 보여주기

3. 트래킹 (Tracking)

• 사용자의 행동과 패턴 분석

클라이언트가 서버에 요청을 하면 서버가 응답시 쿠키에 저장하고자하는 정보를 헤더의 Set-Cookie로 전달한다.

Set-Cookie: <cookie-name>=<cookie-value>

클라이언트는 쿠키를 응답받은 후 서버로 전송하는 모든 요청에 저장된 쿠키를 헤더의 Cookie로 전달한다.

Cookie: <cookie-name>=<cookie-value>

서버가 쿠키와 함께 아래와 같은 응답을 클라이언트에 전달했다면

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

클라이언트는 저장된 쿠키를 헤더에 포함해 요청을 보낸다.

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

브라우저가 종료되더라도 쿠키를 유지하고 싶으면 Permanent 쿠키를 이용하면 된다. 쿠키 생성시 Expires & Max-Age 옵션을 추가하면 된다.

• Expires : 쿠키가 만료 될 날짜를 지정
• Max-Age : 현재 시간을 기준으로 얼만큼 유지시킬지 결정

Set-Cookie: yummy_cokie=choco; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

Secure / HttpOnly / Path / Domain / samesite

• 쿠키를 제어하는 옵션
  • Secure : https 프로토콜 상에서 암호화 된 요청일 경우에만 전송
  • HttpOnly : Cross-site 스크립팅 공격을 방지한다. JS의 document.cookie API에서 접근이 불가능
  • Domain & Path : 쿠키를 특정 Domain & Path에서만 제한하고 싶은 경우, 하위 도메인에서도 동작함
  • samesite : XSRF 보호 토큰 없이 크로스 사이트 요청 위조를 막을 수 있는 옵션, samesite=strict 옵션이 있는 쿠키는 외부에서 요청을 보낼때 쿠키 전송이 절대 일어나지 않는다

쿠키의 용도

• 로그인 상태 유지
• 7일간 다시 보지 않기 (쿠키의 날짜를 기록하여 다시 방문하였을때 시간차를 이용)
• 최근 검색 상품 추천
• 장바구니

document.cookie 프로퍼티를 이용하면 브라우저에서 쿠키에 접근이 가능하며 읽고 쓰기가 가능하다. 쿠키의 이름과 값엔 특별한 제약이 없으나 유효성을 일관성 있게 유지하기 위해 반드시 내장 함수 encodeURIComponent를 사용하여 이스케이프 처리해줘야 한다.

// 쿠키 읽기
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

// 쿠키 쓰기
document.cookie = "user=John"; // 이름이 'user'인 쿠키의 값만 갱신함
alert(document.cookie); // 모든 쿠키 보여주기


// 특수 값(공백)은 인코딩 처리해 줘야 합니다.
let name = "my name";
let value = "John Smith"

// 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다.
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Session

쿠키만을 사용하여 아이디, 비밀번호를 쿠키에 저장한다면 로그인 상태의 유지는 가능하나 보안상 큰 문제가 발생한다. Session은 비밀번호와 같은 인증 정보를 쿠키에 저장하지 않고 사용자 식별자인 JSESSIONID를 저장한다. 서버에는 인증 정보 및 ID에 해당하는 로그인 상태, 시간, 만료기한 등의 정보를 저장한다. 서버는 보안상의 문제로 인증에 Session을 사용한다.

세션의 동작 순서

1. 클라이언트가 서버에 요청을 보낸다 (첫 요청은 세션 ID가 없음)
2. 서버에서 쿠키 값에 session id 없는 것을 확인하고 발급하여 응답
3. 클라이언트는 전달받은 session id값을 요청마다 쿠키 헤더에 넣어서 요청
4. 서버는 session id를 확인하여 사용자 식별
5. 클라이언트가 로그인을 요청 할 때 마다 서버는 새로운 session id를 발급하여 응답
6. 클라이언트 종료시 session id 제거, 서버에서 session 제거

세션 특징

• 세션 아이디는 브라우저 단위로 저장되고 삭제된다
• 로그아웃 후 로그인시 새로운 사용자로 인식하여 새로운 세션이 생성된다
• 사용자가 요청 할 때 마다 필요한 정보를 세션에 담아두면 DB에 접근할 필요가 없어 효율적이다

보안 세션 아이디를 훔친다면 사용자 정보를 사용하여 로그인이 가능하다. https로 통신하는것이 보안상 좋으며 쿠키와 마찬가지로 세션의 옵션을 secure true로 하면 https에서만 요청/응답이 가능하며 HttpOnly true로 하면 JS를 통하여 세션 쿠키를 사용할 수 없도록 강제가 가능하다

프론트에서 우아하게 쿠키 조회하기

// 쿠키 조회
const cookies = Object.fromEntries(
  document.cookie.split(';').map((cookie) => cookie.trim().split('=')),
);

// 원하는 key를 확인하고 싶은 경우
const isExistCookie = Object.prototype.hasOwnProperty.call(cookies, [target-cookie]);

참고

MDN 핸드북 프론트에서 우아하게 쿠키 조회