브라우저 저장소

웹은 기본적으로 무상태(Stateless) 프로토콜인 HTTP를 기반으로 작동하기 때문에, 웹 서버가 사용자의 이전 요청을 기억하지 못한다
따라서, 로그인 상태나 사용자 설정 등의 사용자와 서버 사이에 상태 정보를 유지할 수 있게 하기 위해 브라우저 저장소를 활용함

브라우저 저장소는 클라이언트 웹브라우저에 데이터를 저장하기 위한 방법

브라우저 저장소는 웹 스토리지(Web Storage), 쿠키(Cookie)로 나뉘고
웹 스토리지는 다시 LocalStorage, SessionStorage 로 구성

LocalStorage

• 만료기한이 없는 키-값 저장소 (약 5MB 용량)
• 수동으로 삭제 하지 않는 한 클라이언트에 영구적으로 저장
• 페이지를 이동하거나 브라우저를 닫아도 유지
• 도메인만 같으면 전역적으로 데이터가 공유

🔎 언제 사용할까?

• 장기적으로 유지되어야 하는 데이터
  사용자 설정 (예: 테마나 언어설정)

SessionStorage

• 브라우저 탭 단위로 생성되는 키-값 저장소 (약 5MB 용량)
• 탭 단위로 데이터가 저장되며, 탭을 닫으면 데이터가 즉시 삭제되는 임시 저장소
• 데이터는 탭끼리 공유되지 않으며 새로 고침해도 데이터 유지

🔎 언제 사용할까?

• 임시 데이터
  안내 메시지 팝업을 '오늘 하루 안 보기' 등으로 한 번만 보여줄 때
  입력폼 정보 저장, 비로그인 장바구니, 글 쓰기 도중 내용 복구 등
• 일회성 로그인

Cookie(쿠키)

• 만료기한이 있는 키-값 저장소 (약 4KB 용량)
• 서버로부터 전송된 쿠키는 웹 브라우저에 작은 텍스트 파일의 형태로 저장되며, 이후 서버 요청(HTTP Request)마다 헤더에 실려 서버로 전송
  • 이런 특성 때문에 쿠키가 트래킹 용도로 쓰이는 듯 하다!
    웹사이트에서 매번 쿠키 수집 동의 물어보는 이유..

🔎 언제 사용할까?

• 서버와 통신이 필요한 데이터 저장
  세션 상태 관리 (예: 로그인 세션 토큰 저장)
• 트래킹
  사용자의 행동을 기록하고 분석하는 용도

💡 중요한 기능

• HttpOnly
  다른 사람이 자바스크립트로 접근 할 수 없게, 쿠키를 볼 수 없게 함 (document.cookie로 접근 불가)
• SameSite=Strict
  요청이 동일한 도메인에서 시작된 경우에만 쿠키가 전송되도록 허용

🔒 보안 위협

• XSS(Cross Site Scripting)
  해커가 웹사이트에 악의적인 자바스크립트 코드를 삽입하여 사용자의 브라우저에서 실행되도록 하는 공격
  공격대상: 사용자(브라우저)

• CSRF(Cross-site Request Forgery)
  사용자의 인증정보를 탈취한 상태에서 사용자가 의도하지 않은 공격을 서버로 실행하게 하는 공격
  공격대상: 서버 (사용자 권한을 도용하여 요청 발생)

WebStorage → XSS에 취약
HttpOnly와 같은 브라우저 제약 옵션이 없어서 JavaScript로 접근 가능하기 때문에 악의적인 스크립트를 심는 XSS 공격에 성공하면 저장소 안의 데이터가 그대로 탈취된다

Cookie → CSRF에 취약
쿠키는 요청 시 자동으로 서버에 전송되는 특성이 있다. 사용자가 악성 사이트를 방문하여 브라우저가 사용자의 인증 쿠키를 실어 서버에 강제로 요청을 보내는 CSRF 공격에 노출될 수 있음.

SameSite 옵션을 통한 CSRF 방어
- Strict: HTTP 요청을 보낼때 목적지 서버 사이트 주소와 현재 브라우저 사이트 주소가 동일할 때에만 쿠키를 전송
- Lax: 최신 브라우저의 기본값! 
	`Strict`보다는 완화된 조건으로, 다른 도메인이더라도 사용자가 링크를 클릭해 페이지를 이동하는 안전한 요청(GET) 구조에서는 쿠키 전송을 허용

추가개념

✔️ 오리진(Origin)

웹 페이지의 출처를 정의하는 기준으로, 아래 세 영역이 일치하는 경우에만 동일 출처(Same-origin)로 인정

• 프로토콜(Scheme): http, https 등
• 호스트(Domain): example.com 등
• 포트(Port): 80, 443 등

하나라도 다르면 다른 Origin

• SOP (Same-Origin Policy)
  동일 출처 정책
  • 어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 보안 방식
    → 다른 곳에서 가져온 자료는 일단 막는다
  • 웹 애플리케이션의 도메인이 다른 도메인의 리소스에 접근하는 것을 제어하여 사용자의 개인 정보와 데이터의 보안을 보호하고, 잠재적인 보안 위협을 방지

