S3) Unit 7. [Backend] Cookie / Session

📣  Cookie

✔️ 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터

✔️ 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단

➰ 해당 도메인에 대한 쿠기가 존재하면, 웹 브라우저는 도메인에게 http 요청 시 쿠키를 함께 전달한다.

➰ 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고, 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함한다.

📣  Cookie 특징

✔️ 장시간 보존해야하는 정보 저장에 적합하다.

➰ 로그인 상태 유지

 

✔️ 서버가 클라이언트에 특정 정보를 저장할 수 있다.

➰ 데이터를 저장한 이후 아무 때나 데이터를 가져올 수는 없고, 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있다.

➰ 이런 조건들은 http 헤더를 사용해서 쿠키 옵션으로 표현할 수 있다.

 

📣  쿠키 옵션

'Set-Cookie':[
            'cookie=yummy', 
            'Secure=Secure; Secure',
            'HttpOnly=HttpOnly; HttpOnly',
            'Path=Path; Path=/cookie',
            'Doamin=Domain; Domain=codestates.com'
        ]

1️⃣ Domain

✔️ 도메인 : 서버에 접속할 수 있는 이름

➰ 쿠키 옵션에서 도메인은 'http://www.localhost.com:3000/users/login' 에서 'localhost.com' 부분이다.

➰ 쿠키 옵션에 도메인 정보가 있다면, 클라이언트는 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있다.

 

2️⃣ Path

✔️ Path : 서버가 라우팅할 때 사용하는 경로

➰ 요청해야하는 url이 'http://www.localhost.com:3000/users/login' 라면 'path는 /users/login' 이다.

➰ 설정된 경로를 포함하는 하위 경로로 요청을 하더라도 쿠키를 서버에 전송할 수 있다.

    ﹒ path가 /users고, 요청 경로가 /users/codestates인 경우 쿠기 전송이 가능하다.

 

3️⃣ MaxAge or Expires

✔️ 쿠키가 유효한 기간을 정하는 옵션

➰ MaxAge : 쿠키가 유효한 시간을 초 단위로 설정하는 옵션

➰ Expires : 언제까지 쿠키가 유효한지 클라이언트의 시간을 기준으로 시간, 날짜를 지정할 수 있다.

➰ 위 옵션 여부에 따라 세션 쿠키, 영속성 쿠키로 나뉜다.

    ﹒ 세션 쿠키 : MaxAge 또는 Expires 옵션이 없는 쿠키로, 브라우저가 실행 중일 때 사용할 수 있는 임시 쿠키이다. 브라우저를 종료하면 해당 쿠키는 삭제된다.

    ﹒ 영속성 쿠키 : 브라우저의 종료 여부와 상관없이 MaxAge 또는 Expires의 유효시간만큼 사용가능하다.

 

4️⃣ Secure

✔️ 사용하는 프로토콜에 따른 쿠기의 전송 여부를 결정하는 옵션

➰ true인 경우 HTTPS를 이용하는 경우에만 쿠키를 전송할 수 있다.

➰ 도메인이 localhost인 경우에는 HTTPS가 아니어도 쿠키 전송이 가능하다.

 

5️⃣ HttpOnly

✔️ 자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정한다.

➰ true인 경우 자바스크립트로 쿠키에 접근이 불가능하다.

➰ 디폴트값은 false로, document.cookie로 쿠키에 접근할 수 있으므로 쿠키가 탈취될 위험이 있다.

 

6️⃣ SameSite

✔️ Cross-Origin 요청을 받은 경우, 요청에서 사용한 메서드(GET, POST...)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정한다.

➰ Lax : Cross-Origin 요청이라면 GET 메서드에 대해서만 쿠키를 전송할 수 있다.

➰ Strict : 가장 엄격한 옵션으로, Cross-Origin이 아닌 same-site인 경우에만 전송 가능하다.

➰ None : 가장 관대한 옵션으로, 항상 쿠키를 보낼 수 있지만 쿠키 옵션 중 Secure 옵션이 필요하다.

 

📣  Cookie를 이용한 상태 유지

✔️ 서버는 클라이언트에 인증정보를 담은 쿠키를 전송하고, 클라이언트는 전달받은 쿠키를 서버에 요청과 함께 전송하여 Stateless한 인터넷 연결을 Statefule하게 유지할 수 있다.

✔️ 하지만 인증정보를 이용해 공격자가 요청을 보내서 탈취가 일어나면 위험하므로, 쿠키에 민감한 정보를 담는 것은 위험하다.

---

📣  Session

✔️ 세션 : 서버가 클라이언트에 유일하고 암호화된 ID를 부여

✔️ 중요 데이터는 서버에서 관리

 

📣  Session 전달 방법

1️⃣ 로그인

✔️ 사용자가 정확한 아이디와 비밀번호를 입력하면, 서버는 인증에 성공(세션)했다고 판단하고, 유저는 매번 로그인 할 필요가 없게 된다.

✔️ 이때 서버는 사용자가 인증에 성공했음을 알고 있어야 하며, 클라이언트는 인증 성공을 증명할 수단을 갖고 있어야 한다.

1. 서버는 일종의 저장소(주로 in-memory)에 세션을 저장하거나 세션 스토어에 저장한다.

2. 세션이 만들어지면, 각 세션을 구분할 수 있는 세션 아이디가 만들어지는데, 클라이언트는 이를 세션 성공을 증명할 수단으로써 전달한다.

3. 이때 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용하는데, 쿠키는 서버에서 발급한 세션 아이디를 저장한다.

4. 쿠키를 통해 유효한 세션 아이디가 서버에 전달되고, 세션 스토어에 해당 세션이 존재한다면 서버는 해당 요청에 접근 가능하다고 판단한다.

 

2️⃣ 로그아웃

✔️ 클라이언트는 세션 아이디가 담긴 쿠키를, 서버는 세션을 저장하고 있으며, 서버는 그저 세션 아이디로만 인증 여부를 판단한다.

✔️ 로그아웃은 서버가 세션 정보를 삭제하고, 클라이언트는 쿠키를 갱신하거나 삭제해야 한다.

➰ 클라이언트는 res.cookie로 쿠키의 값을 무효한 값으로 갱신하거나, res.clearCookie로 쿠키를 삭제할 수 있다.

 

📣  Session의 단점

✔️ 서버 저장 공간을 차지하므로 가용 메모리의 양이 줄어든다.

✔️ 세션 쿠키가 탈취된다면 여전히 개인정보가 유출될 위험이 있다.

 

📣  Cookie vs Session

📣  express-session

✔️  세션을 대신 관리해 주는 Node.js의 모듈

➰ 세션을 위한 미들웨어로, express 서버에서 쉽게 세션을 위한 공간을 다룰 수 있도록 만들어준다.

const express = require('express');
const session = require('express-session');

const app = express();

app.use(
  session({
  // 세션의 옵션을 지정할 수 있다.
  // 세션 객체는 유저별로 독립적으로 생성된 객체이므로 유저별로 각각 다른 데이터를 저장할 수 있다.
    secret: '@codestates',
    // 비밀키를 이용해 암호화해서 세션id라는 것을 생성한다.
    // 이를 클라이언트에게 쿠키로 전송한다.
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

➰ 클라이언트에 유저의 개인 정보를 담지 않고도 서버가 클라이언트의 세션 id를 이용해 유저의 인증여부를 판단할 수 있다.