웹 스토리지 이해하기

들어가며

이번 시간에는 웹 애플리케이션에서 클라이언트 사이드에 데이터를 저장하는 메커니즘인 웹 스토리지에 대해 알아보도록 하겠습니다.

 

웹 스토리지가 뭐지?

웹 스토리지(Web Storage)는 웹 브라우저에서 제공하는 두 가지 종류의 스토리지, 즉 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage)를 총체적으로 일컫는 용어입니다. 이들은 각각 클라이언트 사이드에서 데이터를 저장하는 방법에 따라 다르게 동작합니다.

 

• 로컬 스토리지(Local Storage)
  로컬 스토리지는 사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 유지되는 영구 저장소입니다. 데이터가 서버로 전송되지 않습니다.
• 세션 스토리지(Session Storage)
  세션 스토리지는 로컬 스토리지와 유사하지만 사용자가 브라우저 탭 또는 브라우저 창을 닫으면 세션 스토리지의 데이터도 함께 사라지는 임시 저장소입니다. 각 브라우저 탭마다 고유한 세션 스토리지를 갖습니다.
•  

 

언제 사용할까?

각각 다음과 같은 경우에 사용할 수 있습니다.

 

로컬 스토리지는 사용자가 웹 사이트에 다시 방문했을 때 이전에 입력했던 정보를 기억하게 하는 등의 용도로 사용될 수 있습니다. 예를 들어, '사용자 환경 설정'이나 '장바구니 기능'에서 사용자의 데이터를 저장하는 데 활용될 수 있습니다.

 

반면, 세션 스토리지는 한 세션 동안의 임시 데이터 저장에 적합합니다. 예를 들어, 여러 페이지로 이루어진 설문 조사 응답 내용을 저장하는 데 활용될 수 있습니다.

 

보안 이슈

민감하거나 중요한 정보는 웹 스토리지에 저장되지 않아야 합니다.

• 크로스 사이트 스크립팅 (Cross-Site Scripting, XSS)
   XSS 공격은 공격자가 웹 사이트에 악성 스크립트를 삽입하여, 이 스크립트를 실행시켜 사용자의 정보를 탈취하는 방식의 공격입니다. 즉, 공격자가 악성 스크립트를 통해 웹 스토리지에 접근하면, 사용자의 정보를 탈취할 수 있습니다. 웹 스토리지는 자바스크립트를 통해 접근이 가능하기 때문에, XSS 공격에 취약합니다.
• 데이터 노출
  웹 스토리지에 저장된 데이터는 브라우저를 통해 언제든지 확인하고 수정할 수 있습니다. 따라서, 웹 스토리지에는 민감한 정보(e.g. 로그인 토큰, 개인정보 등)를 저장하지 않는 것이 좋습니다. 민감한 정보는 필요한 경우 서버 사이드에 저장하거나, 적절한 암호화를 거친 후에 클라이언트 사이드에 저장해야 합니다.
  

이런 이슈를 해결하기 위해 다음과 같은 방법을 사용할 수 있습니다.

1. 입력값 검증
   사용자가 입력하는 모든 정보는 항상 신뢰할 수 없다는 가정 하에 처리해야 합니다. 공격자는 입력 필드를 통해 악성 스크립트나 쿼리를 주입할 수 있기 때문입니다.
2. 적절한 콘텐츠 보안 정책 (Content Security Policy, CSP) 적용
   CSP는 웹 브라우저에게 특정 페이지에서 실행 또는 로드를 허용할 스크립트의 출처를 알려주는 방식입니다. 이를 통해 XSS 공격을 예방할 수 있습니다. 예를 들어, CSP는 페이지에서 오직 특정 도메인에서 로드된 스크립트만 실행하도록 브라우저에 지시할 수 있습니다.
