[TIL] 차근차근 CS (10) - Cookie, HttpOnly, LocalStorage

Today I Learned

Cookie

웹 브라우저가 사용자 컴퓨터에 저장하는 최대 4KB 크기의 작은 텍스트 데이터 파일. 서버가 HTTP 응답 헤더(Set-Cookie)를 통해 브라우저에 데이터를 전달하면 브라우저는 이를 저장해 뒀다 이후 해당 도메인으로 보내는 모든 HTTP 요청 헤더에 자동 포함해 서버로 다시 전송.

 

대체로 사용자 로그인 상태 유지(세션 관리), 웹사이트 개인화 설정 저장, 사용자 트래킹 등에 사용한다. 그래서 '쿠키 수집 및 사용 동의' 팝업창이 뜨는 사이트가 많은 것도 이러한 이유. (주로 어떤 페이지에 오래 머무는지, 어떤 상품을 클릭했는지 기록을 수집한다) 다만 매 요청마다 서버로 전송되기 때문에 불필요한 네트워크 트래픽을 유발할 수 있고, JavaScript로 접근이 가능해 XSS 공격 등에 취약할 수 있다. 이러한 이유에서 HttpOnly 옵션을 설정한다.

 

HttpOnly

쿠키를 서버에서 생성할 때 설정 가능한 보안 옵션(Flag). 적용 시 JavaScript의 document.cookie API를 통한 접근 및 차단이 원천 봉쇄된다. 이 쿠키는 오직 브라우저와 서버 간 HTTP(S) 통신에만 자동 첨부되어 전송되며, 만약 해커가 XSS 공격을 성공시키더라도 JavaScript로 쿠키를 읽을 수 없기 때문에 민감한 데이터가 탈취되는 것을 방지한다.

 

LocalStorage

HTML5에 추가된 Web Storage API의 한 종류. 브라우저 내 데이터를 키-값(Key-Value) 쌍으로 영구 저장하는 메커니즘이다. JavaScript를 통해서만 데이터를 읽고 쓸 수 있고, 쿠키와 달리 HTTP 요청 시 서버로 자동 전송되지 않는다. 도메인당 약 5MB~10MB 까지 저장이 가능하기 때문에 쿠키보다 훨씬 넉넉하고, 만료 기한 역시 존재하지 않는다. 사용자가 브라우저 캐시나 데이터를 직접 지우거나 JavaScript 코드로 삭제하지 않는 한 재부팅해도 데이터가 유지된다. 서버로 전송할 필요가 없는 UI 설정(다크 모드 여부), 임시 저장 데이터, 자동 완성 히스토리 등을 보관할 때 활용된다.

---

Today I Listened to