[Web] 쿠키(Cookie) vs 세션(Session) vs 웹 스토리지(Web Storage)의 차이를 쉽게 알아봅시다.

[Web] 쿠키(Cookie) vs 세션(Session) vs 웹 스토리지(Web Storage)의 차이를 쉽게 알아봅시다.

📖 들어가며

웹 애플리케이션을 제작하거나 사용하면서 가장 중요한 부분 중 하나는 데이터의 저장 및 관리입니다.

이를 위해 쿠키, 세션, 웹 스토리지와 같은 기술들이 널리 사용되고 있으며, 이들은 각각은 고유한 특징과 장단점을 가지고 있습니다.

이번 글에서는 쿠키, 세션, 웹 스토리지의 차이를 자세히 알아보고, 각각의 장단점과 일반적인 사용 상황, 그리고 보안 이슈에 대해 살펴보겠습니다.

쿠키(Cookie)

쿠키는 웹 서버 또는 클라이언트에서 생성되어 웹 브라우저에 저장되는 클라이언트 측에 저장되는 key와 value로 이루어진 작은 텍스트 파일입니다.

 

일반적으로 쿠키는 만료일을 가지고 있으며, 만료일이 지나면 자동으로 삭제되는 구조입니다.

 

웹 서버가 응답을 보낼 때 HTTP 헤더를 통해 쿠키를 클라이언트에게 전송하고 클라이언트가 같은 서버로 요청을 보낼 때마다 브라우저는 쿠키를 HTTP 헤더에 자동으로 포함시켜 전송하고 이를 통해서 서버는 클라이언트를 식별하고 상태 정보를 유지합니다.

 

주로 사용자의 세션을 관리하거나, 사용자의 정보나 개인 설정을 저장하는 데 사용됩니다.

예를 들어, 사용자가 웹 사이트에 로그인하면 사용자의 로그인 정보를 쿠키에 저장하여 사용자가 다시 방문할 때마다 로그인을 유지할 수 있습니다.

장점

• 사용자의 브라우저에 직접 저장되므로, 서버의 부하를 줄일 수 있습니다.
• 사용자가 웹사이트를 다시 방문하면 기존의 상태를 불러올 수 있습니다.
• HttpOnly 옵션으로 XSS(Cross Site Scripting) 공격에 대한 보안을 강화할 수 있습니다. HttpOnly 옵션을 설정하게 되면 클라이언트에서 쿠키에 접근할 수 없습니다.

단점

• 용량이 작습니다.(총 4KB)
• 모든 HTTP 요청에 쿠키 정보가 포함되어 전송되므로, 네트워크 트래픽을 증가시킵니다.
• HttpOnly 옵션을 사용하지 않으면 XSS 공격에 취약합니다.
• CSRF(Cross-Site Request Forgery) 취약: 웹 사이트가 쿠키를 사용해 사용자의 세션을 관리하고 있을 때, 사용자가 로그인 상태에서 공격자가 만든 악의적인 웹페이지에 방문하면, 해당 웹페이지는 사용자의 브라우저를 통해 악의적인 요청을 보낼 수 있습니다. 
  • 이러한 보안을 강화하기 위한 방법 중 하나로 SamSite 옵션을 사용하는 방법이 있습니다. SamSite 옵션은 쿠키가 같은 도메인에서만 전송되도록 제한할 수 있습니다. 따라서, 사용자가 다른 사이트에서 악의적인 요청을 보내도 해당 요청에는 쿠키가 포함되지 않습니다.

세션(Session)

세션은 서버 측에서 클라이언트를 식별하기 위해 사용하는 기술입니다.

 

클라이언트가 처음 서버에 접속하면, 서버는 고유한 세션 ID를 생성하고 이를 클라이언트에게 전달합니다. 이 세션 ID는 주로 쿠키를 통해 클라이언트에게 전달되며, 클라이언트는 이후 요청마다 세션 ID를 서버에 전달하여 자신을 식별합니다.

 

서버는 세션 ID를 통해 클라이언트의 정보를 서버 메모리 또는 데이터베이스에 저장하고 관리하며, 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다.

쿠키와 세션의 차이는 동작 원리는 결국 세션도 쿠키를 사용하기 때문에 비슷합니다.
데이터가 저장되는 곳이 클라이언트(쿠키)인가 서버인가(세션)의 차이 및 저장 기간이 있습니다.

장점

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

단점

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

웹 스토리지(Web Storage)

HTML5부터 지원하는 웹 스토리지(Storage)로 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.

쿠키보다 훨씬 더 많은 데이터를 저장할 수 있으며, 클라이언트에 저장만 할 뿐 서버에 자동으로 전송되지 않습니다.

브라우저 세션 간에 데이터를 유지하거나, 쿠키를 사용하지 않는 환경에서 데이터를 로컬에 저장하는 데 유용합니다.

세션 스토리지(Session Storage)

• 브라우저의 세션이 종료될 때(닫을 때)까지 데이터를 저장합니다.
• 새창, 새 탭 단위로 스토리지가 생성이 되는데요. 이후 사용자가 브라우저를 닫으면 세션스토리지의 모든 정보가 삭제됩니다. 이렇기 때문에 잠깐 정보를 저장할 때 유용하게 사용됩니다.

로컬 스토리지(Local Storage)

• 사용자가 웹 사이트를 닫거나, 컴퓨터를 재부팅해도 데이터는 계속 저장되어 있으며 즉, 직접 삭제하지 않는 이상 만료 기간 없이 데이터를 영구적으로 저장합니다.
• 사용자 설정, 테마 등 지속적으로 유지해야 하는 데이터를 저장하는 데 사용됩니다.

장점

• 쿠키에 비해 더 큰 데이터를 저장할 수 있습니다. (세션 스토리지와 로컬 스토리지 각각 최대 5MB)
• HTTP 요청에 데이터를 자동으로 포함하지 않아 쿠키에 비해 추가적인 네트워크 트래픽을 줄일 수 있으며, CSRF에 안전합니다.

단점

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

참고 문헌:

https://raonctf.com/essential/study/web/cookie_connection
https://interconnection.tistory.com/74
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API