Cookie vs LocalStorage vs SessionStorage : 차이점은 무엇일까?

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

목차 LIST

 

Cookie

최대 4KB 용량을 가진 매우 작은 양의 데이터로 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 것과 같이 다양한 방법으로 사용되며, 문자열만 저장 가능하다는 제한이 있습니다.

많은 사이트들은 최초 로그인 이후에 쿠키를 사용해 유저의 신원을 확인하는 방식을 사용하는데, 이 때문에 유저는 일정 시간동안 다시 인증을 하지 않아도 됩니다. 

쿠키는 웹 브라우저와 서버 간의 상태 정보를 유지하기 위해 HTTP 프로토콜을 사용하는 기술입니다. 최초 로그인 이후에 모든 HTTP 요청에 로그인 정보를 담은 쿠키를 서버에 계속 전달해주는 방식으로 동작됩니다.

 

동작 방식

1. 쿠키와 HTTP 프로토콜 : 쿠키는 HTTP 프로토콜의 일부로 정의되어 있으며, 웹 브라우저와 서버간의 HTTP 요청과 으답 헤더를 통해 전송됩니다. 쿠키는 사용자가 웹 사이트를 방문할 때 생성되며, 서버에서 생성한 쿠키 정보를 사용자의 웹 브라우저에 저장합니다.
   
   
2. 로그인 상태 유지 : 사용자가 웹사이트에 로그인할 때, 서버는 로그인 성공을 확인한 후 사용자의 로그인 상태를 나타내는 쿠키를 생성합니다. 이 쿠키는 사용자의 브라우저에 저장되며, 이후 사용자가 사이트 내에서 다른 페이지로 이동하거나 추후에 사이트를 다시 방문할 때 서버로 전송됩니다.
   
   
3. 모든 HTTP 요청에 쿠키 전달 : 저장된 쿠키는 사용자의 브라우저에서 해당 사이트로의 모든 HTTP 요청과 함께 자동으로 서버에 전송됩니다. 이를 통해 서버는 쿠키 정보를 확인하고, 사용자가 인증된 상태인지 판단할 수 있습니다. 이렇게 되면, 사용자는 로그인 상태를 유지할 수 있고 서버는 각 요청이 동일한 사용자로부터 온 것임을 알 수 있습니다.

 

Cookie의 두 가지 유형

1) Persistent cookie : 만료일을 포함하는 쿠키

만료일까지 유저 디스크에 저장되며 만료일이 지나면 삭제됩니다. 유저들에 대한 커스텀 서비스를 제공하기 위해 특정 웹사이트에서의 행동을 기록하는 것과 같은 여러 활동에 사용될 수 있습니다.

 

2) Session cookie : 만료일을 포함하지 않는 쿠키

브라우저가 열려있는 동안만 유지되며, 브라우저가 닫힐 때 영구적으로 삭제됩니다. 예를 들면, 은행 웹사이트는 브라우저를 닫으면 모든 정보를 삭제하기 때문에 사용자들의 정보를 안전하게 관리할 수 있습니다.

 

Cookie의 보안

Secure 및 HttpOnly 플래그와 같은 옵션을 사용하여 쿠키의 보안을 강화할 수 있습니다.

• Secure : 이 플래그가 설정된 쿠키는 HTTPS 연결을 통해서만 전송됩니다. 즉, 데이터가 암호화되어 전송되기 때문에 네트워크를 통한 공격으로부터 보호할 수 있습니다. (Man-in-the-Middle Attack)
• HttpOnly : 이 플래그가 설정된 쿠키는 웹 서버에 의해서만 액세스 될 수 있고, 클라이언트 측 스크립트(자바스크립트) 에서는 접근 할 수 없습니다. 이는 크로스 사이트 스크립팅(XSS) 공격으로부터 쿠키를 보호하는데 도움이 됩니다.
  
  사용 방법
  HTTP 응답 헤더에 'Set-Cookie'와 함께 'HttpOnly' 속성을 포함하여 쿠키를 설정합니다.
  예) 'Set-Cookie: sessionId=abc123; HttpOnly'

 

"클라이언트 측 스크립트에서 접근할 수 없다"는 말에 대해 자세히 살펴보겠습니다.

웹페이지에 포함된 JavaScript와 같은 스크립트 언어를 통해 해당 쿠키의 값을 읽거나 수정할 수 없다는 것을 의미합니다. 즉, 사용자의 브라우저에서 실행되는 스크립트는 HttpOnly 플래그가 설정된 쿠키에 접근할 수 없습니다.
이러한 제한으로 보안을 강화할 수 있는데, 예를 들어, 웹사이트가 크로스 사이트 스크립팅(XSS) 공격에 취약한 경우, 공격자는 악의적인 스크립트를 웹페이지에 주입할 수 있습니다. 이 스크립트는 웹페이지를 보는 모든 사용자의 브라우저에서 실행될 수 있습니다. 만약 사용자가 로그인 상태라면, 공격자의 스크립트는 일반적으로 사용자의 쿠키에 접근하여, 예를 들어 사용자의 세션 ID를 탈취할 수 있습니다. 이 ID를 가진 공격자는 사용자처럼 시스템에 접근할 수 있게 됩니다.

