Cookie란?

http 프로토콜의 무상태성을 보완해주는 도구
서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법
(서버는 클라이언트의 쿠키를 이용해 데이터를 가져올 수 있음)
보안을 목적으로 만들어진 것이 아님

서버에서 클라이언트에 쿠키를 전송 / 클라이언트에서 서버로 쿠키를 다시 전송

Client -> Server : set-cookie
Server -> Client : cookie
쿠키는 헤더를 통해 전달됨(내가 만든 쿠키 헤더에 담아 보내지~)

• 서버가 클라이언트에 특정한 데이터를 저장 가능
  특정 조건들이 만족되어야 가능함

쿠키 옵션 종류

Domain

서버와 요청의 도메인이 일치하는 경우 쿠키 전송
서버에 접속할 수 있는 이름
(포트나 서브 도메인 정보, 세부 경로 등은 포함하지 않음)

• http://www.localhost.com:3000/users/login 의 경우
  Domain : localhost.com

쿠키 옵션에 도메인 정보가 존재하는 경우, 클라이언트에선 쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키 전송

Path

서버의 요청의 세부 경로가 일치하는 경우 쿠키 전송
세부 경로, 서버가 라우팅할 때 사용하는 경로

• http://www.localhost.com:3000/users/login 의 경우
  Path : /users/login
  (명시되지 않은 경우 기본적으로 /로 설정)

설정된 경로를 포함하는 하위 경로로 요청해도 쿠키를 서버에 전송 가능
(/users로 설정된 경우 /users/abcde로도 전송 가능)

MaxAge or Expires

쿠키가 유효한 기간을 정하는 옵션(보안을 위해 설정)

MaxAge

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

• 문자열로 입력하면 초 단위
  숫자로 입력하면 밀리초 단위

Expires

언제까지 쿠키가 유효한지 날짜를 정할 수 있음
옵션의 값은 클라이언트의 시간을 기준으로 함

• 세션 쿠키
  MaxAge 또는 Expires 옵션이 없는 쿠키
  브라우저가 실행중일 때 사용할 수 있는 임시 쿠키
  브라우저를 종료하면 삭제됨
• 영속성 쿠키
  MaxAge 또는 Expires에 지정된 유효시간만큼 사용가능한 쿠키
  브라우저의 종료 여부와 관계 없음

Secure

HTTPS에서만 쿠키 전송 여부 설정
사용하는 프로토콜에 따른 쿠키의 전송 여부 결정
해당 옵션이 true로 설정된 경우, HTTPS를 이용하는 경우에'만' 쿠키 전송 가능
해당 옵션이 없다면 HTTP / HTTPS 모두 쿠키 전송 가능
(도메인이 localhost인 경우 HTTPS가 아니어도 쿠키 전송 가능
개발 단계에서 localhost를 사용하는 경우가 많기 때문에 생긴 예외)

HttpOnly

클라이언트에서 DOM을 이용해 쿠키에 접근하는 것을 막아주는 옵션
자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부 결정
해당 옵션이 true로 설정된 경우 자바스크립트로 쿠키 접근 불가능
기본 값은 false, 이 경우 document.cookie를 이용해 자바스크립트로 쿠키에 접근 가능하기 때문에 쿠키가 탈취될 위험 있음

SameSite

Cross-Origin 요청을 받은 경우, 요청에 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부 결정

사용 가능한 옵션

• Lax : Cross-Origin 요청이라면 GET메소드만 쿠키 전송 가능
• Strict : 가장 엄격한 옵션. Cross-Origin이 아닌 same-site인 경우에만 쿠키 전송 가능
• None : 가장 관대한 옵션. 항상 쿠키를 보내줄 수 있음. 다만 쿠키 옵션에 Secure옵션 필요

same-site는 Origin과 도메인, 프로토콜, 포트가 모두 같은 경우를 의미

서버에서 이러한 옵션들을 지정하면 다음 서버에서 클라이엍트로 쿠키를 처음 전송할 때 Set-Cookie라는 프로퍼티에 쿠키를 담아 전송
이 후 클라이언트에서 서버에 쿠키를 전송해야 한다면 클라이언트는 헤더에 Cookie라는 프로퍼티에 쿠키를 담아 서버에 쿠키를 전송

쿠키를 이용한 상태 유지

서버는 클라이언트에 인증정보르 담은 쿠키 전송
클라이언트는 전달받은 쿠키를 서버에 요청과 함께 전송
이 과정을 통해 Stateful하게 인터넷 연결을 유지 가능

기본적으로 쿠키는 오랜 시간 유지될 수 있고 HttpOnly 옵션을 사용하지 않는 경우 쿠키가 탈취될 수 있기 때문에 민감한 정보를 담는 것은 위험함

Session이란

사용자가 인증에 성공한 상태
서버의 일종의 저장소에 세션 저장
세션이 만들어질 경우 각 세션을 구분할 수 있는 세션 아이디 생성, 클라이언트에서 세션 성공을 증명할 수단으로 세션 아이디 전달
클라이언트는 쿠키를 사용해 세션 아이디를 저장

세션기반 인증(Session-based Authentication)

로그인

사용자가 정확한 아이디와 비밀번호를 입력한 경우, 서버는 인증에 성공했다고 판단
(인증에 따라 리소스의 접근 권한 변경)

• 서버 : 사용자가 인증에 성공했음을 알아야 함
• 클라이언트 : 인증 성공을 증명할 수단이 있어야 함

로그인을 유지하기 위한 수단으로 쿠키 사용, 쿠키에 세션 아이디 저장

로그아웃

• 서버 : 세션 정보 삭제 필요
• 클라이언트
  쿠키를 갱신 혹은 삭제 필요
  res.cookie로 쿠키의 값을 무효한 값으로 갱신 혹은 res.clearCookie로 쿠키 삭제

세션으로 로그인/로그아웃 구현

로그인	로그아웃
클라이언트 조건부 렌더링으로 Login 표시 로그인 버튼 클릭 ↓ 서버로 로그인 요청 (아이디, 비밀번호, 로그인 유지 등 정보 전달) ↓ 서버 요청을 처리해 응답(유저 정보, 세션 전달) ↓ 클라이언트 응답을 받아 상테 업데이트 조건부 렌더링으로 로그인 이후 페이지(MyPage 등) 표시	클라이언트 로그아웃 버튼 클릭 서버에 로그아웃 요청 ↓ 서버 로그아웃 처리(세션 삭제) ↓ 클라이언트 상태 비우기 조건부 렌더링으로 Login 표시

express-session

Node.js에서 세션을 대신 관리해주는 모듈, 세션을 위한 미들 웨어

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

const app = express();

app.use(
  session({
    // secret 옵션의 비밀키를 이용해 암호화, 세션 id생성
    secret: '@abcdef',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

secret 옵션의 비밀키를 이용, 암호화 하여 세션 id를 생성
해당 세션 id를 클라이언트에 쿠키로 전송

쿠키와 세션의 비교

	설명	접속 상태 저장 경로	장점	단점
Cookie	쿠키는 그저 http의 stateless를 보완해주는 도구	클라이언트	서버에 부담을 덜어줌	쿠키 그 자체는 인증이 아님
Session	접속 상태를 서버가 가짐 (stateful) 접속 상태와 권한 부여를 위해 세션아이디를 쿠키로 전송	서버	신뢰할 수 있는 유저인지 서버에서 추가로 확인 가능	하나의 서버에서만 접속 상태를 가지므로 분산에 불리함