생활코딩 웹 제작 스터디 [Cookie]

-쿠키?

쿠키는 서버가 사용자의 웹 브라우저에게 전달하는 작은 데이터 조각. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

HTTP 쿠키 - HTTP | MDN

-쿠키의 목적 

1. 세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리

2. 개인화(Personalization)사용자 : 선호, 테마 등의 세팅

3. 트래킹(Tracking)사용자 : 행동을 기록하고 분석하는 용도

 

-쿠키 만들기 (NodeJS 환경 기반, 생활코딩 Web2-nodejs 참조)

var http = require('http');
http.createServer(function(request, response){
    response.end("Cookie!");
}).listen(3000);

JavaScript파일에 위와 같은 내용을 삽입하면, 아래의 그림처럼 localhost:3000에서 response.end 코드에서 삽입한 내용이 출력됩니다.

쿠키 생성을 위한 환경 만들기

이후, 빈공간 우클릭을 통해 나오는 도구에서 '검사'를 클릭합니다. Network탭을 클릭하여 현재 보고있는 페이지의 네트워크 상태를 감청할 수 있습니다. Request / Response Header 내용 및 쿠키 상태를 확인할 수 있습니다. 현재는 쿠키를 생성하지 않은 상태.

쿠키를 생성하기 전 검사 도구의 네트워크 창

본격적으로 쿠키를 만들어봅시다. response.writeHead 메서드를 사용하고 인자로는 Status Code (200), 쿠키값을 넣어주면 됩니다. 하지만 복수의 쿠키는 인자로 배열을 주는 것이 약속이기 때문에 아래 코드의 네번째 줄과 같이 배열로써 쿠키 값을 넣어주었습니다. 추가로 이전 화면과의 차이를 위해 "Create Cookie!"로 문장을 수정하여 삽입하였습니다. 

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

위의 코드를 실행시킨 화면은 아래와 같습니다.

쿠키를 생성한 이후 검사 도구의 네트워크 창

Response Headers 부분(서버 측)에 Set-Cookie로 쿠키 값이 설정된 것을 볼 수 있습니다. 즉, 현재 서버가 Set-Cookie를 웹 브라우저에게 보낸 상태이다. 하지만 여기서 위에서 추가한 writeHead부분을 주석처리 한다면 어떻게 될까요? 아래의 그림을 봅시다.

writeHead 주석처리 이후 웹 브라우저를 새로고침 한 네트워크 상태

Response Headers(서버 측)은 쿠키를 전송하고 있지 않습니다. 주석처리를 했기 때문입니다. 하지만 Request Headers(클라이언트 측)의 Cookie 헤더를 보시면 쿠키 정보가 저장이 되어 요청하고 있는 것을 알 수 있습니다. 즉, 저장된 쿠키값을 쿠키라는 헤더값을 통해서 서버로 전송하고 있는 상태입니다. 

 

-쿠키 읽기(사용할 수 있게 객체화 시켜준다)

console.log를 통해 request.headers.cookie를 찍어보았고, 성공적으로 yummy_cookie=choco; tasty_cookie=strawberry 값을 얻을 수 있었습니다. 쿠키를 읽기 위한 방법으로 https://stackoverflow.com/questions/3393854/get-and-set-a-single-cookie-with-node-js-http-server 를 참고하여 parseCookie 함수를 이용할 수도 있지만 npm(자바스크립트 언어의 패키지 관리자)의 쿠키를 활용하면 훨씬 편합니다.

Get and Set a Single Cookie with Node.js HTTP Server

