[Cookie] Cookie

왜 쿠키?

 

http 통신은 stateless하다. 상태를 저장하고 있지 않으므로 한번 res를 보내거나 req를 응답하면 전에 무슨 작업을 했는지 알 수가 없다. 이는 통신의 가용성을 높이기 위해 일부러 이런 방식으로 http 통신이 설계되어 있다.

 

stateful하게 작업하기 위해 브라우저에 cookie를 저장하는 것이다.

express에서 setCookies 메서드를 사용해보았으니 알겠지만

 

쿠키는 서버의 req에 Set-Cookie 헤더를 실어 보내면 클라이언트 측의 브라우저에 cookie가 저장된다.

그리고 해당 클라이언트가 같은 서버에 cookie를 실어보내면 서버는 해당 cookie로 인해 특정 클라이언트를 식별할 수 있게 된다.

 

(서버 => 클라이언트, req에 Set-Cookies를 붙여 보냄)

HTTP /1.1 200 OK

Date: xxx

Server: apache

<Set-Cookies: sid=12345; path=/;exires=Wed, => xxx>

 

(클라이언트 => 서버, res에 cookie를 실어보냄 => 서버가 클라이언트 식별 가능)

GET /index.html HTTP /1.1

Host: www.darrenkwon.com 

Cookie: sid=12345;

 

 

express는 이 작업을 좀 더 쉽게 해주려고 setCookies 같은 메서드를 제공하는 것이다.

 

---

vanilla node.js로 간단한 cookie를 만들어보자. set-Cookie를 통해 cookie를 세팅할 수 있다.

우선 쿠키가 서버측에서 클라이언트에게 부여하는 것임을 알아두자. 그래서 res를 통해 쿠키를 설정해야 한다.

 

cookie

cookie 패키지의 주요 목적은 문자열인 cookie를 parsing하여 다루기 쉬운 객체로 만드는 겁니다.

 

const http = require("http");
const cookie = require("cookie");

const Server = http.createServer((req, res) => {
  res.writeHead(200, {
    "Set-Cookie": [
      "first=Yeah; Secure; HttpOnly;",
      "second=Nope; Domain=test.o2.org",
      `third=Wow; Max-Age=${60 * 30}; Path=/cookie`
    ]
  });

  // req.headers.cookie에 cookie의 값이 문자열로 담겨 있습니다.
  console.log(req.headers.cookie);
  const cookieParsed = cookie.parse(req.headers.cookie);

  // 쿠키를 parse하여 다루기 쉬운 객체로 만들어준다.
  setTimeout(() => console.log(cookieParsed), 5000);

  res.end("end of write");
});

const PORT = 3000;

Server.listen(PORT);

console.log(`Success on : http://localhost:${PORT}`);

 

 

Cookie 속성

 

Session, Permanent

웹브라우저를 끄면 사라지는 휘발성 쿠키를 Session 쿠키라고 합니다. 웹브라우저를 꺼도 사라지지 않는 쿠키를 Permanent 쿠키라고 합니다. 위와 같이 평범하게 Set-Cookie를 이용하면 세션 쿠키가 됩니다. Permanent 쿠키를 생성하기 위해서는 Exprires나 Max-Age 값을 주어야 한다.

 

"permanent cookies expire at a specific date (Expires) or after a specific length of time (Max-Age)."

 

"Set-Cookie": ["first=Yeah", "second=Nope", `third=Wow; Max-Age=${3000}`]

"Set-Cookie": ["id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly"]

 

이 외에 여러 옵션들이 존재합니다. Max-age나 Expires처럼 ;(세미 콜론)으로 구별하고 옵션을 주면 됩니다.

 

Secure & HttpOnly

Secure는 웹브라우저와 웹서버가 https로 통신하는 경우만 웹브라우저가 쿠키를 서버로 전송하는 옵션입니다. 

HttpOnly는 자바스크립트의 document.cookie를 이용해서(즉, Dom을 이용해서) 쿠키에 접속하는 것을 막는 옵션입니다. 쿠키를 훔쳐가는 행위를 막기 위한 방법입니다.

 

위 두 옵션을 모두 준 예제는 다음과 같습니다.

"Set-Cookie": ["id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly"]

 

path & domain

Path는 특정 디렉토리에서만 쿠키가 활성화되기 원할 때 사용합니다. 아무런 값을 주지 않으면 / (최상위 디렉토리)로 처리되어 모든 디렉토리에서 쿠키를 사용합니다.

domina은 해당 도메인으로 접속했을 때만 쿠키를 사용하도록 설정합니다.

 

크롬 개발자 도구에는 이 모든 사항들을 체크할 수 있습니다.

Domain, Path, Session, Size, HttpOnly, Secure를 확인할 수 있습니다.

 

 

여담으로, Cookie 외에도 indexed DB나 localStorage를 이용하는 방법이 최근에는 사용되고 있습니다. localStorage는 예전에 다룬 적이 있으니 참고하길 바랍니다.