Cookie
what is cookie?
서버에서 브라우저에게 통신 과정에서 줄 수 있는 데이터 조각이라고 합니다.
3가지 용도로 사용되고 있습니다.
- 세션 관리
유저 로그인 정보 유지, 장바구니, 게임 기록 등 - 개인화
테마, 다크 모드 유지 등 - 트래킹
유저가 자주 보는 글, 찾아본 검색 기록 트래킹 등
예전에는 cookie를 이용하여 browser에 데이터를 저장하고 했습니다.
하지만, localStorage와 indexedDB가 생긴 이후 cookie에 데이터를 직접 넣는 것은 지양합니다.
how to set cookie?
Response header에 Set-Cookie 헤더 이용
Set-Cooke: cookieKey= cookieValue;와 같이 사용
- 예시
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
Set-Cookie에 life-cycle 부여하기
Set-Cookie: key=value; Expires=ExpiredTime;와 같이 사용
- 예시
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
Set-Cookie에 Domain과 Path 설정하기
Domain은 통신을 했을 때, 특정 도메인만 쿠키를 설정해 주고 싶을 때 설정합니다.
설정 해주게 되면, 서브도메인들도 모두 포함되게 됩니다.
설정을 하지 않으면 현재 주소의 호스트로 설정되게 됩니다.
Set-Cookie: key=value; Domain=Domain주소;
Path은 통신을 했을 때, 특정 path에만 쿠키를 보내기 위해 설정합니다.
서브 디렉토리들은 모두 포함됩니다. 설정하지 않으면 전역으로 설정됩니다.
Set-Cookie에 XSS 공격 방지를 위한 secure 설정하기
httpOnly를 붙여서 코드로 가져올 수 없는 cookie를 설정 할 수 있습니다.
secure를 붙임으로서 http 환경에서는 cookie가 가지 않게 할 수 있습니다.
Set-Cookie: key=value Secure; HttpOnly; Secure;
web storage api
session storage
sessionStorage는 페이지의 세션이 유지되는 동안 사용할 수 있습니다. 각 origin별로 별도의 스토리지를 관리합니다. 자바스크립트 코드로 작성 및 수정 그리고 삭제가 가능합니다.
local storage
localStorage는 session storage와 비슷하지만 만료되지 않습니다.
자바스크립트 코드로 작성 및 수정 그리고 삭제가 가능합니다.
set storage
localStorage.setItem('key', 'value');
sessionStorage.setItem('key','value');delete storage
localStorage.deleteItem('key')
sessionStorage.deleteItem('key');get storage
localStorage.getItem('key');
sessionStorage.getItem('key');