세션 쿠키(Session Cookies)
브라우저를 닫을 때 자동으로 삭제되는 쿠키이다. 주로 사용자의 세션을 유지하는 데 사용된다.
영구 쿠키(Persistent Cookies)
만료 시간이 설정되어 있어 브라우저를 닫아도 삭제되지 않고, 설정된 만료 시간까지 유지되는 쿠키이다. 사용자의 로그인 상태나 사이트 설정을 저장하는 데 사용된다.
서드파티 쿠키(Third-Party Cookies
사용자가 방문한 웹사이트가 아닌 다른 도메인에서 설정한 쿠키이다. 주로 광고 및 사용자 추적 목적으로 사용된다.
세션 관리
로그인 상태 유지, 장바구니 정보 저장 등
개인화
사용자 설정 및 선호도 저장
트래킹 및 분석
사용자 행동 추적 및 분석 데이터 수집
쿠키는 웹 애플리케이션에서 중요한 역할을 하지만, 보안과 프라이버시 측면에서 다음과 같은 주의가 필요하다.
크로스 사이트 스크립팅(XSS) 공격
악성 스크립트가 쿠키 정보를 탈취할 수 있다. HttpOnly 속성을 적용하면, 클라이언트측에서 js로 쿠키에 접근하는 것을 막아준다. 때문에 악성 스크립트로 쿠키가 탈취하는 것을 방지할 수 있다.
크로스 사이트 요청 위조(CSRF) 공격
악성 웹사이트가 사용자의 인증 정보를 도용할 수 있다. SameSite 속성을 적절히 설정하여 이를 방지할 수 있다.
쿠키 탈취
네트워크 상에서 쿠키가 탈취될 수 있다. Secure 속성을 사용하여 HTTPS 연결에서만 쿠키가 전송되도록 할 수 있다.
쿠키는 클라이언트 측과 서버 측 모두에서 관리될 수 있다.
클라이언트 측 관리
js를 사용하여 쿠키를 설정, 읽기, 삭제할 수 있다. 그러나 보안 상의 이유로 HttpOnly 속성이 설정된 쿠키는 js에서 접근할 수 없다.
서버 측 관리
서버는 HTTP 응답 헤더를 통해 쿠키를 설정하고, 클라이언트로부터 받은 쿠키를 읽어 상태를 유지한다.
js-cookie
js-cookie는 js에서 쿠키를 쉽게 설정하고 관리할 수 있도록 도와주는 경량의 라이브러리이다. 이 라이브러리는 간단한 API를 제공하여 쿠키의 생성, 읽기, 삭제 작업을 간편하게 수행할 수 있다.
react-cookie
react 에서 쿠키를 관리하기 위해 설계된 라이브러리이며, react의 컨텍스트(Context)를 사용하여 쿠키를 관리하고, 서버 사이드 렌더링(SSR)도 지원한다. react-cookie는 js-cookie와 유사하지만, React와의 통합을 더욱 쉽게 해준다.