[WEB] 웹 저장소 - 쿠키/로컬스토리지/세션스토리지

🍪 Cookie

• 배경
  • http의 특성인 '비연결성', '무상태성'으로 인해, 요청과 응답이 완료되면 연결을 끊음.
    → 한 사이트에 여러번 방문해도 새로 방문한 것이 됨.
    이에 Netscape사이트 방문자가 이미 사이트를 방문했는지 판단하기 위해 사용하기 시작.
    Unix 프로그래밍에서 사용하던 매직쿠키(프로그램이 수신한 뒤, 변경하지 않고 보내는 데이터 패킷)에서 유래.
• 최대 4KB까지 저장
• 서버 데이터를 공유하는 용도 : 서버 요청을 할 때마다 자동으로 실려서 따라옴
  • SSR에서 더욱 중요!
    SSR 시점에 localStorage의 값을 알 방법이 없음.
    But!! 쿠키데이터는 알 수 있음.
    → 서버에서 html를 렌더링 할 때, 더욱 많은 정보를 담을 수 있음
    → 로딩시간 단축
  • HTTP요청시 Headers에 실려 전송됨
• 데이터 유효기간 지정 가능 (한 시간 뒤, 하루 뒤 등)

// 유효 일자 설정
Set-Cookie: <cookie-name> = <cookie-value>; Expires=<data>

// 만료 기간 설정 : Max-Age가 존재하면 Expires는 무시됨
Set-Cookie: <cookie-name> = <cookie-value>; Max-Age=<number>

• 사용 예: 로그인 자동완성, 오늘 하루 보지 않기 등

쿠키의 종류

• 만료기간 별
  • 영구 쿠키(Persistent Cookie) : 만료 기간 있음. 만료 기간이 끝난 후 삭제.
  • 세션 쿠키(Session Cookies) : 만료 기간 없음. 브라우저 종료시 삭제.
• 도메인 별
  • First party Cookie : 같은 도메인에서 생성된 쿠키. 서브 도메인의 경우도 포함
  • Third party Cookie : 다른 도메인에서 생성된 쿠키. img, font, iframe 등 다른 도메인에 요청을 해야할 경우 생성.
    
    • 주로 광고목적으로 사용. 사용자의 개인정보 악용의 문제.

	First party Cookie	Third party Cookie
https://kangdanne.tistory.com/	같은 도메인 kangdanne.tistory.com/  서브 도메인 m.kangdanne.tistory.com/	다른 도메인 facebook.com

• 문제점
  • 보안적 문제
    • CSRF : 사용자 권한을 이용한 공격. 사이트에 로그인 되어 있는 사용자에게 악성 스크립트를 실행. (비밀번호 변경, 결제 요청 등)
    • XSS : 사용자의 민감한 정보 탈취 (token)
  • http요청 시 자동으로 모든 쿠키가 전송되어 불필요한 트래픽이 증가될 수 있음.

 

 

💰 Cashe캐시

• 웹 뿐 아니라 컴퓨터 메모리, 안드로이드 등 다양한 곳에서 사용되는 개념
• 가져오는데 비용이 드는 데이터를 한 번 가져온 뒤 임시로 저장해 두는 것
• 웹 캐시 : 한 번 받아온 데이터를 사용자의 컴퓨터 또는 중간 역할을 하는 서버에 저장

 

🗂 IndexedDB

• 대용량으로 저장 가능
• 다양한 데이터 타입 저장 가능
• 저수준 API제공 → 사용법이 까다로움

 

🗄 Web Storage

• 쿠키의 문제점을 보완하기 위해 HTML5에서 등장
• 브라우저에서 제공하는 기본 API로 local storage와 session storage가 있다.
• 웹 브라우저 자체에 있는 특정 저장 공간
• 5MB ~ 10MB정도로 최대 용량.
• 쿠키와 유사히지만 훨씬 안정적
  • 요청 시 Headers에 전송하지 않음 → CSRF, 트래픽 문제 해결
• String형만 저장됨 
  • key, value저장소 이상의 기능은 없음.
• Array, Object형태로 적용하고 싶을 시, JSON.stringify()를 사용해 문자열로 변환하여 저장

// Array
let arr = ["a", "b"];
localStorage.setItem("arr", JSON.stringify(arr));

// Object
let obj = {
  a: "에이",
  b: "삐",
};
localStorage.setItem("obj", JSON.stringify(obj));

console.log(localStorage.getItem("arr"));
// ["a", "b"] <- 문자열임


console.log(localStorage.getItem("obj"));
// {"a":"에이","b":"삐"} <- 문자열임

 

• JSON.stringify()를 통해 변환 받은 String 값을 다시 Array나 Object로 사용하고 싶을 때 JSON.parse()사용

 console.log(JSON.parse(localStorage.getItem("arr")));
 console.log(JSON.parse(localStorage.getItem("obj")));

 

