01. Browser Storage

---

먼저 Browser Storage는 왜 필요할까?

서버와 클라이언트 간 통신을 위해 사용하는 HTTP는 요청과 응답으로 이루어진 하나의 사이클이 끝나면, HTTP의 특성 중 하나인 무상태성으로 인해 클라이언트의 상태를 보존하지 않는다.

따라서 서버로부터 전달받은 데이터를 별도의 공간에 저장할 공간이 필요했는데, 이때 사용하는 대표적인 저장소가 바로 쿠키(cookie)와 세션(Session), 웹 스토리지(Local/session Storage)이다.

주의 ❗️
session과 session storage는 다른 개념으로 혼동하지 말자.

클라이언트는 쿠키와 웹 스토리지에 서버에게 전달받은 데이터나 상태 등을 저장해두고, 필요할 때마다 해당 정보를 꺼내 사용하거나 서버에게 전달하는 방식을 사용한다.

① 쿠키 (Cookie)

• 쿠키는 웹 서버 또는 클라이언트에서 생성되어 클라이언트(웹 브라우저)측에 저장되는 key-value로 이루어진 작은 텍스트 파일이다.
• 즉 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
• 일반적으로 만료일을 가지고 있으며, 만료일이 지나면 자동적으로 삭제된다.

✔️ 동작 방식

1. 클라이언트(브라우저)는 → 서버에게 요청을 보낸다.
2. 웹 서버는 쿠키를 생성한 후, HTTP Header를 통해 응답과 함께 쿠키를 클라이언트에게 전송한다.
3. 클라이언트는 전달 받은 쿠키를 보관해두었다가, 같은 서버로 요청을 보낼 때마다 HTTP Header에 쿠키를 담아 전송한다.
4. 서버는 이를 통해 클라이언트를 식별하고 상태 정보를 유지한다.

✔️ 장점

1. 대부분의 브라우저에서 지원하며, 데이터의 유효기간을 지정할 수 있다.
2. 쿠키는 사용자의 브라우저에 직접 저장되므로 서버의 부하를 줄일 수 있고, 사용자가 웹 사이트를 재방문할 때 쿠키를 통해 기존과 동일한 상태를 유지할 수 있다.
3. HttpOnly 옵션으로 XSS(Cross Site Scripting) 공격에 대한 보안을 강화할 수 있다.
   • HttpOnly 옵션을 설정하게 되면 클라이언트(JS)에서 쿠키에 접근하는 것을 막을 수 있다.

✔️ 단점

1. 저장할 수 있는 데이터 용량이 작다.(최대 4KB)
   • 클라이언트에 300개까지의 쿠키를 저장할 수 있고, 하나의 도메인 당 20개의 값만 가질 수 있다.
   • 또한 하나의 쿠키는 4KB까지만 저장 가능하다.
2. 매번 HTTP 요청에 쿠키 정보를 포함해 전송해야 하므로, 네트워크 트래픽을 증가시켜 서버에게 부담이 된다.
3. 쿠키 속 정보는 암호화되지 않아 제 3자에게 탈취될 위험이 있으며, CSRF(사이트 간 요청 위조)공격에 취약하다.
4. 문자열만 저장 가능하다.

❗️ CSRF(Cross-Site Request Forgery)

사용자가 자신의 의지와는 무관하게, 침입자가 의도한 행위를 서버에게 요청하게 만드는 공격을 말한다.

웹 사이트가 쿠키를 사용해 사용자의 세션을 관리하고 있을 때, 사용자가 로그인 상태에서 공격자가 만든 악의적인 웹페이지에 방문하면 해당 웹페이지는 사용자의 브라우저를 통해 악의적인 요청을 보낼 수 있다.

🔥 CSRF 대응 방법

1. SameSite 옵션 : SameSite 옵션은 쿠키가 같은 도메인(site)에서만 전송되도록 제한할 수 있다.
   • 따라서 사용자가 다른 사이트에서 악의적인 요청을 보내도 도메인이 다르다면 쿠키가 포함되지 않는다.
2. CSRF Token 사용 : 랜덤한 UUID와 같은 임의의 난수를 세션에 저장해두고, 해당 난수가 전달되지 않으면 요청을 거부한다.

