티스토리 뷰
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 공격에 취약함
장바구니 예시
클라이언트가 최초 인증에 성공하면 서버에서 세션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 진행중
'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글
[인증 / 보안] 쿠키, 세션, 토큰 사용 (0) | 2023.01.08 |
---|---|
[인증 / 보안] Token 토큰 (0) | 2023.01.06 |
[네트워크] 네트워크 계층 모델, HTTPS (0) | 2023.01.03 |
[사용자 친화 웹] 웹 접근성 (0) | 2023.01.02 |
[React] Redux Toolkit (0) | 2023.01.01 |