쿠키(Cookie)

HTTP 프로토콜

 

HTTP 프로토콜은 Connectionless, stateless 한 특성을 가지고있다. 

 

connectionless

• HTTP는 먼저 클라이언트가 요청(request)을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답(response)을 보내고 접속을 끝는 특성이 있다.
• HTTP가 tcp위에서 구현되었기 때문에 네트워크 관점에서 keep-alive 옵션으로 connectionless의 연결비용을 줄이는 것을 장점으로 비연결지향이라 한다.

stateless

• 통신이 끝나는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.

쿠키(Cookie)란?

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

 

쿠키 특징

• 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되도 인증이 유지
• 클라이언트의 상태 정보를 로컬에 저장했다가 참조
• 클라이언트에 300개 까지 저장가능, 하나의 도메인당 20개의 값만 가짐
• 하나의 쿠키 값은 4KB까지 저장
• Response Header에 set-cookie속성을 사용하면 클라이언트에 쿠키를 만듬
• 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청(Request)시에 Request Header를 넣어 자동으로 서버에 전송

쿠키 구성요소

set-cookie

const setCookie = (name, value, options) => {
	options = {
     path: '/',
     ...options
    }
if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

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

 

express에서 쿠기설정

res.cookie

res.cookie(쿠키이름, 쿠키이름에 담을 값, {옵션}) 

 

cookie('table', 'paper', {옵션})

 

post: {
  res.cookie('name', 'name', {옵션}) 
  res.status(200).send()
}

Options

domain  쿠키에 접근 가능한 도메인을 지정한다.

{domain: '.mydomain.com'}

 

encode 쿠키 값 인코딩에 사용되는 동기 함수이다. (default, encodeURIComponent)

{domain: '.mydomain.com'}

 

expires 쿠키 유효 기간을 설정한다.

{expires: Tue, 19 Jan 2038 03:14:07 GMT}

let data = Data.now();
date = date.toUTCString()
{expires: date}

 

httpOnly 서버 요청때에만 쿠키가 전송되도록 설정하고, 쿠키를 훔쳐가는 행위를 막기 위한 방법이다.

{httpOnly: true}

 

maxAge 만료시간을 초 단위로 설정한다.

{maxAge: 5000}

 

path 웹 브라우저가 쿠키값을 전송할 URL을 지정한다.

{path: '/id'}

 

secure 웹서버가 HTTPS로 통신하는 경우만 웹 브라우저가 쿠키를 서버로 전송한다.

{secure: true}

 

sameSite 서로 다른 도메인간의 쿠키 전송에 대한 보안 설정(none, strict, lax)

{sameSite: true}

 

쿠키 동작 방식

1. 클라이언트가 페이지를 요청
2. 서버에서 쿠키를 생성
3. HTTP 헤더에 쿠키를 포함시켜 응답
4. 브라우저가 종료되도 쿠키 만료 기간이 있다면 클라이언트에 보관
5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답

쿠키 사용 예시

• 세션관리 : 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등 정보 관리(자동 로그인, ID/PW 저장)
• 개인화 : 사용자 선호, 테마 등 셋팅
• 트래킹 : 사용자 행동을 기록하고 분석하는 용도

출처

interconnection.tistory.com/74 

expressjs.com/ko/api.html#res.cookie

ko.javascript.info/cookie