쿠키와 세션

쿠키와 세션이란?

쿠키(cookie)

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

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

세션(Session)

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

 

쿠키(Cookie) 만들어보기

서버가 클라이언트의 HTTP 요청(Request)을 수신할 때, 서버는 응답(Response)과 함께 Set-Cookie 라는 헤더를 함께 전송할 수 있습니다. 그 후 쿠키는 해당 서버에 의해 만들어진 응답(Response)과 함께 Cookie HTTP 헤더 안에 포함되어 전달받습니다.

그렇다면 '/set-cookie' API를 호출했을 때 name=sparta라는 쿠키를 할당하는 API를 만들어 보겠습니다.

 

Set-Cookie를 이용하여 쿠키 할당하기

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

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

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

클라이언트는 서버에 요청(Request)을 보낼 때 자신이 보유하고 있는 쿠키를 자동으로 서버에게 전달하게 됩니다. 여기서 클라이언트가 전달하는 쿠키 정보는 Request header에 포함되어 서버에 전달되게 됩니다. 그렇다면 서버에서는 어떠한 방식으로 쿠키를 사용할 수 있을까요?

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

 

/get-cookie에 접근했을 때, 설정된 쿠키를 출력하는 API를 만들어보겠습니다.

• req.headers에서 전달된 쿠리를 출력하는 예제입니다.

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

cookie-parser 미들웨어 적용하기

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

여기서 cookie-parser 미들웨어는 요청에 추가된 쿠키를 req.cookies 객체로 만들어 줍니다.  더 이상 req.headers.cookie 와 같이 번거롭게 사용하지 않아도 됩니다.

cookie-parser 미들웨어를 전역으로 사용하기 위해서는 다음과 같이 사용합니다.

app.use(cookieParser());

cookie-parser를 이용해 쿠키를 출력하는 API를 수정해보겠습니다.

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가 아니라 객체 형식으로 바뀌었습니다.

cookie-parser는 단순히 쿠키를 req.cookies로 만들어 주기만 하는 것이 아니라 더욱 쿠키를 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 더욱 자세한 내용을 확인하고 싶다면 npm 문서를 확인해보세요

세션(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 };

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

• 서버에 해당하는 유저의 정보를 저장하기 위한 session 객체를 만들었습니다.
• /set-session API를 호출했을 때 name=sparta의 정보를 session에 삽입하고, 해당하는 데이터를 불러들이기 위한 시간 정보를 쿠키로 반환받습니다.

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

• 쿠키에 저장된 sessionKey를 이용하여session에 저장된 데이터를 불러옵니다.