• CORS (Cross-Origin Resource Sharing)
  교차 출처 리소스 공유
  • 특정 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
  • 만약 다른 출처의 리소스를 가져오기 위해서는 이를 제공하는 서버가 브라우저에게 다른 출처지만 접근해도 된다는 사실을 알려야 함 → CORS policy (교차 출처 리소스 공유 정책)

✔️ 토큰 기반 인증(JWT), 어디에 저장하는 것이 최선일까?

1. 쿠키(Cookie): HttpOnly와 SameSite 옵션을 걸어 XSS 및 CSRF 위험을 낮추기

2. 혼합: Access Token은 자바스크립트 메모리(변수)에만 들고 있고, Refresh Token만 쿠키에 저장하여 필요할 때마다 재발급받기

🤔 Access Token 을 메모리에 들고 있어도 XSS 공격으로 탈취당할 가능성이 있지 않을까?

위험성 존재하지만 그럼에도 권장!
탈취 난이도의 차이와 영속성의 차이 때문에!
로컬 스토리지처럼 localStorage.getItem('token') 한 줄로 토큰 문자열 자체가 넘어가는 최악의 상황을 어느 정도 막을 수 있고
메모리 방식은 사용자가 브라우저를 켜고 있는 '그 세션 동안'만 공격이 유효하기 때문에 피해범위를 좁힐 수 있음

따라서, 최선의 보안을 위해 Access Token은 수명을 10~15분 정도로 짧게 가져가서 메모리로 관리하고 이 토큰이 만료되거나 새로고침으로 사라질때마다HttpOnly와 SameSite 옵션이 걸린 쿠키 속 Refresh Token을 통해 안전하게 재발급 받는 구조를 사용하는 것이 비교적 안전!

정리

구분	LocalStorage	SessionStorage	Cookie
용량	약 5MB	약 5MB	약 4KB
만료	없음 (영구)	탭 닫으면 삭제	설정 가능
서버 자동 전송	❌	❌	✅ (매 요청마다)
새로고침 시	✅ 유지	✅ 유지	✅ 유지
브라우저/탭 종료 시	✅ 유지	❌ 삭제	✅ 유지
주요 용도	장기 저장	임시 저장	서버와 통신
주요 보안 위협	XSS	XSS	CSRF
주요 방어	입력값 검증, CSP 헤더	입력값 검증, CSP 헤더	SameSite, HttpOnly

면접 질문과 답변

브라우저 저장소의 종류를 나열하고, 각각의 차이점을 짧게 설명해 보세요

브라우저 저장소에는 로컬 스토리지, 세션 스토리지, 쿠키 이렇게 3가지가 있습니다.
이 셋은 데이터의 유효기간, 용량, 서버 전송 여부에 있어 차이가 납니다.
로컬 스토리지는 사용자가 수동으로 삭제하지 않는 한 영구적으로 데이터가 저장됩니다.
세션 스토리지는 탭 단위로 유지되며 탭을 닫으면 즉시 삭제 됩니다.
로컬, 세션 모두 5MB 정도의 용량을 가지며 서버로 자동 전송 되지 않습니다.
쿠키는 약 4KB 정도의 작은 데이터 조각으로, 매번 HTTP 요청마다 서버로 전송되기 때문에 서버와 통신이 필요한 데이터를 저장하는데 사용됩니다.

브라우저 저장소의 보안 취약점에 대해 각각 설명하고, 어떻게 방어할 수 있을지 말해주세요.

로컬 스토리지는 자바스크립트로 접근이 가능하기 때문에 악성 스크립트를 심어 사용자의 데이터를 탈취하는 XSS 공격에 취약합니다.
이를 방어하기 위해 유저 입력값 검증 및 CSP 헤더 설정을 철저히 해야합니다

쿠키는 HTTP 요청마다 자동으로 서버에 전송되는 특성이 있어서, 사용자인 척 사용자의 인증 정보를 도용해 악의적인 요청을 날리는 CSRF 공격에 취약합니다.
이를 방어하기 위해 자바스크립트 접근을 차단하는 HttpOnly 옵션과, 요청의 출처를 제한하는 SameSite 옵션을 적절히 적용해야합니다.

CSP (Content Security Policy)
브라우저에게 "이 페이지에서는 어떤 출처의 리소스만 허용한다"고 알려주는 HTTP 응답 헤더
쉽게 말하면 허용 목록(whitelist) 개념

---

참고

[CS] 브라우저 저장소(LocalStorage,SessionStorage,Cookie)
[CS]브라우저 저장소, 로컬스토리지 vs 세션 스토리지 vs 쿠키
브라우저 저장소 완전 정복: 로컬, 세션, 쿠키 사용 전략
적절한 브라우저 저장소 선택하기
로컬스토리지, 세션스토리지, 쿠키
웹 브라우저에서 오리진(Origin)이란?