HTTP 통신
HTTP 요청은 기본적으로 상태가 존재하지 않음
그러므로 서버는 어떤 브라우저의 요청인지 모른다.
이것을 해결하기 위해 헤더에 쿠키를 사용하면 이를 읽어 출처를 알 수 있다.
Cookie(쿠키)
클라이언트에서 저장, 관리하는 데이터들을 뜻한다.
브라우저를 닫아도 데이터가 유지된다.
서버에서 Set-Cookie 응답 헤더를 내려주면 클라이언트는 이를 받아서 저장한다.
받은 쿠키는 클라이어트가 자체 조작 가능하다. 또한 각 상태의 수명을 지정할 수 있다.
Set-Cookie
키=값; 옵션의 형태로 이루어져 있다.
각 데이터엔 여러 옵션이 존재
Expires: 쿠키 만료 날짜 지정Secure: JavaScript에서 쿠키에 접근을 막음HttpOnly: HTTPS에서만 쿠키를 전송Max-Age: 쿠키 수명 지정,Expires는 무시Domain: 도메인 일치하는 요청만 쿠키 전송Path: 패스 일치하는 요청만 쿠키 전송
쿠키의 취약점
XSS(Cross-Site Script) 공격에 취약하다.
- JavaScript를 이용해 악의적으로 쿠키값을 탈취하는 공격이다.
- 쿠키를 암호화하는 것이 필요하다 => HTTPS로 해결 가능
Session(세션)
HTTP Session Id를 식별자로 사용자를 구분한다.
클라이언트는 HTTP Session Id를 쿠키 형태로 저장하고 서버 자체적으로 기록, 관리한다.
하지만, 세션은 많은 사용자의 요청이나 서버의 갯수가 늘어나면 관리가 어렵다.
따라서 서버와 클라이언트 간 인증은 별토 토큰을 사용한다.
쿠키는 클라이언트 자체적으로 지속적인 데이터 관리가 필요할 때 사용한다.
로컬 스토리지
로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
브라우저를 종료해도 계속해서 데이터는 보존된다. (비휘발성)
저장했던 도메인과 현재 도메인이 다르면 접근 불가능 (보안성 높음)
쿠키와 같이Key-Value형태로 저장한다.
세션 스토리지
세션 스토리지는 새 창을 생성할 때마다 개별적으로 저장되는 데이터를 관리한다.
브라우저를 닫는 순간 사라진다. (휘발성)
같은 도메인이어도 세션이 다르면 데이터 접근 불가
로컬 스토리지, 쿠키와 같이Key-Value형태로 저장한다.
쿠키, 로컬 스토리지, 세션 스토리지 사용법
// 쿠키
document.cookie = 'key=value;'; // String 형태로 저장, 변환 및 파싱 필요 불편함
// 로컬 스토리지
localStorage.setItem('name', 'harry'); // 데이터 저장
console.log(localStorage.getItem('name')); // harry, 데이터 추출
localStorage.removeItem('name'); // 데이터 삭제
localStorage.clear(); // 데이터 초기화
// 세션 스토리지 (로컬 스토리지와 문법 동일)
sessionStorage.setItem('name', 'harry'); // 데이터 저장
console.log(sessionStorage.getItem('name')); // harry, 데이터 추출
sessionStorage.removeItem('name'); // 데이터 삭제
sessionStorage.clear(); // 데이터 초기화IndexedDB
IndexedDB는 Transactional한 로컬 데이터베이스이며
새로운 웹 브라우저 표준 인터페이스이다.
대량의 데이터를 저장하거나 지속적인 인터넷 연결이 필요하지 않은 어플리케이션에 적합
로컬 스토리지, 쿠키와 같이Key-Value형태로 저장한다.
😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.
