<Web> 웹 저장소 Cookie, Session, Storage

2024.04.30 - [Web] - WS (Web Server ) & WAS (Web Application Server)

<Web> WS (Web Server ) & WAS (Web Application Server)

이전 글에서 언급한 용어 및 정의가 나오기 때문에 이전글을 참고하시면 좋을 것 같습니다!

 

이번글에서는 웹 저장소

• 쿠키 (cookie)
• 세션 (session)
• 스토리지 (storage)

에 대해 다뤄보겠습니다.

출처 : https://www.loginradius.com/blog/engineering/guest-post/local-storage-vs-session-storage-vs-cookies/

 

시작!!

---

1. HTTP with Cookie & Session

cookie와 session을 언급하기 앞서 Http의 가장 큰 특징인 Stateless의 개념을 알고 가셔야 합니다.

• Stateless(비상태성) : 매 요청마다 새로운 프로세스가 생성-실행(반환)-죽음, 따라서 요청 간 정보가 유지되지 않는다.

예를 들어 사용자가 서버와 통신을 할 때마다 자신이 누구인지(로그인 등) 서버에 알려야 한다면 굉장히 불편할 것입니다.

이러한 Stateless 가 가지는 문제를 해결하기 위해 쿠키(Cookie)와 세션(Session)이 등장했습니다

* Stateless와 Stateful에 대한 설명은 위에 태그 한 글에 더욱 자세히 작성하였습니다.

---

Stateful HTTP

 

Cookie와 Session을 활용한 HTTP통신은 Stateful 특성을 지니게 됩니다.

• 웹 브라우저는 응답을 받아, 응답 헤더에 붙어있던 요청자 정보를 웹 브라우저 쿠키에 저장한다.
• 웹 브라우저는 이후 요청부터 웹 서버에게 요청자 정보를 함께 전달하여 웹 서버는 누구의 요청인지 알 수 있다

웹 서버가 웹 브라우저에게 최초로 전달해 줄 때 : 웹 서버 응답(Response)의 헤더 Set-Cookie로 전송

웹 브라우저가 그 이후로 웹 서버에게 전달할 때 : 웹 브라우저 요청(Request)의 헤더 Cookie로 전송

---

2. Cookie

쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각입니다.

웹 사이트를 방문할 때 서버는 HTTP 응답 헤더에 쿠키를 포함시켜 클라이언트에 전송하고, 이후 클라이언트는 같은 서버에 요청을 할 때마다 해당 쿠키를 HTTP 요청 헤더에 포함시켜 전송합니다. 쿠키는 주로 사용자 세션 관리, 개인화, 트래킹 등에 사용됩니다.

 

Cookie는 Set-Cookie 헤더를 통해 어떤 데이터를 쿠키로 쓸 것인지, 유효시간 및 보안 설정합니다.

 

쿠키의 특징

• 저장 위치 : 웹 브라우저 (클라이언트)
• 제한된 크기: 대부분의 브라우저는 쿠키의 크기를 4KB로 제한합니다.
• 만료 기간: 쿠키는 설정된 만료 기간이 있으며, 이 기간이 지나면 자동으로 삭제됩니다.
• 도메인 및 경로 제한: 쿠키는 특정 도메인과 경로에 대해서만 유효합니다.

---

쿠키의 종류 & 유효시간(MaxAge or Expires)

쿠키의 종류

• 지속 쿠키 (Persistent Cookie)
  • 사용자의 브라우저에 장기간 저장되는 쿠키
  • 유효시간(MaxAge or Expires)이 설정되어 있다.
  • 사용자가 브라우저를 닫아도 삭제되지 않는다.
• 세션 쿠키 (Session Cookie)
  • 사용자가 브라우저를 열고 있는 동안만 저장되는 쿠키
  • 브라우저를 닫으면 자동 삭제된다.
  • 세션 정보를 유지하기 위해 사용된다.

	명시 O	명시 X
유효시간(MaxAge or Expires)	지속 쿠키 (Persistent Cookie)	세션 쿠키 (Session Cookie)

---

쿠키 보안

1. HttpOnly