✔️ 적절한 상황

• 주로 사용자의 세션을 관리하거나 사용자의 정보, 개인 설정을 저장하는데 사용된다.
  • ex1. 사용자가 웹 사이트에 로그인하면 사용자의 로그인 정보를 쿠키에 저장해 자동 로그인 기능 구현
  • ex2. 사용자의 언어 환경, 시스템 설정(다크/라이트 모드) 등 사용자 맞춤형 페이지 제공

② 세션 (Session)

사용자의 정보를 클라이언트 측에서 저장하는 쿠키와 달리 세션은 서버 측에서 클라이언트를 식별하기 위해 사용한다.

✔️ 동작 방식

• 클라이언트가 처음 서버에 접속하면, 서버는 고유한 세션 ID를 생성하고, 이를 클라리언트에게 전달한다.
  • 이때 Session ID는 주로 쿠키를 통해 클라이언트에게 전달되며, 클라이언트는 이후 요청마다 Session ID를 서버에게 전달하여 자식을 식별한다.
• 서버는 Session ID를 통해 클라이언트의 정보를 서버 메모리 또는 데이터베이스(DB) 에 저장하고 관리한다.
  • 이를 통해 서버에 접속한 후 브라우저를 종료할 때까지 인증상태를 유지할 수 있다.
• 이때 접속 시간에 제어를 두어 일정 시간동안 응답이 없다면, 정보가 유지되지 않게 설정할 수 있다.

❓ 쿠키(Cookie) vs 세션(Session)

❗️ 공통점
사실 세션도 쿠키를 사용해 정보를 보관해 사용하기 때문에, 쿠키와 세션의 동작원리는 비슷하다.

❗️ 차이점
👉 데이터 저장 위치 : 쿠키는 클라이언트, 세션은 서버에 저장된다.
👉 보안 : 쿠키 < 세션
→ 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에, 세션이 보안 측면에서 좀 더 안전하다.
👉 라이프 사이클
• 쿠키 : 브라우저를 종료해도 만료 기간이 남아있으면 존재
• 세션 : 만료 기간에 상관 없이 브라우저 종료 시 삭제
👉 속도 : 쿠키 > 세션

✔️ 장점

1. 보안성: 세션 정보는 서버에 저장되므로 클라이언트에서 정보를 가로챌 수 없다.
2. 쿠키와 달리 세션은 서버에 저장되므로 데이터 크기 제한이 없다.
3. 각 사용자(또는 브라우저)는 고유한 세션 ID를 가지고 있기 때문에 개별 사용자 정보를 따로 관리할 수 있다.

✔️ 단점

• 세션 정보가 서버에 저장되므로 많은 사용자가 접속할 경우 서버 부하가 증가해 서버에 부담을 줄 수 있다.

③ 웹 스토리지(Web Storage)

웹 스토리지(Web Storage)는 클라이언트에서 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다.

• 쿠키와 마찬가지로 Key-Value의 스토리지 형태이며, 문자형(string) 데이터 타입만 지원한다.

• 쿠키와 달리 자동 전송의 위험성이 없다.

• 오리진(Origin) 단위로 접근이 제한되기 때문에 CSRF로부터 안전하다.

  • 오리진(Origin) : 도메인 + 프로토콜 + 포트
  • 동일 출처 정책(SOP, Same Origin Policy)

• 쿠키보다 큰 메모리 용량을 지원한다.(모바일 : 2.5MB / 데스크탑 : 5~10MB)

  • 단 클라이언트에 저장만 할 뿐 서버에 자동으로 전송되지 않는다.

• 웹 스토리지 객체(window 객체)의 조작은 JavaScript 내에서만 수행 가능하다.

  • 때문에 서버는 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다.

• 웹 스토리지는 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage) 가 있으며, 같은 Storage 객체를 상속받기 때문에 동일한 메서드를 사용한다.

• 웹 스토리지는 주로 브라우저 세션 간에 데이터를 유지하거나, 쿠키를 사용하지 않는 환경에서 로컬에 데이터를 저장하는 데 사용한다.

