티스토리 뷰

Cookie

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

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

- 해당 도메인에 대해 쿠키가 존재하면 웹 브라우저는 도메인에게 HTTP 요청 시 자동으로 쿠키를 함께 전달(헤더)

 

영속성을 띄기 때문에 장기간 보존해야하는 정보 저장에 적합(삭제하지 않는다면 사라지지 않음)

ex) 로그인 상태 유지, 사용자 선호 테마, 장바구니, 30일간 띄우지 않기 등

 

쿠키는 쉽게 조회할 수 있기 때문에 보통 암호화되어 저장, 민감한 정보는 해싱 처리하지만

그래도 민감한 정보나 개인 정보는 담지 않는 것이 좋음

 

데이터 저장 이후 특정 조건(옵션)들이 만족된다면

서버가 원할 때 클라이언트 쿠키를 이용하여 데이터를 가져올 수 있음

 

서버가 클라이언트에 전달하는 Set-Cookie 예시

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

 

Cookie Options

1. Domain

서브 도메인 정보, 포트, 세부 경로를 포함하지 않음

www. localhost.com :3000 /users/login
서브 도메인 도메인 포트 세부 경로

쿠키의 도메인 옵션과 서버의 도메인이 일치해야만 쿠키를 전송할 수 있음

ex) naver.com에서 받은 쿠키를 google.com으로 전송하지 않음

 

2. Path

세부 경로. 서버가 라우팅할 때 사용하는 경로

위 예시의 /users/login에 해당

설정된 경로를 포함하는 하위 경로로 요청하는 경우에도 쿠키를 전송할 수 있음

 

3. MaxAge(초단위) or Expires(일단위)

쿠키의 유효기간 설정. 유효기간이 지나면 자동 삭제

옵션 여부에 따라 영속성 쿠키(Persistent Cookie)와 세션 쿠키(Session Cookie)로 나뉨

여: 영속성 쿠키. 브라우저 종료 여부와 상관없이 Maxage/Expires에 지정된 유효기간만큼 저장됨

부: 세션 쿠키. 세션이 종료되기 전까지 사용할 수 있는 임시 쿠키.

(브라우저가 종료될 때 세션이 종료되는데,

일부 브라우저는 다시 시작할 때 세션 복원을 사용하여 쿠키가 무기한 지속될 수 있음)

 

4. Secure

true: HTTPS 프로토콜에서만 쿠키 전송 가능

이 옵션(Secure)이 없으면 프로토콜에 상관없이(HTTP/HTTPS) 모두 쿠키 전송 가능


5. HttpOnly

자바스크립트(js)의 쿠키 접근 가능 여부 설정

true: js로 쿠키 접근 불가

false(기본값): js에서 document.cookie로 쿠키 접근 가능 -> XSS 공격에 취약

 

6. SameSite

CORS 요청을 받은 경우 요청에서 사용한 메서드와 이 옵션(sameSite)에 따라 쿠키 전송 여부 결정

(CSRF 공격을 막는데 효과적

Cross-site request forgery. 사이트 간 요청 위조. 웹사이트 취약점 공격 중 하나

사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위를 특정 웹사이트에 요청하게 하는 공격)

- Lax: CORS-GET 메서드 요청만 쿠키 전송 가능

- Strict: 동일 주소인 경우에만 쿠키 전송 가능

(동일 주소: Origin(요청 헤더)과 서버의 도메인, 프로토콜, 포트가 같은 경우. 하나라도 다르면 Cross-Origin)

- None: CORS 모든 메서드 요청에 대해 쿠키 전송 가능하나 Secure 옵션 필요

 

+) EndedAt

 

 

서버가 클라이언트에게 처음 보내는 헤더(쿠키): Set-Cookie

클라이언트(브라우저)가 서버에 요청 시 보내는 헤더(쿠키): Cookie

 

 

쿠키를 이용한 상태 유지

쿠키의 특징을 이용하여 서버는 클라이언트에게 인증정보가 담긴 쿠키를 전송하고

클라이언트는 전달받은 쿠키를 서버에 요청 시 같이 전송하여

stateless(무상태)한 인터넷 연결을 stateful하게 유지할 수 있음

 

그러나 쿠키는 오랜 시간 유지될 수 있고, HttpOnly 옵션을 주지 않는다면 js로 접근할 수 있기 때문에

민감한 정보를 담는 것은 위험함

 

 

Session

사용자가 인증에 성공한 상태

 

서버는 사용자가 인증에 성공하였음을 알아야하고, 

클라이언트는 인증 성공을 증명할 수단이 있어야 함

-> 서버가 클라이언트에 유일하고 암호화된 ID를 부여하여 인증(쿠키에 저장됨)

 

세션들은 서버 저장 공간(ex. 메모리)에 저장됨

in-memory 자바스크립트 객체

세션 스토어(redis 등과 같은 트랜잭션이 빠른 DB)

 

문제점

- 세션이 서버 저장공간을 항상 차지하고 있기 때문에 유저가 많아지면 가용 메모리 양이 줄어서 성능이 안좋아질 수 있음

- 여전히 쿠키를 사용하고 있기 때문에 쿠키 옵션httpOnly가 없는 경우 XSS 공격에 취약함

 

 

장바구니 예시

Session 흐름(feat.Cookie)

클라이언트가 최초 인증에 성공하면 서버에서 세션id를 부여하며

이후 요청에서는 다시 인증할 필요 없이 세션id를 보내면 됨

1 클라이언트: 로그인(인증) 시도

2 서버: 로그인에 성공하면 세션 저장소에 사용자, 장바구니 저장

3 세션 스토어: 암호화된 session_id 반환

4 서버: Set-cookie 헤더를 이용해 브라우저 쿠키에 session_id 저장

 

5 클라이언트: 장바구니에 물품 추가 요청(POST). cookie 헤더가 자동으로 요청에 포함됨

6 서버: session_id가 세션 스토어에 있는지 확인 후 장바구니 저장

7 8 완료

 

로그인했음을 전달할 수단으로 쿠키 사용

세션 옵션과 쿠키 옵션에 각각 유효 기간을 정해주어야 함

 

로그아웃하려면

서버의 세션 정보를 갱신해야하고

클라이언트의 쿠키를 갱신해야함(서버에서 set-cookie를 사용해 세션아이디를 무효한 값으로 갱신할 수 있음)

* 쿠키는 세션 아이디(인증 성공 증명)를 갖고 있기 때문에 

탈취해 사용할 경우에도 서버는 해당 요청이 인증된 사용자의 요청이라고 판단

(공공 PC에서 로그아웃해야하는 이유) 

 

Node.js 환경에서 express-session 모듈을 사용해 세션을 쉽게 다룰 수 있음

secret 옵션의 비밀키로 session_id를 암호화하여 쿠키로 전송

각 세션 아이디들은 값으로 고유한 세션 객체를 가지며 req.session으로 접근 가능

 

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

 

 

 

 

2023.01.05

코스 S3U7 Cookie/Session 진행중

댓글
공지사항