Localstorage, Sessionstorage ,Cookie에 대해서 알아보자

IT쿠키·2024년 6월 20일

오늘은 Localstorage, Sessionstorage ,Cookie에 대해서 알아보자
알아보는 이유는 이제 이 개념을 명확하게 이해해야 도움이 될거 같아서다.

Localstorage

LocalStorage는 웹 브라우저에 데이터를 키-값 쌍으로 저장할 수 있는 방법을 제공합니다

Localstorage 데이터 만료기간이 없고 사용자가 수동으로 지우거나 브라우저 캐시/쿠키를 지우기 전까지는 유지가 된다. 그러니까 브라우저에 있는 사용 내역이나 이런 걸 뻥하고 날리기 전까지는 살아있다는 것이다.
또한 LocalStorage는 도메인과 프로토콜에 따라 접근이 제한되고 5mb정도로만 사용이 가능하다.

-> 장점 : 영구적인 데이터가 저장이 가능하고 쉽게 사용이 가능 일단~ 뭐 저장하고 싶은 데에~ 할 때 사용해도 좋음

-> 단점 : 클라이언트에서만 접근이 가능하다. 그 말은 서버에서는 무슨 짓을 하든 건들 수가 없고 요새는 거의 모든 웹이 HTML5라 상관이 없긴한데 그 이하 버전에서는 사용할 수 없다.

Sessionstorage

Sessionstorage 저장된 데이터가 브라우저 세션이 종료되면 사라진다는 점에서 차이가 있습니다.

일단 Sessionstorage 같은 경우에는 브라우저 창을 닫는 경우에는 뿅하고 없어진다. 말그대로 뿅이고 브라우저 세션이 유지되는 동안은 저장한 값이 저장이 되지만 그 이후에는 바로 뿅하고 없어진다는 특징이 있다.

-> 장점 : 탭이나 창을 닫으면 데이터가 자동으로 삭제되어 보안성이 높음
쉬운 사용법

-> 단점 : 데이터가 영구적이지 않고 Localstorage 마찬가지로 HTML5 이외에서는 사용이 불가능함

웹 서버가 사용자의 웹 브라우저에 저장하는 작은 데이터 조각이라고 생각하면 편하다.

일단 Cookie는 Sessionstorage와 Localstorage와는 다르게 사용자가 사이트를 재방문할 때마다 웹 서버에 의해 읽힐 수 있으며, 사용자의 세션 관리, 개인화, 추적 등에 사용됩니다. 쿠키는 만료 날짜를 설정할 수 있으며, 설정된 만료 날짜가 지나면 자동으로 삭제된다. 그러니까 보통적으로 사용하는 세션과 로컬과는 달리 사용자가 지정할 수 있다는 말이다.

-> 장점 : 서버와 클라이언트 양쪽에서 접근이 가능하고 만료 날짜를 설정할 수 있다.

-> 단점 : 일단 쿠키는 보안이 취약하다. 여기서 여러 가지 이유가 있는 데 일단 5가지의 이유를 알아보자

평문 전송: 기본적으로 쿠키는 암호화되지 않은 상태로 전송되기 때문에, 네트워크를 통해 데이터가 전송될 때 중간자 공격(Man-in-the-Middle Attack)에 노출될 수 있습니다. 이를 통해 민감한 정보가 유출될 수 있습니다.

XSS 공격: 쿠키는 크로스 사이트 스크립팅(XSS) 공격에 취약할 수 있습니다. 악의적인 스크립트가 웹 페이지에 주입되어 실행될 경우, 이 스크립트가 쿠키를 읽어서 외부로 전송할 수 있습니다.

CSRF 공격: 크로스 사이트 요청 위조(CSRF) 공격은 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행동을 하도록 만듭니다. 예를 들어, 사용자가 로그인 상태에서 악의적인 링크를 클릭하면, 사용자의 쿠키를 사용하여 서버에 요청을 보낼 수 있습니다.

세션 하이재킹: 쿠키에 저장된 세션 ID가 탈취되면, 공격자는 사용자의 세션을 도용할 수 있습니다. 이를 통해 사용자가 로그인한 상태에서 수행할 수 있는 작업을 공격자가 대신 수행할 수 있습니다.

쿠키 설정의 부적절한 관리: 쿠키의 속성인 Secure, HttpOnly, SameSite 등이 적절히 설정되지 않으면 보안 위험이 증가합니다. 예를 들어, HttpOnly 속성이 설정되지 않은 경우, 자바스크립트를 통해 쿠키에 접근할 수 있어 XSS 공격에 더 취약해집니다.

여러 가지 해결방법이 있지만 일단은 SOP나 HTTPS 로 보안적인 설정을 해줄 수가 있고 쿠키에 시간을 조절하는 방법등이 있다.

지금 SessionStorage, LocalStorage, Cookie에 대해서 알아봤다. 아 그런데 여기서 또 중요한 점은 세가지에 대해서 공통점이 있는 데 세 가지다. 브라우저에서 활용된다는 점과 즉 클라이언트에서 사용된다는 점 그리고 무언가를 저장한다는 점이다. 물론 다른 점은 쿠키는 서버와 클라이언트 간의 상태 정보를 유지하는 데 좋다.

오늘은 이걸로 마무리 하겠습니다.

profile
IT 삶을 사는 쿠키

0개의 댓글