노드숙련강의 2-1

·2022년 12월 19일
0

study

목록 보기
9/81
post-thumbnail

01. 쿠키와 세션?

쿠키(Cookie): 브라우저가 서버로부터 응답으로 Set-Cookie 헤더를 받은 경우 해당 데이터를 저장한 뒤 모든 요청에 포함하여 보냅니다.

  • 데이터를 여러 사이트에 공유할 수 있기 때문에 보안에 취약할 수 있습니다.
  • 쿠키는 userId=user-1321;userName=sparta 와 같이 문자열 형식(name=value)으로 존재하며 쿠키 간에는 세미콜론(;) 으로 구분됩니다.

세션(Session): 쿠키를 기반으로 구성된 기술입니다. 단, 클라이언트가 마음대로 데이터를 확인 할 수 있던 쿠키와는 다르게 세션은 데이터를 서버에만 저장하기 때문에 보안이 좋으나, 반대로 사용자가 많은 경우 서버에 저장해야 할 데이터가 많아져서 서버 컴퓨터가 감당하지 못하는 문제가 생기기 쉽습니다.

02. 쿠키 만들어보기

쿠키는 GET METHOD 사용

app.get("/set-cookie", (req, res) => {
  const expire = new Date();
  expire.setMinutes(expire.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

  //(속성 추가)expires:만료시간을 언제까지, HttpOnly:http에서만사용, Path : 어느 url부터 사용가능한지
  res.writeHead(200, {
    'Set-Cookie': `name=sparta; Expires=${expire.toGMTString()}; HttpOnly; Path=/`,
  });
  return res.status(200).end();
});

res.cookie()를 이용하여 쿠키 할당하기

얘가 더 효율적!

app.get("/set-cookie", (req, res) => {
  const expires = new Date();
  expires.setMinutes(expires.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

  res.cookie('name', 'sparta', {
    expires: expires
  });
  return res.status(200).end();
});

03. req를 이용하여 쿠키 접근하기

클라이언트는 서버에 요청(Request)을 보낼 때 자신이 보유하고 있는 쿠키를 자동으로 서버에 전달하게 됩니다. 여기서 클라이언트가 전달하는 쿠키 정보는 Request header에 포함되어 서버에 전달되게 됩니다.

일반적으로 쿠키는 req.headers.cookie에 들어있습니다. req.headers는 클라이언트가 요청한 Request의 헤더를 의미합니다.

app.get("/get-cookie", (req, res) => {
  const cookie = req.headers.cookie;
  console.log(cookie); // name=sparta
  return res.status(200).json({ cookie });
});

04. cookie-parser 미들웨어 적용하기

쿠키를 사용하기 위해서는req.headers.cookie와 같이 여러 프로퍼티를 넘어서야 사용할 수 있었습니다.

💡 여기서! cookie-parser 미들웨어는 요청에 추가된 쿠키를 req.cookies 객체로 만들어 줍니다.

const cookieParser = require('cookie-parser');
app.use(cookieParser());

app.get("/get-cookie", (req, res) => {
  const cookie = req.cookies;
  console.log(cookie); // { name: 'sparta' }
  return res.status(200).json({ cookie });
});

cookie를 불러오는 부분을 req.cookies로 변경되었고, cookie의 형식이 name=sparta가 아니라 객체 형식 { name: 'sparta' }으로 바뀌었습니다.

request.cookies

cookie-parser를 사용하기 전에는 request객체에 cookie라는 속성으로 모든 쿠키가 한 줄로 나열되었는데, cookie-parser를 사용함으로써 객체형식으로 저장된 쿠키를 불러오기 쉬워졌음.

05. 세션(Session) 만들어보기

  • 쿠키의 경우 서버를 재시작하거나 새로고침을 하더라도 로그인이 유지됩니다. 사용자의 입장에서는 편하게 사용할 수 있지만 서버의 입장에서는 상당히 위험한 상황입니다. 쿠키가 조작되거나 노출되어 보안적으로 문제가 발생할 수 있습니다.

  • 쿠키에는 어떠한 정보를 넣어줘야 할까요? 서버에서 해당하는 사용자가 누구인지 확실하게 구분할 수 있는 정보만 있다면 서버에서 해당 사용자의 유니크한 정보도 반환할 수 있겠죠?

/set-session API를 호출했을 때 name=sparta 의 정보를 서버에 저장하고, 저장한 시점의 시간 정보를 쿠키로 반환받는 API와

/get-session API를 호출했을 때 쿠키의 시간 정보를 이용하여 서버에 저장된 name 정보를 출력하는 API를 만들어보겠습니다.

/set-session API 만들기

let session = {};
app.get('/set-session', function (req, res, next) {
  const name = 'sparta';
  const uniqueInt = Date.now();
  session[uniqueInt] = { name };

  //uniqueInt로 만들어진 sessionKey라는 쿠키를 사용자에게 전달
  res.cookie('sessionKey', uniqueInt);
  return res.status(200).end();
});

/get-session API 만들기

app.get('/get-session', function (req, res, next) {
  const { sessionKey } = req.cookies;
  const name = session[sessionKey];
  return res.status(200).json({ name });
});

특정사용자의 세션이 존재하지 않았을 때는 에러가 발생하진 않음.
null값이 전달되도록 코드가 짜여있음.

세션 API 전체 코드

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

let session = {};
app.get('/set-session', function (req, res, next) {
  const name = 'sparta';
  const uniqueInt = Date.now();
  session[uniqueInt] = { name };

  res.cookie('sessionKey', uniqueInt);
  return res.status(200).end();
});

app.get('/get-session', function (req, res, next) {
  const { sessionKey } = req.cookies;
  const name = session[sessionKey];
  return res.status(200).json({ name });
});

app.listen(5002, () => {
  console.log("서버가 켜졌어요!");
});

06. Quiz

GET Method로 [http://localhost:5001/set](http://localhost:5001/set)을 호출했을 때, namenodejs가 저장된 쿠키를 할당하고

GET Method로[http://localhost:5001/](http://localhost:5001/set)get을 호출했을 때, 쿠키에 등록된 정보들이 반환되는 API를 만들어 보자!

const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

//set---------------------------------------------------------
app.get('/set', function (req, res) {
  res.cookie('name', 'sparta');
  return res.status(200).end();
});

//get---------------------------------------------------------
app.get('/get', function (req, res) {
  const cookie = req.cookies;
  return res.status(200).json({ cookie });
});

app.listen(5001, () => {
  console.log("서버가 켜졌어요!");
});
profile
개발자 꿈나무

0개의 댓글