쿠키
클라이언트와 서버의 연결에 관계없이 필요한 정보를 사용하기 위해 클라이언트의 로컬공간에 저장해둔 데이터 파일
사용자가 인증이 유효한 시간을 명시할 수 있으며 해당 시간이 지나기 전에는 브라우저를 종료해도 인증이 유지
클라이언트의 로컬에 정보를 저장하기 때문에 서버보다 요청 속도가 빠르다
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청시에 Request Header를 넣어서 자동으로 서버에 전송
- 클라이언트가 서버에 요청을 보냄
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함 시켜 응답
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
세션
세션은 서버에서 데이터를 관리하고 고유한 세션ID를 생성해 클라이언트를 식별하는 방법
세션은 서버에 데이터를 저장한 뒤 세션의 키 값만을 클라이언트 측에 제공
클라이언트는 해당 값을 쿠키에 저장하고 필요할 때마다 해당 키값을 이용해서 서버에 저장된 데이터를 사용
웹브라우저 당 세션ID가 한개 씩 생성되어 웹 컨테이너에 저장
즉, 같은 브라우저 탭 안에서는 세션 공유
사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점에 세션 또한 종료
세션은 유효시간을 설정할 수는 있지만 브라우저 종료시 유효시간에 관계없이 세션 종료
서버에서 데이터를 관리하기 때문에 사용자가 많아질수록 서버 메모리를 많이 차지한다는 단점
- 클라이언트가 서버에 요청을 보냄
- 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여
- 서버가 세션ID와 함께 응답 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
- 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
- 서버는 세션 ID를 전달 받아서 해당 세션에 있는 클라언트 정보를 가져와서 사용
쿠키는 클라이언트 로컬에 저장되기 때문에 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 서버에서 처리하기 때문에 비교적 보안성이 좋다
로컬 스토리지
웹 스토리지?
웹스토리지는 HTML5 표준부터 지원하게된 클라이언트에 데이터를 저장하는 API
자바스크립트 내에서 사용되며 서버에 데이터가 자동 전송되지 않는다
데이터가 필요할때만 명시적으로 전송하여 서버에서 필요한 데이터만 이용 할 수 있어 데이터 낭비 방지
쿠키, 세션과 다르게 데이터를 영구적으로 저장 가능
HTML5를 지원하지 않는 브라우저에서는 사용이 불가능
오리진 단위로 접근이 제한되는 특성 때문에 CSRF로부터 비교적 안전
자동으로 request에 담기는 쿠키와는 다르게 js 코드에 의해 헤더에 담기므로 공격자가 정상적인 사용자인 척 요청을 보내기가 어렵
로컬 스토리지는 웹 스토리지 중 브라우저를 종료해도 유지되는 데이터
즉, 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다
명시적으로 지우지 않는 한 영구적으로 저장
도메인 별로 생성되어 다른 브라우저 탭에서도 동일한 도메인이라면 로컬 스토리지 공유
세션ID 클라이언트가 리퀘스트를 보내면 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여
도메인 사람의 편의를 위해 각 ip에 부여한 이름
오리진 도메인, 프로토콜, 포트로 이루어진 식별자
'FE Study' 카테고리의 다른 글
| [FE] node.js 환경 vs 브라우저 환경 (0) | 2024.01.07 |
|---|---|
| [FE] Vue vs React (0) | 2024.01.07 |
| REST API, RESTful API (0) | 2024.01.07 |
| [FE] JS 문법 (2) | 2023.12.03 |
| 서버/클라이언트 (0) | 2023.12.02 |
