23.03.07 - Cookie, Session

1. Cookie

서버가 웹 브라우저(클라이언트)에 정보를 저장하고 불러올 수 있는 수단.

서버는 클라이언트의 쿠키를 이용해 데이터를 가져올 수 있음.

해당되는 도메인에 쿠키가 존재할 경우, 웹 브라우저는 도메인에게 http 요청시 쿠키를 함께 전달한다. 

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

 

쿠키의 사용 예시)

장기간 저장해야하는 옵션을 클라이언트에 저장하기 적합.

장바구니, 30일 동안 로그인 상태 유지, 테마, 로그인/로그아웃을 위한 인증정보...

 

쿠키의 특징

서버가 클라이언트에 특정 데이터를 저장할 수 있음

단 데이터를 저장한 이후 특정 조건이 만족되어야만 서버가 클라이언트에서 데이터를 가져올 수 있음

조건들은 쿠키 옵션으로 작성한다

 

쿠키의 옵션

서버에서 옵션을 지정하고 클라이언트로 쿠키를 처음 전송할때 헤더에 Set-Cookie 프로퍼티로 쿠키를 담아 전송한다. 

이후 클라이언트에서 서버로 쿠키를 전송할때는 클라이언트가 헤더에 Cookie 프로퍼티에 쿠키를 담아 서버로 전송한다.

 

Domain : 서버와 요청의 도메인이 일치하는 경우 쿠키 전송

// 요청 URL
// http://www.mysite.com:3000/users/login

// 쿠키 옵션에서의 도메인
// mysite.com

쿠키 옵션에서 도메인은 포트, 서브 도메인(도메인 앞에 추가로 작성되는 부분), 세부 경로를 포함하지 않는다. 쿠키 옵션에 도메인 정보가 존재할 경우, 클라이언트는 쿠키의 도메인 옵션과 서버의 도메인이 일치할때만 쿠키를 전송할 수 있다. 즉, aaaa.com의 쿠키는 bbbb.com에 전송되지 않는다. 

 

Path : 서버와 요청의 세부경로가 일치하는 경우 쿠키 전송

// 요청 URL
// http://www.mysite.com:3000/users/login

// 쿠키 옵션에서의 Path
// /users/login

Path를 명시하지 않으면 기본값으로 /가 설정되어 있다.

설정된 경로가 포함된 하위 경로로 요청할 경우에는 쿠키를 서버로 전송할 수 있다.

• /users/mypage (O) : /users가 포함됨으로 쿠키 전송 가능
• /guests/mypage (X) : /users가 포함되지 않음으로 서버로 쿠키를 전송할 수 없음

 

MaxAge or Expires : 쿠키의 유효기간 설정

• MaxAge : 쿠키가 유효한 시간을 초단위로 설정. 지정된 시간 이후 자동 소멸.
• Expires : 쿠키가 유효한 날짜를 지정. 옵션의 값은 클라이언트의 시간 기준. 지정된 시간 이후 자동 소멸

 

• 세션 쿠키(Session Cookie) : MaxAge / Expires 옵션이 없는 쿠키. 브라우저가 실행중일때 사용할 수 있는 임시 쿠키. 브라우저 종료시 삭제된다.
• 영속성 쿠키(Persistent Cookie) : MaxAge / Expires 에 지정된 유효시간만큼 사용가능한 쿠키. 브라우저의 종료 여부와는 상관없다.

 

Secure : HTTPS 프로토콜에서만 쿠키 전송 여부 결정

쿠키는 기본적으로 <script> 태그로 접근이 가능함 => XSS 공격에 취약함. 민감한 정보나 개인정보는 담지 않는 것이 좋음.

• 옵션이 true인 경우 - HTTPS를 이용하는 경우에만 쿠키 전송 가능
• 옵션이 없는 경우 - 프로토콜에 상관없이 모두 쿠키 전송 가능

예외) 도메인이 localhost인 경우 HTTPS가 아니어도 쿠키 전송 가능. 개발 단계에서 localhost를 사용하는 경우가 많기 때문

 

HttpOnly : 자바스크립트로 쿠키에 접근 가능 여부 결정

