[Cookie]

쿠키

MDN definition: An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser. The browser may store it and send it back with later requests to the same server. Typically, it's used to tell if two requests came from the same browser — keeping a user logged-in, for example. It remembers stateful information for the stateless HTTP protocol. (mzl.la/37PnBMS)

 

쿠키는 http 프로토콜에 포함된 기술로, 웹브라우저-웹서버가 서로 주고 받는 정보다. 어떤 웹사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 이 쿠키라는 작은 데이터 조각을 우리는 브라우저 설정을 통해 확인할 수 있다.

 

쿠키는 3가지 목적으로 사용되는데, 첫 째는 로그인, 장바구니, 게임 점수 등 서버가 기억해야할 내용과 관련된 session management고, 둘 째는 사용자 선호(user preferneces), 테마 등 설정과 관련된 personalization, 마지막으로 사용자 행동을 기록하고 분석하는 tracking이 있다. 고로, 쿠키는 사용자 인증(user auth)에 사용된다.

 

어떤 도메인에 대한 쿠키가 존재한다면, 웹 브라우저는 해당 도메인에게 http요청을 할 때마다 자동으로 쿠키를 함께 전달할 수 있다. 다시 말해, 쿠키는 stateless해서 기억해야할 정보를 담을 수 없는 http를 보안하기 위해 개발된 서버가 웹 브라운저에 정보를 저장하고 불러올 수 있는 수단이라고 할 수 있다.

 

//http 무상태성을 보완하기 위해 쿠키가 사용되기 시작.. text file을 함께 전송..

//쿠키를 세션에 담아서 암호화해서 사용하는 것이 안전

 

 

 

쿠키 이용법

 

쿠키의 특성으로 삭제하지 않는 이상 사라지지 않는다는 점이 있다. 따라서 사용자 선호, 테마, 장바구니 등 장시간 보전해야하는 정보를 저장하는데 적합하다.

 

로그인 로그아웃을 위한 인증정보 또한 쿠키를 이용해 저장하는 경우도 흔히 볼 수 있다. "login status" 등을 이용해 저장할 수 있지만, 브라우저 설정창에서 쉽게 노출이 될 수 있기 때문에 보안상 위험하다. 따라서 쿠키는 알아보기 힘든 해싱 등 암호화 처리가 돼있다.

 

 

쿠키 생성과 전달 방법

 

쿠키가 클라이언트에 저장되고 자동으로 요청에 담겨지는 과정을 보여주는 그림이다.

 

 

위에서 말 한 것처럼, 쿠키는 서버가 클라이언트에 전달하는데서 시작한다.

 

(출처 MDN)

 

yummy_cookie와 tasty_cookie 두 개의 쿠키를 전달한다고 가정해보자. 코드는 아래와 같을 수 있다.

 

var http = require('http');

http.createServer(function(req, res) {
  response.writeHead(200, {
    'Set-Cookie':['yummy_cookie=choco','tasty_cookie=strawberry']
  });
  response.end('Cookie!!');
}).listen(3000);

 

응답 메시지로 writeHead를 이용해 헤더를 써줄 수 있다. 위 처럼 하나 이상인 복수의 쿠키인 경우, 배열을 이용해 나열 하면 된다. 위의 응답이 단 한번이라도 보내지면, 그 후에 발생되는 요청에는 해당 cookie값이 심어져있는 것을 확인 할 수 있다.

 

 

웹 브라우저는 이제 set-cookie로 구워진, 저장된 쿠키값을 cookie라고 하는 헤더값을 통해서 서버로 전송할 수 있게된다.

 

 

서버가 응답헤더 안에 set-cookie라는 프로퍼티에 쿠키 이름, 값, 경로 등의 옵션을 저장하고, 쿠키가 담긴 응답을 받은 클라이언트는 응답헤더에 존재하는 set-cookie를 확인하게 된다. 이 후에 발생되는 매 요청시마다 쿠키의 이름과 값을 서버에 전달하게 된다. 이렇게 서버가 쿠키를 저장하면, 이후로 해당 웹사이트를 이용할 때, 그림에서 초록색 박스처럼 매 요청에 자동으로 쿠키가 함께 전송된다.

 

**cookie 관련 npm

cookie vs. cookie-parser

쿠키를 객체로 저장할 수 있도록 도와준다.

 

쿠키 옵션

 

Domain	서버와 요청의 도메인이 일치하는 경우 쿠키 전송
Path	서버와 요청의 세부경로가 일치하는 경우 쿠키 전송
MaxAge or Expires	쿠키의 유효기간 설정, 쿠키는 클라이언트 브라우저에 저장되기 때문에, MaxAge(유효기간) 내에는 쿠키를 탈취가 가능하다.
HttpOnly	스크립트의 쿠키 접근 가능 여부 결정, <script>태그로 접근이 가능해 XSS공격에 취약하기 때문에 민감한 정보는 담지 않아야 한다.
Secure	HTTPS 프로토콜에서만 쿠키 전송 여부 결정
SameSite	CORS 요청의 경우 옵션 및 메서드에 따라 쿠키 전송 여부 결정, CSRF 공격

 

expressjs.com/en/5x/api.html#res.cookie

Express 5.x - API Reference

www.youtube.com/watch?v=1emZgLiGE4s