• 목적 : HttpOnly 속성은 쿠키를 HTTP(S) 요청을 통해서만 서버에 전송할 수 있도록 제한합니다. HttpOnly가 설정된 쿠키는 JavaScript의 Document.cookie API를 통해 접근할 수 없습니다.
• 보안 효과 : 이 속성은 크로스 사이트 스크립팅(XSS) 공격으로부터 사용자의 쿠키를 보호하는 데 도움을 줍니다. 공격자가 XSS 취약점을 이용하여 사용자의 쿠키를 탈취하는 것을 방지할 수 있습니다.

2. Secure

• 목적 : Secure 속성이 설정된 쿠키는 오직 HTTPS 프로토콜을 통해 전송됩니다. 즉, 암호화된 연결을 통해서만 쿠키 정보가 서버와 클라이언트 간에 교환됩니다.
• 보안 효과 : 중간자 공격(Man-In-The-Middle, MITM)을 방지하는 데 도움을 줍니다. 공격자가 네트워크 트래픽을 가로채 쿠키 정보를 읽거나 변경하는 것을 어렵게 만듭니다.

3. SameSite

• 목적 : SameSite 속성은 쿠키가 같은 사이트에서만 전송되어야 한다는 것을 명시합니다. 이 속성은 None, Lax, Strict 세 가지 값을 가질 수 있으며, 각각 다른 수준의 제한을 적용합니다.
• 보안 효과 : 크로스 사이트 요청 위조(CSRF) 공격을 방지하는 데 도움을 줍니다. 공격자가 사용자를 속여 다른 사이트에서 요청을 보내게 만드는 것을 어렵게 만듭니다.

위 SameSite 설명에서 언급된 None, Lax, Strict에 대해 알아보겠습니다.

 

None, Lax, Strinct?

• None: 쿠키가 모든 상황에서 전송됩니다. (단, Secure 속성과 함께 사용해야 합니다.)
• Lax: 일부 크로스 사이트 요청에서 쿠키를 전송하지 않습니다. 예를 들어, 다른 사이트에서 현재 사이트로의 링크를 클릭할 때 쿠키를 전송하지 않습니다.
• Strict: 쿠키가 오직 같은 사이트의 요청에서만 전송됩니다

---

쿠키의 단점

1. 보안 취약성: 쿠키는 사용자의 컴퓨터에 텍스트 파일 형태로 저장되기 때문에, 암호화되지 않은 경우 제3자에 의해 쉽게 읽힐 수 있습니다. 
2. 크기와 수량 제한: 쿠키는 크기가 한정되어 있어 (대부분의 브라우저에서는 쿠키 하나 당 4KB로 제한) 많은 양의 정보를 저장하기에는 부적합합니다. 또한, 브라우저마다 저장할 수 있는 쿠키의 수에도 제한이 있어 대규모 데이터 저장에는 적합하지 않습니다.
3. 성능 저하: 모든 HTTP 요청에 쿠키 정보가 포함되어 서버로 전송되기 때문에, 필요하지 않은 데이터까지 전송되어 네트워크 트래픽을 증가시키고, 결과적으로 웹 페이지 로딩 시간이 늘어날 수 있습니다.
4. 크로스 도메인 제한: 보안상의 이유로, 쿠키는 기본적으로 그것을 생성한 도메인에서만 접근할 수 있습니다. 

---

3. Session

세션은 서버에서 사용자 정보를 저장하는 방식입니다.

사용자가 웹 사이트에 로그인하면 서버는 세션 ID를 생성하고, 이 ID를 쿠키를 통해 클라이언트에 전송합니다.

사용자가 서버에 요청을 할 때마다 이 세션 ID를 포함하여 서버는 해당 ID를 기반으로 사용자의 정보를 찾아 인증 및 권한 부여를 수행합니다.

 

* 서버 또한 독자적인 쿠키를 가집니다. 즉 Session을 사용한다고, Cookie를 사용하지 않는 것이 아닙니다.

 

세션의 특징

• 서버에 저장: 사용자 정보가 서버에 저장되므로 보안에 유리합니다.
• 용량 제한 없음: 쿠키와 달리 저장할 수 있는 데이터의 크기에 제한이 없습니다. (서버의 용량에 따라 변함)
• 세션 만료 관리: 사용자가 활동하지 않는 동안 세션을 만료시켜 리소스를 관리할 수 있습니다.