• 옵션이 true일 경우 - 자바스크립트로 쿠키에 접근 불가
• 옵션이 없는 경우 - 기본값 false. document.cookie를 이용해 자바스크립트로 쿠키에 접근 가능 => 쿠키 탈취 위험성 有

 

 

SameSite : CORS 요청의 경우 옵션 및 메서드에 따라 쿠키 전송 여부 결정

• Lax : CORS 요청시 GET 메소드에 대해서만 서버가 쿠키 전송 가능
• Strict : 엄격 옵션. Cross-Origin이 아닌 same-site일 경우에만 쿠키 전송 가능
• None : Cross-Origin에 가장 관대한 옵션. 항상 쿠키 전송 가능. 단, Secure 옵션이 필요함

same-site는 요청을 보낸 Origin과 서버의 도메인, 프로토콜, 포트가 같은 경우. 하나라도 다르면 Cross-Origin

 

 

쿠키를 이용한 상태 유지

쿠키의 특성을 이용해 Stateless한 인터넷 연결을 Stateful하게 유지할 수 있음. 

ex)

서버 ➡ 클라이언트 : 인증정보 담은 쿠키 전송 

클라이언트 ➡ 서버 : 전달받은 쿠키를 요청과 함께 서버로 전송

 

단, 기본적으로 쿠키는 오랜시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않은 경우 자바스크립트를 이용해 쿠키에 접근할 수 있다. 

=> 쿠키에 민감한 정보를 담는것은 매우 위험함

 

 

 

 

 

2. Session

서버와 클라이언트간 연결이 활성화된 상태(= 사용자가 인증에 성공한 상태)

세션은 데이터를 서버에 저장. 쿠키에는 데이터 아이디가 암호화된 상태를 부여. 

 

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

로그인

클라이언트에서 서버로 요청 -> 디비에 정보 저장 -> 세션 아이디 반환 -> 쿠키에 세션 아이디(암호화됨) 담아서 서버가 클라이언트로 전송 -> 세션 아이디가 부여된 상태라면 세션 아이디로 요청이 전달됨 

 

서버는 일종의 저장소에 세션을 저장한다. 주로 in-memory(ex. 자바스크립트 객체) 또는 세션 스토어(redis 등과 같은 트랜잭션이 빠른 DB). 

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

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

쿠키를 통해 유효한 세션 아이디가 서버에 전달되고 세션 스토어에 해당 세션이 존재한다면 서버는 해당 요청에 접근가능하다고 판단한다. 하지만 쿠키에서 세션 아이디 정보가 없는 경우 서버는 해당 요청이 인증되지 않았음을 알려줌

 

 

로그아웃

서버 - 세션 정보 삭제

클라이언트 - 쿠키를 갱신하거나 삭제

 

쿠키는 세션 아이디, 즉 인증 성공에 대한 증명을 갖고 있으므로 탈취될 경우 서버는 해당 요청이 인증된 사용자의 요청이라고 판단함. 

 

express-session

Node.js에서 세션을 대신 관리해주는 모듈. 세션을 위한 미들웨어로 express 서버에서 쉽게 세션을 위한 공간을 다룰 수 있도록 만들어준다. 

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

const app = express();

app.use(
  session({
    secret: '@codestates',
    resave: false,
    saveUninitialized: true,
    cookie: {
      domain: 'localhost',
      path: '/',
      maxAge: 24 * 6 * 60 * 10000,
      sameSite: 'none',
      httpOnly: false,
      secure: true,
    },
  })
);

 

secret 옵션의 비밀키를 이용해 암호화하고 세션 id를 생성 => 클라이언트에게 쿠키로 전달

쿠키로 전송된 세션 id는 종속되는 고유한 세션 객체를 가지고 이것이 서버에 저장됨.

=> 유저별로 독립적으로 생성된 객체임으로 각각의 유저별로 다른 데이터를 저장할 수 있음

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

세션 객체는 req.session으로 접근할 수 있고 임의의 데이터를 저장하거나 불러올 수 있음. 

 

 

 

 

 

 

Cookie vs Session

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

 

 

 

 

 

 

 

 

 

----------------------------------------------------------------------------

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Set-Cookie

Set-Cookie - HTTP | MDN