[Node.Js] 섹션 1. cookie

1-1. cookie 1 : intro

cookie : 방문한 웹사이트에서 생성된 파일

인터넷 사용정보를 저장하기 때문에 쿠키를 사용하면 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하며 지역 관련 콘텐츠를 제공할 수 있다.

 

cookie는 사용자마다 다른 상태를 유지할 수 있다.

검사 → resources → cookie를 삭제하면 count가 0으로 초기화되는 것을 확인할 수 있다.

cookie의 response headers에서 set-cookie를 통해 cookie의 값을 알 수 있다.

node.js를 이용해서 set-cookie의 count에 +1을 하라고 명령하면 웹 브라우저는 명령을 따라 값을 바꾸고 다음 접속에는 값이 바뀌게 되는 것이다.

 

1-2. cookie 2 - counter

var express = require('express');
var app = express();
app.listen(3003, function(){console.log('Connected 3003 port!!!');
});

기본 템플릿이다.

 

var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
app.use(cookieParser());
app.get('/count', function(req, res) {
	res.cookie('count', 1);
	res.send('count : '+req.cookies.count);
});
app.listen(3003, function(){console.log('Connected 3003 port!!!');
});

cookie를 사용하기 위해 추가한 코드이다.

웹서버에서 웹브라우저에 응답할 때 카운트라고 하는 쿠키의 값을 1을 세팅해서 웹브라우저에 보낸다.

set-cookie의 값에 count=1이라는 쿠키 값이 추가되었다.

localhost:3003으로 접속하게 되면 쿠키는 count=1이라는 값을 전송하게 된다.

 

res 안에는 쿠키 파서로 인해 쿠키라는 메소드가 생겼고, 여기에 count를 1을 주고 실행하면 

request의 cookie값에 count=1이 추가된 것을 확인할 수 있다.

웹 브라우저를 확인하면

count : 1로 변한 것을 확인할 수 있다.

 

cookie-parser을 설치하는 방법이 적혀 있는 링크이다.

해당 문서를 따라 콘솔에 설치해주면 된다.

https://expressjs.com/en/4x/api.html

Express 4.x - API Reference

 

var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
app.use(cookieParser());
app.get('/count', function(req, res) {
	if(res.cookies.count){
    	var count = parseInt(res.cookies.count);
    } else {
    	var count = 0;
    }
    count = count + 1
	res.cookie('count', count);
	res.send('count : '+req.cookies.count);
});
app.listen(3003, function(){console.log('Connected 3003 port!!!');
});

count가 1씩 증가할 수 있도록 구현한 코드이다.

res.cookie.count가 0이 아니라면 count는 count의 값을 가지되,cookie로 받은 값은 기본적으로 문자이기 때문에 parseInt로 정수 값으로 바꿔준다.

이후 count+1을 통해 count 값이 1씩 늘어나고 이것이 화면에 반영된다.

 

1-3. cookie 3 - 쇼핑카트 1

var cookieParser = require('cookie-parser');
var app = express();
app.use(cookieParser());
var products = {
  1:{title:'The history of web 1'},
  2:{title:'The next web'}
};
app.get('/products', function(req, res){
  var output = '';
  for(var name in products) {
    output += `
      <li>
        <a href="/cart/${name}">${products[name].title}</a>
      </li>`
  }
  res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);
});

app.get('/count', function(req, res){
  if(req.cookies.count){
    var count = parseInt(req.cookies.count);
  } else {
    var count = 0;
  }
  count = count+1;
  res.cookie('count', count);
  res.send('count : ' + count);
});
app.listen(3003, function(){
  console.log('Connected 3003 port!!!');
});

products 배열에 1번 속성으로 web1, 2번 속성으로 web2를 사용한다.

현장에서는 DB를 사용한다. (SQL 등...)

 

for문을 이용해서 products의 값들을 name으로 꺼낸다.

output에  name으로 꺼내진 원소들을 더한다. 

변수로 인식되기 위해 ${}, 목록으로 인식되기 위해 <li> 태그를 준다.

 

링크로 사용하기 위해 <a href> </a>태그를 이용한다.