3. HttpOnly 플래그 사용
   HttpOnly는 쿠키의 플래그 중 하나로, 이 플래그가 설정된 쿠키는 자바스크립트를 통한 접근이 불가능합니다. 이는 XSS 공격을 방지하는 데 도움이 됩니다. 민감한 정보(e.g. 사용자의 세션 ID)를 저장할 때  HttpOnly 쿠키를 사용하면, 이 정보는 웹 스토리지와 달리 자바스크립트를 통해 읽거나 변경될 수 없습니다.

 

쿠키와는 뭐가 다른 거지?

클라이언트 사이드에 데이터를 저장하는 또 다른 방법으로는 이전에 알아봤던 쿠키가 있습니다. 그럼 웹 스토리지는 쿠키와는 뭐가 다른 걸까요?

 

크게 세 가지 측면에서 알아보겠습니다.

1. 용량
   쿠키는 보통 4KB의 데이터만 저장할 수 있지만, 웹 스토리지는 브라우저에 따라 다르지만 대체로 5MB 이상의 데이터를 저장할 수 있습니다.
2. 성능
   쿠키는 클라이언트와 서버 사이에서 각 HTTP 요청마다 전송되므로, 데이터가 크면 클수록 네트워크 효율성이 떨어집니다. 반면에 웹 스토리지의 데이터는 HTTP 요청과 무관하게 클라이언트 사이드에서만 관리되므로, 네트워크 부하를 줄일 수 있습니다.
3. 보안
   쿠키는 HTTP 통신을 통해 서버로 전송되므로, 중간에서 쿠키 정보를 탈취하는 공격에 취약합니다. 반면에 로컬 스토리지의 데이터는 클라이언트 사이드에서만 관리되므로, 이런 종류의 공격에는 더 안전합니다. 하지만, 웹 스토리지 역시 자바스크립트를 통해 접근이 가능하기 때문에 XSS 공격 등에 취약하므로, 보안에 주의해야 합니다.

 

이런 경우에 쿠키를 사용하기 좋습니다.

1. 서버와 클라이언트 간 상태 유지 필요
   쿠키는 HTTP 요청과 응답에 포함되므로, 서버와 클라이언트 간의 상태를 유지하는데 사용됩니다. e.g. 로그인 상태 유지
2. 작은 데이터 저장
   쿠키의 용량 제한은 약 4KB입니다. 따라서 작은 양의 데이터를 저장하고 이를 서버와 클라이언트 간에 전달해야 하는 경우 쿠키를 사용합니다.

 

이런 경우에 웹 스토리지를 사용하기 좋습니다.

1. 큰 데이터 저장
   웹 스토리지는 쿠키보다 많은 데이터를 저장할 수 있습니다 (일반적으로 5MB 이상). 클라이언트 사이드에서 큰 양의 데이터를 저장하고 관리해야 하는 경우 웹 스토리지를 사용합니다.
2. 페이지 간 데이터 공유
   웹 스토리지는 동일한 출처(즉, 같은 도메인, 프로토콜, 포트를 가진 페이지)에 속한 모든 페이지에서 접근이 가능합니다.
3. 세션 관리
   세션 스토리지는 사용자가 브라우저 탭을 닫을 때 데이터가 사라지므로, 사용자의 세션 정보를 임시로 저장하고 관리하는 데 사용됩니다.

 

마치며

지금까지 웹 스토리지에 대해서 알아봤는데요. 웹 스토리지는 클라이언트에 데이터를 저장하기 위한 방법으로 로컬 스토리지와 세션 스토리지로 이루어져 있습니다. 쿠키와 마찬가지로 장단점이 있으니 비교해 보고 더 적합한 방법을 택하시면 될 것 같습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

See also

https://yepchani.tistory.com/entry/HTTP에-대해-알아보자

https://yepchani.tistory.com/entry/HTTP-쿠키-이해하기

https://yepchani.tistory.com/entry/HTTP-세션-이해하기

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

 

References

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://en.wikipedia.org/wiki/Web_storage