cookie(내가 만든 쿠키~)
Client의 정보 기록, 상태 정보를 표현하는 용도
정보 기록?
-> Web Server는 Client의 팝업 옵션을 기억하려고 쿠키에 해당 정보를 기록함 그리고 쿠키를 통해 팝업창 표시 여부를 판단함 / 쿠키는 서버와 통신할 때마다 전송되서 쿠키가 필요 없는 요청을 보낼 때는 리소스의 낭비가 발생함
-> 리소스 낭비 단점 보완 : Modern Storage APIs로 데이터를 저장하는 방식 사용하기
<Modern Storage APIs?>
- 웹 앱에 Client측 데이터를 저장하는 방법과 프로토콜을 제공
- 영구 데이터 저장소 지원
<cookie와 Modern Strage API 차이>
-
cookie
- 4KB 데이터 저장 제한- 매 HTTP 요청에 포함되어 웹이 느려짐
- 같은 쿠키는 도메인 내의 모든 페이지에 같이 전달됨
- 암호화 된 상태가 아니라 보안에 약함
- 사용자의 로컬에 텍스트로 저장되어 있어서 쉽게 접근, 확인이 가능함
-
Modern Storage API
- cookie랑 비슷하지만 용량이 더 큼- HTTP request header에 정보를 저장하지 않음
- local storage와 session storage 두 종류가 있음
- local storage, session storage 둘 다 영구적 쿠키와 세션 쿠키가 비슷하게 동작함
-
제한
- Cookie : 용량(3~5kb), 시간, 개수 제한
- Web Storage : 용량(5 ~ 10mb) 제한
-
시간 제한 설정
- Cookie : 시간 제한 설정 가능
- Web Storage : 시간 제한 설정 불가능
-
데이터형
- Cookie : 문자열만
- Web Storage : javascript 객체 저장 가능
-
데이터 전송
- Cookie : request, response 때 모든 쿠키를 전송해야됨 -> http 통신에 부하 발생
- Web Storage : 개발자가 선택해서 전송 가능 + 가공 가능 -> 부하를 줄일 수 있음
-
세션의 정의
- Cookie : 같은 브라우저면 다른 탭이나 다른 창이라도 같은 세션으로 인식
- Web Storage : 같은 브라우저라도 sessionStorage는 다른 탭이면 다른 세션으로 인식 -> 데이터를 공유하려면 localStorage에 넣어야 됨
-
이벤트
- Cookie : 이벤트 없음 -> 변화 감지 X
- Web Storage : 이벤트 있음 -> 이벤트로 변화 감지
~ 쿠키가 없는 통신 ~
서버는 요청을 보낸 Client가 누군지 알 수 없기 때문에 어떤 Client와 통신하는지 알 수 없음
~ 쿠키가 있는 통신 ~
Client는 서버에 요청을 보낼 때 마다 쿠키를 포함하고, 서버는 해당 쿠키를 통해 Client를 구분함
<쿠키 변조>
쿠키는 Client의 브라우저에 저장되고 요청에 포함되는 정보
-> 악의적인 Client는 쿠키 정보를 변조해 서버에 요청을 보낼 수 있음 -> 서버가 별 검증 없이 쿠키를 통해 이용자의 인증 정보를 식별하면 공격자가 타 이용자를 사칭해 정보 탈취가 가능해짐
<세션>
쿠키에 인증 상태를 저장하지만, 클라이언트가 인증 정보를 변조할 수 없게 하기 위해 세션을 사용함
Session은 인증 정보를 서버에 저장하고, 데이터에 접근할 수 있는 키(= 유추가 불가능한 랜덤 문자열)를 만들어 Client에 전달함
key == Session ID
브라우저는 key를 쿠키에 저장하고 이후 HTTP 요청을 보낼 때 사용 -> 서버는 요청에 포함된 키에 해당하는 데이터를 가져와 인증 상태를 확인
- cookie : 데이터 자체를 이용자가 저장
- session : 서버가 저장
~ 쿠키 적용 방법 ~
쿠키는 Client에 저장되기 때문에 Client는 저장된 쿠키를 조회, 수정, 추가할 수 있음
-> Client가 서버에 요청을 보낼 때 쿠키를 요청 헤더에 포함시켜 전송하기 때문에 이용자는 이때 쿠키 헤더 변조가 가능함
-> 쿠키의 만료 시간이 지나면 Client에서 쿠키가 삭제됨
- 쿠키의 만료는 Client(브라우저)에서 관리
- 쿠키는 Server/Client 둘 다 설정 가능
=> Server : HTTP 응답 중 헤더에 쿠키 설정 헤더(Set-Cookie)를 추가 -> Client의 브라우저가 쿠키를 설정함
=> Client : 자바스크립트로 쿠키 설정