✔️ 장점

1. 쿠키에 비해 저장할 수 있는 데이터 용량이 크다. (세션/로컬 스토리지 각각 최대 5MB)
2. HTTP 요청에 데이터를 자동으로 포함하지 않아, 쿠키에 비해 추가적인 네트워크 트래픽을 줄일 수 있고 CSRF 공격에도 안전하다.
   • 웹 스토리지 객체(window 객체)의 조작은 JavaScript 내에서만 수행 가능하다.

✔️ 단점

1. 클라이언트 측에서 관리되므로 XSS(Cross-Site-Scripting) 공격에 취약하다.
2. 오직 문자열만 저장할 수 있기 때문에, 객체나 다른 데이터 유형을 저장하려면 👉 직렬화 또는 역질력화 과정이 필요하다.

❗️ XSS(Cross-Site-Scripting)

웹사이트에서 의도치 않은 스크립트를 넣어서 실행시키는 기법을 말한다.

웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 발생하며 결과로 사용자는 의도치 않은 동작을 수행하거나 쿠키, 세션 등의 정보를 탈취 당할 수 있다.

1. 제 3의 침입자(Prepetator)는 사이트의 취약점을 찾아 세션 쿠키를 탈취하는 스크립트를 삽입한다.
2. 사용자가 웹 사이트에 접근하면 스크립트가 작동하면서, 사용자의 세션 쿠키를 탈취하게 된다.

🔥 XSS 대응 방법

1. 중요 정보(e.g. 개인 정보 등)는 쿠키에 저장하지 않는다.
2. httpOnly 옵션 을 설정한다 (document.cookie를 이용해 쿠키에 직접 접근하는 것을 방지)

👀 XSS와 CSRF 비교

1. XSS가 사용자가 특정 사이트를 신뢰 하기 때문에 발생하는 문제라면, CSRF는 특정 사이트가 사용자를 신뢰 하기 때문에 발생하는 문제이다.
2. XSS는 클라이언트의 브라우저 에서 발생하는 문제이고, CSRF는 서버 에서 발생하는 문제이다.
3. XSS는 사용자의 쿠키 를 탈취할 수 있고, CSRF는 서버로부터 권한 을 탈취할 수 있다.

	XSS	CSRF
방법	악성 스크립트가 클라이언트에서 실행	권한을 도용당한 클라이언트가 가짜 요청을 서버에 전송
원인	사용자가 특정 사이트를 신뢰	특정 사이트가 사용자를 신뢰
공격 대상	클라이언트	서버
목적	쿠키, 세션 갈취, 웹사이트 변조	권한 도용

❶ 세션 스토리지 (Session Storage)

• 브라우저의 세션이 종료되기 전까지 데이터를 저장하고, 브라우저 종료 시 데이터가 삭제된다.
  • 즉 새 탭을 단위로 스토리지가 생성된다.
  • 따라서 세션 스토리지는 잠깐 사용하는 정보를 저장할 때 유용하다.

❷ 로컬 스토리지 (Local Storage)

• 로컬 스토리지의 데이터는 사용자가 직접 삭제하지 않는 이상 만료 기간 없이 데이터를 영구적으로 저장한다.
  • 따라서 브라우저를 종료하거나, 컴퓨터를 재부팅해도 데이터는 로컬 스토리지에 영구적으로 저장된다.
• 사용자 설정, 테마 등 지속적으로 유지해야 하는 데이터를 저장할 떄 사용한다.

02. 브라우저 저장소 정리

---

그렇다면 각 저장소는 언제 사용하면 좋을지 표로 간단히 정리해보자!

	쿠키(Cookie)	세션 스토리지(Session Storage)	로컬 스토리지(Local Storage)
상황	일시적으로 필요한 가벼운 데이터를 저장할 때	브라우저가 종료되면 삭제되는 일시적인 데이터를 저장할 때	브라우저 종료 여부와 상관 없이 지속적인 데이터 저장이 필요할 때
예시	다시보지 않음 팝업창, 로그인 자동 완성 등	일회성 로그인, 비로그인 장바구니 등	자동 로그인, 사용자 설정 등