JArchive 프로그래밍 일기

쿠키란?

서버가 사용자의 웹브라우저에게 보내는 작은 데이터 조각.

인증, 개인화, 트래킹을 위해 쓰인다. 

쿠키의 용도 

세션 관리 : 서버에 저장할 로그인, 게임 스코어 등의 정보 관리 

개인화 : 사용자 선호, 테마 등의 세팅

트래킹 : 사용자 행동 기록 및 분석 

MDN 에서 http cookie를 찾아본다. 

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

쿠키 생성

쿠키는 서버가 사용자에게 응답할 때 실어보내는 것이므로, response의 헤더쪽 안에 작성한다. 

key-value 형태로 여러 쿠키를 보낼 수 있다.

쿠키의 Name은 yummy_cookie이고 Value는 choco 이다. (크롬 기준, F12를 눌러서 개발자 도구의 Network에서 확인해보자.)

var http = require('http');

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

쿠키 읽기

생성한 쿠키를 웹브라우저가 서버쪽으로 쿠키를 다시 요청하는 것을 확인해보자. 

쿠키를 다루는 NPM 모듈이 있는지 검색해보자.

npm install cookie --save 로 cookie 모듈을 설치한다. 

쿠키는 요청의 헤더 안에 있다. 

아래와 같이 request의 headers에서 cookie를 가져온다. 

cookie의 parse() 함수를 이용하여 데이터를 파싱한다. parse()는 undefined를 처리 못하는 함수이므로 if문 내에서 처리한다. 

response.writeHead() 안에 쿠키 값을 여러개 넣을 수 있다. 

var http = require('http');
var cookie = require('cookie');

http.createServer(function(request, response){
    console.log(request.headers.cookie);

    if(undefined !== request.headers.cookie){
        var cookies = cookie.parse(request.headers.cookie);
    }

    console.log(cookies.yummy_cookie);
   
   response.writeHead(200, {
        // 쿠키를 key-value 형태로 생성한다. 
        'Set-Cookie':['yummy_cookie=choco', 
                    'tasty-cookie=strawberry'
        ]
    })
    response.end('Cookie!!');
    
}).listen(3000);

[ Session 쿠키와 Permanent 쿠키 ]

Session 쿠키 : 웹 브라우저를 종료하는 순간 사라진다.

Permanet 쿠키: 쿠키가 살아있는 기간을 정할 수 있어서, 웹 브라우저 종료에 영향을 받지 않는다.

Expires, Max-Age 와 같은 설정이 필요하다. 둘 중 하나를 쓰면 된다.   

Expires : 쿠키 소멸 시점을 명시한다. (예시 : 2020년 4월 20일까지 살아있어라.)

Max-Age : 현재 부터 얼마동안(1시간, 1달..) 살아있을지 '기간'을 명시한다. 

var http = require('http');

http.createServer(function(request, response){
    response.writeHead(200, {
        'Set-Cookie':['yummy_cookie=choco', 'tasty_cookie=strawberry']
    })

    console.log(request.headers.cookie);

    if(undefined !== request.headers.cookie){
        var cookies = cookie.parse(request.headers.cookie);
    }

    //console.log(cookies.yummy_cookie);
    response.writeHead(200, {
        // 쿠키를 key-value 형태로 생성한다. 
        'Set-Cookie':['yummy_cookie=choco', 
                    'tasty-cookie=strawberry',
                    `Permanent=cookies; Max-Age=${60*60*24*30}`
        ]
    })
    response.end('Cookie!!');
}).listen(3000);

자바스크립트 변수를 넣기 위해 ( ` ) 그레이브 엑센트를 썼다. 

[ 쿠키 옵션 ]

1. Secure

웹브라우저가 HTTPS를 사용하는 경우에만 쿠키를 전송한다는 뜻이다. 

'Secure=Secure; Secure'

쿠키의 이름과 값이 둘다 Secure이고, 끝에 붙인 Secure 가 중요한 키워드이다. 

2. HttpOnly

웹브라우저와 웹서버가 통신할 때 만 쿠키를 발행하는 것이다. 

자바스크립트를 통해서도 쿠키값을 읽을 수 있다. 이를 방지하기 위해서 Http를 이용하여 통신할 때만 쿠키가 보이도록 한 것이다. 

var http = require('http');
var cookie = require('cookie');

http.createServer(function(request, response){
    console.log(request.headers.cookie);

    if(undefined !== request.headers.cookie){
        var cookies = cookie.parse(request.headers.cookie);
    }

    //console.log(cookies.yummy_cookie);
    response.writeHead(200, {
        // 쿠키를 key-value 형태로 생성한다. 
        'Set-Cookie':['yummy_cookie=choco', 
                    'tasty-cookie=strawberry',
                    `Permanent=cookies; Max-Age=${60*60*24*30}`,
                    'Secure=Secure; Secure',
                    'HttpOnly=HttpOnly; HttpOnly'
        ]
    })
    response.end('Cookie!!');
}).listen(3000);

[ 쿠키 확인 하기 ] 

Chrome 브라우저를 기준으로 F12 개발자도구를 열고 Console에서 

document.cookie를 입력하면 쿠키 데이터를 확인할 수 있다. 

3. path

특정 디렉토리에서만 쿠키가 활성화되도록 하고싶을 때 사용한다. 

(그 디렉토리 하위에서도 활성화된다. )

쿠키에 Path를 추가해본다. 

Path값은 /cookie로 한다.

var http = require('http');
var cookie = require('cookie');

http.createServer(function(request, response){
    console.log(request.headers.cookie);

    if(undefined !== request.headers.cookie){
        var cookies = cookie.parse(request.headers.cookie);
    }

    console.log(cookies.yummy_cookie);
    response.writeHead(200, {
        // 쿠키를 key-value 형태로 생성한다. 
        'Set-Cookie':['yummy_cookie=choco', 
                    'tasty-cookie=strawberry',
                    `Permanent=cookies; Max-Age=${60*60*24*30}`,
                    'Secure=Secure; Secure',
                    'HttpOnly=HttpOnly; HttpOnly',
                    'Path=Path; Path=/cookie'
    ]
    });
    response.end('Cookie!!');
}).listen(3000);

http://localhost:3000/로 접속해보자. (루트 디렉토리로 접속) 

Response Cookies 를 보자. (서버의 응답 쿠키들)

아래와 같이 Path라는 이름의 쿠키가 추가되었고, Path값이 /cookie 임을 확인할 수 있다. 

'Set-Cookies' 코드 전체를 주석처리 하고 서버를 재시작해보자. 

http://localhost:3000/로 접속해보자.  Path라는 이름의 쿠키가 안보인다. 

다시 http://localhost:3000/cookie로 접속해보자. Path라는 쿠키가 보인다. 

/cookie/sub 디렉토리에서도 Path라는 쿠키가 보인다. 즉, /cookie의 하위 디렉토리에서도 보인다는 것.

4. domain 

특정 도메인 에서만 쿠키를 살아남도록 하는 옵션이다.