[Frontend] Cookies

목차 (OPEN)

• 📦 sessionStorage
• 🧩 개념 정리
• 🏃🏻‍♂️ 동작 방식
• 🔐 보안적 측면
• 📑 요약 정리
• 📚 결론

 

 

 

🍪 Cookies

cookies는 웹 브라우저에서 제공하는 저장 방식 중 하나로,
클라이언트 측에 데이터를 저장한 후, 매 HTTP 요청마다 자동으로 서버에 전송되는 작은 데이터 조각이다.
사용자 인증, 세션 유지, 로그인 상태 확인 등 다양한 상황에서 널리 사용된다.

 

---

🧩 개념 정리

✔️ 정의

cookie는 서버 또는 클라이언트에서 설정할 수 있는 키-값 형태의 데이터로,

웹 브라우저에 저장되어 요청할 때마다 자동으로 서버에 전송된다.

이러한 특징 덕분에 사용자의 로그인 상태나 인증 정보를 서버가 지속적으로 파악할 수 있다.

 

---

🏃🏻‍♂️ 동작 방식

1️⃣ 저장 구조

쿠키는 도메인 단위로 분리된 저장소이며, 경로(path) 단위로도 제한할 수 있다.

이때 같은 도메인에서 생성된 쿠키는 그 도메인에 대한 모든 요청에 포함된다.

또한, 쿠키는 저장된 이후, 동일 도메인에 대한 요청 시 자동으로 포함된다.

 

2️⃣ 데이터 저장 및 읽기

// 쿠키 조회
console.log(document.cookie);

// 쿠키 생성
document.cookie - "theme=dark; max-age=86400";

 

단, HttpOnly 옵션이 설정된 쿠키는 JavaScript에서 접근할 수 없다.

 

3️⃣ 수명

만료일(Expires) 또는 유효시간 (Max-Age)이 설정되지 않으면 브라우저 종료 시 삭제된다.

그러나 명시적으로 설정하면, 로그인 유지 기능처럼 장기 저장도 가능하다.

 

---

🔐 보안적 측면

쿠키는 XSS, CSRF 가은 공격에 노출될 수 있지만, 아래와 같은 속성을 통해 보안성을 강화할 수 있다.

속성	설명
HttpOnly	JavaScript로 접근 불가 (XSS 방지)
Secure	HTTPS 연결에서만 전송됨
SameSite	CSRF 방지 (Strict, Lax, None)
Max-Age	쿠키의 유효 시간 (초 단위) 설정

 

// 설정 예시
Set-Cookie: refreshToken=abc.def.ghi; HttpOnly; Secure; SameSite=Strict; Max-Age=604800;

 

또한, 쿠키는 모든 요청에 포함되므로 용량 제한 (4KB)과 네트워크 성능 부담을 고려해야 한다.

 

---

📑 요약 정리

항목	cookies
저장 위치	클라이언트 브라우저 (도메인 단위)
수명	설정된 만료 시간 or 세션 종료 시
크기 제한	약 4KB
접근	JavaScript (단, HttpOnly 제외)
서버 자동 전송	✅ 항상 자동 전송
보안	HttpOnly, SameSite, Secure 설정으로 강화 가능
사용 용도	세션 관리, 인증 상태 유지, Refresh Token 저장 등

 

---

📚 결론

• 쿠키는 서버와 클라이언트 간에 상태를 유지하고 인증을 관리하기 위한 가장 기본적이고 널리 사용되는 저장 방식이다.
• 모든 요청에 대해 자동으로 포함되기 때문에 인증 및 세션 유지에 매우 적합하며, HttpOnly, Secure, SameSite 속성을 적절히 활용하면 XSS와 CSRF에 대한 방어도 가능하다.
• 하지만 용량이 제한적이고, 잘못 사용하면 보안 취약점으로 이어질 수 있으므로, 토큰 기반 인증 시스템에서는 Refresh Token을 안전하게 저장하는 용도로 주로 사용된다.
• 결론적으로, 쿠키는 보안 설정만 잘하면 매우 강력한 도구가 될 수 있지만, 무조건 저장해두기보다는 데이터의 민감도와 서버 연동 필요 여부에 따라 신중히 선택해야 한다.