• 버전에 따라 브라우저에서 미지원할 수 있음. 에러 처리 필수!
  
  • ex) safari 시크릿 모드에서 웹 스토리지 사용 시 에러

 // 브라우저가 storage를 지원하는 지 체크하는 방법
 if (typeof Storage !== "undefined") {

}

• 문제점
  • 자바스크립트로 접근가능 하기 때문에 XSS에 취약. 
  • 만료 기간 설정 불가
  • 동기적인 실행 : 메인 스레드 블로킹. 용량이 큰 경우 InedexdDB 고려.

 

Local Storage (로컬스토리지)

• 도매인별로 따로 저장
• 삭제하기 전까지 클라이언트 브라우저에 남아있음
  • 로컬 스토리지의 값을 지워주는 코드가 없으면 다음에 다시 해당 브라우저, 해당 도메인으로 들어왔을 때 정보가 남아있게 된다
  • PC로 접속했으면 그 PC에. 태블릿으로 저장했으면 그 태블릿에.
  • 경우에 다라 장점이 될 수도 있지만, 단점이 될 수도 있는 부분.
  • 로그인 정보, 사용자 설정 등을 저장하기에 유용

예시)

"'인기순'정렬을 조건으로 건 상품 리스트 > 상품 상세페이지 > 다시 상품리스트"같은 흐름
👍 GOOD : "'인기순'조회 조건이 걸려있는 상품 리스트"로 넘어가는야한다.
👎 BAD : "조회조건 정보가 다 사라진 리스트 페이지"가 뜬다면 사용자는 불편함을 느낄 것.

사용자의 조회 조건들을 parameter로 페이지가 이동할 때마다 들고다니게 구현한다? → 불편함😫

로컬스토리지로 저장하면 페이지 이동마다 들고다닐 필요없이

localStorage.setItem("key", "value");
localStorage.getItem("key");

 

을 이용해서 사용할 수 있다.

하지만 이 경우 브라우저를 종료한 후에도 해당 브라우저, 해당 도매인으로 접속할 때 그 정보가 남아있게 된다.

로컬스토리지의 정보를 delet해주지 않는 한 재접속 시에도 "'인기순'조회 조건이 걸려있는 상품 리스트"가 기본으로 뜨게된다.

 

✅ API 사용방법

localStorage.setItem("key", "value");
localStorage.getItem("key");
localStorage.removeItem("key");
clear()

 

Session Storage (세션스토리지)

• 서버측에서 관리
• 브라우저를 종료하거나 탭을 닫는 순간 사라짐. 
  • 서버에서 클라이언트 구분을 위해 ID부여
    → 인증상태 유지 : 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지
• 같은 브라우저 탭 안에서는 '새로고침'을 해도 유지
• 단발성 정보를 저장하기 적합 (상품 조회 조건 등)
• 제한 시간을 적용해 일정 시간 응답이 없을 경우 정보를 제거하도록 설정 가능
• 사용자 정보를 서버에 저장하므로 쿠키보다 보안에 좋음.
• 사용자가 많아 질 수록 많은 양의 서버 메모리를 필요로함. → 동접자 많을 시, 서버 과부하 발생 → 성능저하

 

✅ API 사용방법

sessionStorage.setItem("key", "value");
sessionStorage.getItem("key");
sessionStorage.removeItem("key");
clear()

 

✔️ 요약

	로컬 스토리지	세션 스토리지
저장 범위	도메인, 브라우저	도메인, 브라우저, 탭
영구적 저장	Yes (Delet가 되지 않는 한 존재)	No (브라우저, 탭을 닫을 시 제거됨)
사용 예	자동 로그인	일회성 조회
주의	password, 개인 정보는 중요한 정보는 저장하면 안됨.

 

 

 

 

공통 보안 문제 해결 방안

	해결 방안
XSS	HttpOnly	자바스크립트로 접근 불가
	innerHTML 사용 X	자바크립트 코드 삽입 불가 사용자의 입력없이 자바스크립트 코드로 실행 될 수 있는 코드 작성하지 않기 (innerHTML, eval, document.write 등)
CSRF	SameSite	같은 도메인의 요청에만 쿠키 전송
	Referer	요청 온 사이트의 도메인을 확인 할 수 있음

 

 

 

 

참고 자료

유튜브
'개발자의 품격' - 자바스크립트 기초-localStorage와 sessionStorage 이해하기

'Teahoon' - 웹프론트엔드 개발자라면 알아야 할 저장소 종류 4가지

'우아한Tech' - [10분 테코톡] 🦄 디토의 웹스토리지 & 쿠키

블로그 '로티 너구리_로티' - 쿠키와 세션 그리고 로컬 스토리지와 세션 스토리지