그러나 HttpOnly 플래그가 설정된 쿠키는 이러한 스크립트로부터 보호됩니다. 즉, 클라이언트 측 스크립트(공격자의 스크립트 포함)는 쿠키의 값을 읽거나 변경할 수 없습니다. 이 쿠키는 오직 서버와의 HTTP 요청을 통해서만 서버에 전송됩니다. 따라서, HttpOnly 플래그는 사용자의 중요한 인증 정보를 보호하는 데 도움이 됩니다.

 

LocalStorage

HTML5가 나오고 Cookie를 사용하던 많은 방법들은 LocalStorage의 사용으로 대체되었습니다. LocalStorage를 사용했을 때의 장점이 많이 있기 때문인데요. 가장 중요한 장점 중 하나는 cookie와 달리 모든 HTTP 요청에서 데이터를 주고 받을 필요가 없다는 것입니다. HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 사용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있습니다. 데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문입니다.

낭비되는 대역폭이란?
먼저, 대역폭(Bandwidth)는 특정 시간 동안 네트워크를 통해 전송될 수 있는 최대 데이터의 양을 의미합니다. 따라서 높은 대역폭은 더 많은 데이터를 빠르게 전송할 수 있음을 나타냅니다.

클라이언트와 서버 간에 빈번한 데이터 전송이 있을 때, 많은 대역폭이 사용됩니다. 특히 반복적으로 같은 데이터를 요청하거나 전송할 때 문제가 될 수 있으며 이렇게 불필요하게 사용되는 대역폭을 "낭비되는 대역폭"으로 간주할 수 있습니다. 이는 서버의 부하 증가, 느린 응답 시간, 사용자의 데이터 사용량 증가로 이어질 수 있습니다.

 

또한, LocalStorage는 대략 5~10MB의 용량을 가집니다. 이는 cookies의 용량인 4KB와 비교했을 때 훨씬 더 많은 정보를 저장할 수 있음을 알 수 있습니다.

 

LocalStorage는 기본적으로 만료 기한이 없기 때문에 LocalStorage에 저장된 데이터는 사용자가 명시적으로 지우거나, 브라우저의 캐시/로컬 데이터를 클리어할 때까지, 또는 브라우저나 운영 체제에 의해 자동으로 지워지지 않는 한 계속 남아 있습니다. 이는 LocalStorage가 주로 장기간에 걸쳐 데이터를 저장하기 위한 용도로 설계되었기 때문입니다.

 

그리고 문자열만 저장이 가능했던 cookie와 달리 LocalStorage는 문자열 뿐 아니라 Javascript의 object도 저장이 가능합니다.

 

LocalStorage는 동일한 Origin(동일 프로토콜, 도메인, 포트)을 공유하는 모든 탭/윈도우에서 공유됩니다. 예를 들어, 같은 사이트를 여러 탭에서 열었을 때, 모든 탭은 같은 localStorage에 접근하고 수정할 수 있습니다.

 

 

사용 시 주의점

LocalStorage는 그 자체로는 암호화와 같은 보안 기능을 제공하지 않으므로 보안이 중요하거나 민감한 데이터를 저장하는 것은 적합하지 않을 수 있습니다. 데이터 보안이 필요한 경우에는 서버 측 세션 스토리지, HTTPS를 통한 데이터 전송, 데이터 암호화 등 추가적인 보안 조치를 고려해야 합니다.

 

 

SessionStorage

SessionStorage는 브라우저 종료와 같이 데이터 세션이 끝나면 데이터가 삭제되는 스토리지로 주로 휘발성 데이터를 저장할 때 사용됩니다. Session 기간동안만 데이터를 저장하기 때문에 보안 측면에서 유리하다는 장점이 있습니다. 이는 민감한 정보가 장기간 클라이언트 측에 남아 있을 위험을 줄여줍니다.

용량은 LocalStorage와 유사하게 5~10MB 정도의 데이터를 저장할 수 있습니다.

 

세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성되며, 서로 다른 세션 스토리지는 서로 영향을 주지 않고 독립적으로 동작됩니다.

해당 저장소에는 일회성 로그인이나 입력 폼 저장과 같이 잠깐 동안만 필요한 정보를 저장할 때 사용하기에 적합합니다. 부라우저를 종료하면 이러한 정보는 자동으로 사라지므로, 임시적인 데이터 관리에 유용합니다.

 

cookie와의 차이점

SessionStorage/LocalStorage에 저장된 데이터는 클라이언트에서만 접근 및 관리가 가능하며, 자동으로 서버에 전송되지 않습니다. 서버와의 통신이 필요한 경우, 자바스크립트를 통해 데이터를 읽고 명시적으로 서버로 전송해야 합니다.

 

하지만 cookie는 해당 cookie가 생성된 도메인으로의 모든 HTTP 요청과 함께 자동으로 서버에 전송됩니다. 이는 웹 서버가 사용자의 상태를 유지하고, 세션 관리, 사용자 인증, 사이트 선호도 설정 등을 할 수 있도록 돕습니다. 물론 특정 도메인과 경로에 대한 요청에만 포함되도록 cookie 선택적 전송도 가능합니다.

 

Q. 쿠키와 로컬 스토리지는 어디에 저장되는가?

쿠키와 로컬 스토리지는 동일하게 웹 브라우저의 사용자 프로필 디렉토리 내의 데이터베이스 파일에 저장되며, 이 파일은 웹 브라우저의 내부 메커니즘에 의해 관리됩니다.

 

 

 

References

쿠키 vs 로컬스토리지 차이점은 무엇일까

세션-로컬-쿠키