npm의 cookie(https://www.npmjs.com/package/cookie)를 이용하기 위해 먼저 npm install -s cookie 명령어를 터미널에 입력하여 패키지를 설치합니다. 이후, 아래의 코드처럼 입력합니다.

var http = require('http');
var cookie = require('cookie'); // npm cookie 패키지의 cookie 모듈을 불러옴
http.createServer(function(request, response){
    console.log(request.headers.cookie); 
    var cookies = cookie.parse(request.headers.cookie);
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie' : ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end("Create Cookie!");
}).listen(3000);

cookie 모듈을 불러오기 위해 2번째 줄의 코드와 같이 타이핑합니다. console.log(request.headers.cookie);의 실행 결과값이었던 yummy_cookie=choco; tasty_cookie=strawberry의 값을 cookie.parse 메서드의 인자값으로 넣어줍니다. 이후 console.log(cookies);를 실행하면 { yummy_cookie: 'choco', tasty_cookie: 'strawberry' }처럼 중괄호로 감싸진 형태(객체)로 출력되는 것을 알 수 있습니다. (아래의 그림 참조)

console.log를 통한 쿠키값 확인

객체로 출력됐다는 것은 값에 접근할 수 있다는 말이기 때문에 cookies.yummy_cookie를 console.log로 확인해보면 choco라는 값을 얻을 수 있습니다. 추가로 cookie.parse메서드는 쿠키가 웹 브라우저에서 삭제되면 에러를 발생시키기 때문에 if 문을 사용하여 에러처리를 수행했습니다.

var http = require('http');
var cookie = require('cookie');
http.createServer(function(request, response){
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined){
        cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie' : ['yummy_cookie=choco', 'tasty_cookie=strawberry']
    });
    response.end("Create Cookie!");
}).listen(3000);

 

-Session vs Permanent

* Session : 웹 브라우저가 꺼지면 사라지는 휘발성 쿠키

* Permanent : 웹 브라우저가 꺼져도 사라지지 않는 비휘발성 쿠키 

var http = require('http');
var cookie = require('cookie');
http.createServer(function(request, response){
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined){
        cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie' : [
            'yummy_cookie=choco',
            'tasty_cookie=strawberry', 
            `permanent=cookies; Max-Age=${60*60*24*30}`] // permanant cookie , Max-Age 옵션값을 통해 설정이 가능하다.
    });
    response.end("Create Cookie!");
}).listen(3000);

 

-Secure & HttpOnly (웹 브라우저가 https 통신을 할 때만 쿠키를 전송하는 방법)

* Secure : Https 환경에서만 쿠키값이 전송

* HttpOnly : Javascript로 쿠키에 대한 접근을 방지하기 위한 방법

var http = require('http');
var cookie = require('cookie');
http.createServer(function(request, response){
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined){
        cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie' : [
            'yummy_cookie=choco',
            'tasty_cookie=strawberry', 
            `permanent=cookies; Max-Age=${60*60*24*30}`, // permanant cookie , Max-Age 옵션값을 통해 설정이 가능하다.
            'secure=secure; Secure', // https로만 접근했을 때 쿠키 전송
            'httponly=httponly; HttpOnly' // 자바스크립트로의 접근을 방지
        ] 
    });
    response.end("Create Cookie!");
}).listen(3000);

 

-Path & Domain

* Path : 특정 경로에서만 쿠키가 발생하도록 하는 것

* Domain : 특정 도메인에서만 쿠키가 발생하도록 하는 것

var http = require('http');
var cookie = require('cookie');
http.createServer(function(request, response){
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined){
        cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies);
    response.writeHead(200, {
        'Set-Cookie' : [
            'yummy_cookie=choco',
            'tasty_cookie=strawberry', 
            `permanent=cookies; Max-Age=${60*60*24*30}`, // permanant cookie , Max-Age 옵션값을 통해 설정이 가능하다.
            'secure=secure; Secure', // https로만 접근했을 때 쿠키 전송
            'httponly=httponly; HttpOnly', // 자바스크립트로의 접근을 방지
            'path=path; Path=/cookie', // 특정 경로에서만 발생하는 쿠키
            'domain=domain; Domain=o2.org' // 특정 도메인에서만 발생하는 쿠키
        ] 
    });
    response.end("Create Cookie!");
}).listen(3000);