쿠키
- 쿠키의 특징로그인을 한 뒤 서버에서는 response로 쿠키 값을 보내주고 이는 자동으로 클라이언트에 기록된다.
- 서버에서 설정해둔 기간 동안은 쿠키로 사용자를 인지하여 로그인 상태를 유지할 수 있다.
- 쿠키 사용법
- 서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.
- 리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.
- 권장되지 않지만 자바스크립트에서도 쿠키를 생성, 참조, 수정할 수 있다.
- 알아두면 좋은 Attribute
Path
- 설정: 쿠키를 보낼 경로를 지정
- 예시: Path=/이면 /, /abc, /abc/xyz 경로에 요청 시 쿠키 전송
HttpOnly
- 기능: 쿠키를 자바스크립트로 접근할 수 없게 막음
- 보안: 자바스크립트로 쿠키 탈취 방지, 민감 정보 보호
Secure
- 기능: HTTPS 요청 시에만 쿠키 전송
- 참고: SameSite=None 설정 시 반드시 Secure도 함께 설정해야 함
SameSite
- 기능: 크로스 사이트 요청 위조(CSRF) 방지
- 값:
- Strict: 제3자 사이트에서의 모든 요청에 쿠키 전송 불가
- Lax: 사용자가 링크 클릭 시 요청에 쿠키 전송 가능
- None: 모든 경우에 쿠키 전송 가능 (반드시 Secure와 함께 사용)
- 요약표:상황 SameSite=Strict SameSite=Lax SameSite=None
| 다른 사이트에서 우리 사이트로 리퀘스트를 보낼 때 |
X |
X |
O |
| 다른 사이트에서 이미지 파일 등을 받을 때 |
X |
X |
O |
| 다른 사이트에서 사용자가 링크를 클릭해 우리 사이트로 이동할 때 |
X |
O |
O |
| 우리 사이트에서 우리 사이트로 리퀘스트를 보낼 때 |
O |
O |
O |
Expires와 Max-Age ⭐️
- 기능: 쿠키의 수명을 지정
- Expires: 만료 시기 지정
- Max-Age: 수명 지정
- 종류:
- 세션 쿠키: 브라우저를 닫으면 지워짐 (Expires나 Max-Age를 지정하지 않음)
- 영속적인 쿠키: 지정한 수명 후에 지워짐 (Expires나 Max-Age로 수명 지정)
- Domain
- 개인정보와 쿠키쿠키를 사용하는 경우 GDPR(일반 정보 보호 규정; General Data Protection Regulation) 규정에 따르면 개인정보 이용목적을 안내하고 사용자의 동의를 받는 등의 절차가 필요하다.
- 최근 많은 사이트들이 처음 들어가면 팝업을 띄우고 동의를 받는다.
- 구글, 페이스북 등 빅테크들이 쿠키를 사용해서 사용자의 정보를 과도하게 수집하고 자사 광고에 활용해 논란이된 적이 있다.
- 참고자료HTTP 쿠키 - HTTP | MDN브라우저 쿠키와 SameSite 속성 / seob.devCross Site Request Forgery (CSRF) | OWASP Foundation
- react-cookie 쉽게 사용하기
- Set-Cookie - HTTP | MDN
- 쿠키, 세션, 캐시가 뭔가요?
세션 스토리지와 로컬 스토리지
- 세션 스토리지와 로컬 스토리지란?클라이언트에는 데이터를 저장해 놓고 사용하고 싶은 경우에 세션, 로컬 스토리지를 사용한다.
- 쿠키는 서버에서 만들고 관리한다.
- 세션 스토리지
// 값을 참조해서 사용할 때
const draftData = sessionStorage.getItem('draft');
// 값 지우기
sessionStorage.removeItem('draft');
- 현재 탭에서만 유효.
- 탭을 닫으면 데이터 삭제.
- 다른 탭과 데이터는 공유되지 않음.
- // 값을 저장하는 코드. (이미 값이 있다면) 수정하는 코드 const data = inputElement.value; sessionStorage.setItem('draft', data);
- 로컬 스토리지
// 사용자가 처음 접속했을 때
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
// 값 지우기
localStorage.removeItem('show-sidebar');
- 해당 사이트에서 유효한 저장소.
- 탭을 닫거나 브라우저를 닫아도 데이터가 유지.
- 여러 탭 사이에서도 데이터가 공유.
- // 사이드바 보이기 가리기 코드 정보를 참조 및 저장하는 코드 // 사용자가 사이드바 감추기 버튼을 클릭했을 때 값을 저장, 수정 localStorage.setItem('show-sidebar', 'false');
- 쿠키와 세션/로컬 스토리지의 다른 점?
- 클라이언트가 만들고 관리하는 데이터
- 자바스크립트로 편리하게 조작할 수 있다
- 만료 기간(수명)이 없다
- 쿠키보다 사용할 수 있는 용량이 크다.
- 스토리지가 변경되었을 때 처리하기스토리지가 변경되었을 때 'storage' 라는 이벤트가 발생함.
window.addEventListener("storage",
() => {
// showSidebar 값 적용하기
const showSidebar = localStorage.getItem('show-sidebar') === 'true';
});
활용사례
- 쿠키
- 로그인 시 세션 ID를 쿠키로 보내주고 이를 통해 서버에서 회원 정보를 확인함
- 하루동안 팝업 다시 보지 않기 (로컬 스토리지로 구현할 경우? 참고자료)
- 장바구니 (로컬 스토리지로 구현할 경우? 예시)
- 세션 스토리지, 로컬 스토리지
- 초안 저장: 텍스트 입력 도중 창을 닫아도 내용 유지 (https://stackedit.io/)
- 각종 웹 앱