url에 아이디 값을 추가해서 인식에 용이하게 한다.

 

1-4. cookie 4 - 쇼핑카트 2

app.get('/cart/:id', function(req, res){
	var id = req.params.id;
    if(req.cookies.cart) {
    	var cart = req.cookies.cart;
    } else {
    	var cart = {};
    }
    if(!cart[id]){
    	cart[id] = 0;
    }
    cart[id] = parseInt(cart[id])+1;
    res.cookie('cart', cart);
    res.redirect('/cart');
});

추가된 코드 부분이다. 

request의 cookies의 cart 값이 세팅되어 있다면 그 값을 사용하고, 그렇지 않다면 cart 값을 비어 있는 객체를 cookie의 값으로 세팅한다.

cart의 id 값을 이용해서 담은 물품 개수를 확인한다.

 

1-5. cookie 5 - 쇼핑카트 3

app.get('/cart', function(req, res){
	var cart = req.cookies.cart;
    if(!cart) {
    	res.rend('Empty!');
    } else {
    	var output = '';
    	for(var id in cart){
        	output += `<li>${products[id].title} (${cart[id]})</li>`;
    	}
    }
    res.send(`
    	<h1>Cart</h1>
    	<ul>${output}</ul>
    	<a href="/products">Products List</a>
    `);
});

카트 목록을 꾸며주는 과정이다.

cart에 값이 없다면 Empty!를 출력하고, 값이 들어 있다면 cart에 들어 있는 목록을 <li>를 통해서 이름과 개수를 목록으로 출력한다.

<li> 태그가 사용되었기 때문에 send에 <ul> 태그를 추가한다.

 

1-6. cookie 6 - cookie & 보안

cookie를 서버와 브라우저가 교환하는 과정에서 도청당하거나 탈취당할 수 있다.

또한 cookie는 저장된 파일이기 때문에 해킹당할 시 매우 위험하다.

 

이를 방지하기 위해 암호화를 위한 키 값을 지정할 수 있다.

cookieParser 안에 임의의 키 값을 입력하고 암호화해 암호화된 상태로 저장했다가 서버에 request할 때 암호화 된 정보를 그대로 보내주면 키 값을 이용해서 암호화된 정보를 해석할 수 있다.

 

var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
app.use(cookieParser('23879ASDF234sdf@!#$a'));
var products = {
  1:{title:'The history of web 1'},
  2:{title:'The next web'}
};
app.get('/products', function(req, res){
  var output = '';
  for(var name in products) {
    output += `
      <li>
        <a href="/cart/${name}">${products[name].title}</a>
      </li>`
  }
  res.send(`<h1>Products</h1><ul>${output}</ul><a href="/cart">Cart</a>`);
});
app.get('/cart/:id', function(req, res){
  var id = req.params.id;
  if(req.signedCookies.cart) {
    var cart = req.signedCookies.cart;
  } else {
    var cart = {};
  }
  if(!cart[id]){
    cart[id] = 0;
  }
  cart[id] = parseInt(cart[id])+1;
  res.cookie('cart', cart, {signed:true});
  res.redirect('/cart');
});
app.get('/cart', function(req, res){
  var cart = req.signedCookies.cart;
  if(!cart) {
    res.rend('Empty!');
  } else {
    var output = '';
    for(var id in cart){
      output += `<li>${products[id].title} (${cart[id]})</li>`;
    }
  }
  res.send(`
    <h1>Cart</h1>
    <ul>${output}</ul>
    <a href="/products">Products List</a>
  `);
});

app.get('/count', function(req, res){
  if(req.signedCookies.count){
    var count = parseInt(req.signedCookies.count);
  } else {
    var count = 0;
  }
  count = count+1;
  res.cookie('count', count, {signed:true});
  res.send('count : ' + count);
});
app.listen(3003, function(){
  console.log('Connected 3003 port!!!');
});

cookie 값을 입력받는 부분에 signed를 추가하고, cookie 값을 입력하는 부분에 signed:true를 추가한다.

이렇게 보호해도 털릴 수 있기 때문에 중요한 값은 cookie에 저장하지 않는다.