---

Session의 장점 

1. 보안 강화: 세션 데이터는 서버에 저장되므로, 클라이언트에 비해 데이터가 더 안전하게 보호됩니다. 쿠키와 달리, 세션 정보는 사용자의 브라우저를 통해 직접 노출되지 않아 XSS 공격의 위험이 줄어듭니다.
2. 대용량 데이터 저장: 세션은 서버 측에 저장되기 때문에 쿠키에 비해 훨씬 더 많은 양의 데이터를 저장할 수 있습니다. 
3. 서버 제어: 세션은 서버에 의해 생성되고 관리되므로, 서버 측에서 사용자의 세션을 보다 효과적으로 제어할 수 있습니다. 예를 들어, 보안 위협이 감지되었을 때 특정 사용자의 세션을 강제로 종료시킬 수 있습니다.
4. 크로스 사이트 요청 위조(CSRF) 방지: 세션을 사용하면 사용자의 상태를 서버에서 관리하기 때문에 CSRF 같은 보안 공격에 대한 보호가 강화됩니다.

---

쿠키와 세션의 차이점

• 저장 위치: 쿠키는 클라이언트에, 세션은 서버에 저장됩니다.
• 보안: 세션은 쿠키보다 보안적으로 유리합니다. 쿠키 데이터는 클라이언트에 저장되므로 조작될 위험이 있지만, 세션 데이터는 서버에 저장되므로 비교적 안전합니다.
• 생명 주기: 쿠키는 만료 기간이 정해져 있으며, 세션은 사용자가 로그아웃하거나 설정된 시간 동안 활동이 없을 경우 만료됩니다.

---

4. Storage

웹 스토리지(Web Storage)는 웹 애플리케이션 데이터를 로컬에 저장하기 위한 HTML5의 기능입니다. 웹 스토리지는 크게 두 가지 형태가 있습니다.

1. Local Storage
2. Session Storage

 

Local Storage

• 장점
  • 서버에 데이터를 전송하지 않으므로, 네트워크 트래픽 감소
  • 영구적으로 데이터 저장 (사용자가 수동으로 삭제하지 않는 한)
  • 쿠키보다 더 큰 데이터 저장 가능 (브라우저에 따라 다르지만 대체로 5MB 내외)
• 단점
  • 클라이언트 사이드에만 저장되므로, 보안에 민감한 데이터 저장에 적합하지 않음
  • 모든 HTTP 요청에 포함되지 않음
  • 동일 출처 정책(Same-origin policy)에 의해 제한됨
• 특징
  • 동일한 브라우저에서만 접근 가능
  • JavaScript를 통해 데이터 CRUD(Create, Read, Update, Delete) 작업 수행 가능

---

Session Storage

• 장점
  • 세션 동안에만 데이터 저장 (브라우저 탭이나 창이 닫히면 삭제됨)
  • 로컬 스토리지와 비슷하게 큰 데이터 저장 가능
  • 사용자의 세션 정보 관리에 유용
• 단점
  • 영구적이지 않은 저장 방식
  • 보안에 민감한 데이터 저장에 적합하지 않음
  • 동일 출처 정책에 의해 데이터 접근이 제한됨
• 특징
  • 탭이나 창을 닫으면 저장된 데이터가 사라짐
  • LocalStorage와 유사하게 JavaScript를 통해 데이터 관리 가능

---

웹 스토리지의 공통적인 단점 및 특징:

• 보안 측면에서, 웹 스토리지에 저장된 데이터는 클라이언트 사이드에서만 관리되므로, XSS(크로스 사이트 스크립팅) 공격에 취약할 수 있습니다. 따라서, 중요한 정보는 서버 사이드에서 관리하는 것이 좋습니다.
• 웹 스토리지는 JavaScript를 통한 접근이 가능하므로, 웹 애플리케이션 개발에 있어서 사용자 경험을 향상시키는 데에 유용하게 사용될 수 있습니다.

웹 스토리지는 쿠키와 비교했을 때 더 큰 데이터를 더 효율적으로 저장할 수 있는 방법을 제공하지만, 보안과 관련된 이슈에 주의해야 합니다.

---