[Node.js] 쿠키(Cookie) 사용하기

HTTP 쿠키(Cookie)

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로

브라우저가 동일 서버에 재요청 시 저장된 데이터 조각을 함께 전송하여

쿠키는 두 요청이 동일한 브라우저에서 왔는지 판단할 때 사용

stateless 특징을 가지고 있는 http 프로토콜에서 상태 정보를 기억시켜주는 역할

*stateless 특징 참고: 2023.01.09 - [HTTP] - [HTTP] 웹 기본 지식 정리 - HTTP 기본

 

목적

• 세션 관리(Session management) - 서버에 저장해야할 정보 관리(로그인, 장바구니 등)
• 개인화(Personalization) - 사용자의 선호 언어나 테마 유지
• 트래킹(Tracking) - 사용자의 행동을 분석하거나 기록

 

쿠키 만들기

http 요청 수신 시, 서버는 Set-Cookie 헤더를 응답메시지에 세팅하여 전송

→ 클라이언트에게 쿠키를 저장하라고 전달

 

쿠키는 같은 서버에 만들어진 요청 http 헤더 안에 포함되어 전송됨

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);

▷ 기본 웹 서버 작성한 코드 cookie.js

▶ Set-Cookie 객체를 key-value 형식으로 입력

 

 

실행한 웹 페이지에서 개발자 도구(F12) → Network → localhost → Headers 확인

▶ 응답헤더에 Set-Cookie라는 두 개의 쿠키 추가됨 

 

 

Reload 후, 개발자 도구(F12) → Network → localhost → Cookies 확인

- 웹 브라우저는 reload할 때마다 저장된 쿠키 값을 Cookie라는 헤더 값을 통해 서버로 전송

 

쿠키 읽기

클라이언트가 가지고 있는 쿠키 정보를 서버에 전달했을 경우, 서버는 쿠키를 읽어야 함

 

서버 측에서는 request.header.cookie로 쿠키 읽기 가능

→ 쿠키 여러개인 경우, 문자열로 그대로 출력됨

→ 쿠키를 핸들링하는 모듈 이용

 

※ 자세한 내용 참고

https://www.npmjs.com/package/cookie?activeTab=readme 

cookie

> npm install -s cookie

▷ 터미널에서 쿠키 모듈 설치

 

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('Cookie!!');
}).listen(3000);

▶ 문자열로 나오는 쿠키를 파싱하여 객체화(parse 사용) - 쿠키 다루기 편리

▶ if문 - 쿠키 값이 없을 경우는 undefined로 파싱하는데 오류 발생하므로 조건 설정

 

Session 쿠키 VS Permanet 쿠키

Session 쿠키 - 웹 브라우저 실행하는동안만 유효

Permanet 쿠키 - 영속적인(지속적인) 쿠키로 웹 브라우저가 종료되어도 살아있음

* 위 코드에서  작성한 쿠키는 일반적인 Session 쿠키

 

Permanet 쿠키 작성

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':[ 
            `Permanent=cookies; Max-age=${60*60*24*30}` // 영구적인 쿠키 - 30일 설정
        ]
    });
    response.end('Cookie!!');
}).listen(3000);

▷ Expires 또는 Max-age 옵션 추가 작성

▶ Expires=Wed, 21 Oct 2015 07:28:00 GMT; - 만료날짜 작성

▶ Max-Age=60; - 현재 시점으로부터 쿠키가 살아남는 시간(초) 작성

 

쿠키 옵션

(1) Secure

- 웹 브라우저와 웹 서버가 https를 통해 통신하는 경우에만 쿠키 전송(http는 x)

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':[
            'Secure=Secure; Secure' // Secure 옵션을 포함한 쿠키 작성
        ]
    });
    response.end('Cookie!!');
}).listen(3000);

▶ 쿠키 이름과 값 뒤에 Secure 추가 작성

 

(2) HttpOnly

- 웹 브라우저와 웹 서버가 통신할 때만 쿠키 전송 가능

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':[
            'HttpOnly=HttpOnly; HttpOnly' // HttpOnly 옵션을 포함한 쿠키 작성
        ]
    });
    response.end('Cookie!!');
}).listen(3000);

▶ 쿠키 이름과 값 뒤에 HttpOnly 추가 작성

▶ 웹 브라우저에서 자바스크립트 코드를 통해 쿠키 접근 불가능

 

(3) Path

- 해당 경로에서 동작하는 쿠키로 하위경로까지 가능

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':[
            'Path=Path; Path=/cookie' // Path 옵션을 포함한 쿠키 작성
        ]
    });
    response.end('Cookie!!');
}).listen(3000);

▶ 쿠키 이름과 값 뒤에 Path=값 설정

▶ /cookie 에서 동작 - 하위 경로도 가능

 

(4) 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':[
            'Domain=Domain; Domain=o2.org' // Domain 옵션을 포함한 쿠키 작성
        ]
    });
    response.end('Cookie!!');
}).listen(3000);

▶ 쿠키 이름과 값 뒤에 Domain=값 설정

▶ .o2.org 도메인에서 동작(.생략) - ex) test.o2.org 에서 동작 가능

 

 

* 생활코딩 Node.js-쿠키와인증-3, Node.js-쿠키와인증-4 ,Node.js-쿠키와인증-6, Node.js-쿠키와인증-7, Node.js-쿠키와인증-8 강의  기반으로 작성됨