<div id="readability-page-1" class="page"><div>
 <a href="/m/category/%EC%9D%B4%EB%A1%A0/Frontend">이론/Frontend</a><h3>Cookie와 Web Storage (Local Storage와 Session Storage)</h3>
 </div><cite>유세지</cite>
 2024. 1. 24. 23:21
 <div>
 
<figure data-ke-mobilestyle="widthOrigin" data-filename="Thumbnail.png" data-origin-width="1920" data-origin-height="1080">
 
 <img src="https://blog.kakaocdn.net/dn/bcnmiW/btsDRbQZqAQ/2014fZ8PrjJaKNK3hSoqa0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="702" height="395" data-filename="Thumbnail.png" data-origin-width="1920" data-origin-height="1080">
 
 
</figure>



서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다.

현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 <a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API" target="_blank" rel="noopener">웹 스토리지 API</a>를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해, 그리고 또 다른 저장소인 Indexed DB에 대해서도 간단히 알아보겠습니다.


<h3 data-ke-size="size23">쿠키&nbsp;</h3>
쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송하여 사용자를 식별하고 그에 맞는 동작을 제공할 수 있습니다.

대부분의 웹 서비스에서 사용자를 식별하는 기능은 필수적입니다. 가장 흔한 예시는 로그인 상태 유지입니다. 사용자의 데이터를 저장할 수 없다면 지금 화면을 보고 있는 사람이 로그인 과정을 거쳤더라도, 새로운 페이지에 들어가는 순간 그 데이터를 잃게 됩니다. 이럴때 쿠키를 이용하여 사용자의 로그인 여부를 저장하는 방법을 사용할 수 있습니다.

단, 사용자 데이터는 브라우저에 저장하기엔 민감한 정보입니다. 이러한 정보들은 서버 쪽에 저장하되 해당 정보의 식별자를 쿠키로 저장하고, 이 식별자를 이용해 서버에 저장중인 데이터를 찾아 사용합니다. 이를 세션이라고 하며, 쿠키의 몇몇 단점들을 개선하기 위해 등장한 방법입니다.


<figure data-ke-mobilestyle="widthOrigin" data-filename="edited_edited_blob" data-origin-width="1386" data-origin-height="797">
 
 <img src="https://blog.kakaocdn.net/dn/I2S9d/btsDJXLGrex/9CPp9D1lY7cbKSQOJ4mlNk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="745" height="428" data-filename="edited_edited_blob" data-origin-width="1386" data-origin-height="797">
 
 <figcaption>개발자 도구에서 확인 가능한 쿠키들</figcaption>
</figure>



쿠키의 특징들을 몇 가지 살펴보면 아래와 같습니다.

<ul data-ke-list-type="disc">
<li>이름 : 값 형태로 데이터를 저장</li>
<li>지정한 만료일이 되면 소멸</li>
<li>쿠키에는 유효시간, 도메인, 경로 등의 정보를 포함</li>
<li>쿠키 값의 최대 용량은 4KB, 한 사이트에는 20개까지 저장 가능</li>
<li>서버에서 <code>Set-Cookie</code> 속성을 사용하여 브라우저에 쿠키를 저장</li>
<li>서버 - 브라우저 간 통신에서 자동으로 전송</li>
</ul>

쿠키는 이러한 특성들로 인해 적은 양의, 민감하지 않은 사용자 데이터를 저장하기에 좋습니다. 쿠키에는 최대 4KB의 용량 제한이 있기 때문에, 만약 큰 사이즈의 데이터를 저장해야 한다면 아래에 소개할 웹 스토리지를 이용해야 합니다. 또한 클라이언트에 저장하는 방식이다보니 언제든 탈취의 위험이 존재하고, CSRF(Cross Site Request Forgery)나 XSS(Cross-Site Scripting)처럼 이러한 취약점을 통한 공격 기법들 또한 널리 알려져 있습니다. 


<h4 data-ke-size="size20">쿠키의 보안 옵션</h4>
일반적으로 쿠키는 브라우저에서&nbsp; <code>document</code> 객체를 통해 접근할 수 있습니다. 하지만 위에서 언급했듯 쿠키 정보를 노출하는건 위험하기 때문에, <code>HttpOnly</code> 옵션을 통해 이러한 접근을 차단할 수 있습니다.


<figure>
 <span data-url="https://blog.kakaocdn.net/dn/cO1hb0/btsDQ11X9E4/uAfk15Gf91x7OMorIhyJ8k/img.png" data-lightbox="lightbox" data-origin-width="995" data-origin-height="334" data-is-animation="false" data-filename="edited_blob" data-widthpercent="60.31"><img src="https://blog.kakaocdn.net/dn/cO1hb0/btsDQ11X9E4/uAfk15Gf91x7OMorIhyJ8k/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"><span data-url="https://blog.kakaocdn.net/dn/bRDfwT/btsDQ4xzYb7/fwGLKoRKkz0dfB00xTMQ6K/img.png" data-lightbox="lightbox" data-origin-width="743" data-origin-height="379" data-is-animation="false" data-widthpercent="39.69" data-filename="blob"><img src="https://blog.kakaocdn.net/dn/bRDfwT/btsDQ4xzYb7/fwGLKoRKkz0dfB00xTMQ6K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';">
 
 <figcaption>HttpOnly가 적용된 쿠키값은 자바스크립트로 접근할 수 없습니다.</figcaption>
</figure>



클라이언트에서의 접근 외에도, HTTP 통신을 감청하여 쿠키 값이 유출되는 경우도 있습니다. HTTPS 연결을 사용하면 암호화가 이루어진 채로 통신이 일어나기 때문에 값이 유출되어도 괜찮지만, HTTP 통신에는 이러한 암호화 과정이 없기 때문에 중간에 유출될 가능성이 있습니다.

이런 경우를 방지하기 위해 쿠키에 <code>secure</code> 옵션을 사용하면 HTTPS 통신에서만 쿠키를 전송하도록 할 수 있습니다. 암호화가 이루어지지 않은 HTTP 통신에서는 쿠키를 전달하지 않게 됩니다.

다음으로는 크로스 사이트 요청의 허용 범위를 설정하는 <code>SameSite</code> 옵션이 있습니다. 현재 접속한 도메인으로부터 받고, 다시 전송되는 쿠키를 퍼스트 파티 쿠키(First Party Cookie)라고 하고, 이 외의 도메인으로부터 받은 쿠키를 서드 파티 쿠키(Third Party Cookie) 라고 합니다. SameSite 옵션을 이용하면 쿠키가 서드 파티에서도 전송이 가능하도록 할지, 퍼스트 파티에만 전송되도록 할지 설정할 수 있습니다.

<ul data-ke-list-type="disc">
<li>None : 서드 파티 쿠키 또한 전송</li>
<li>Lax : 안전한 방법에서만 서드 파티 쿠키를 전송, 일반적으로는 퍼스트 파티 쿠키만 전송</li>
<li>Strict : 반드시 퍼스트 파티 쿠키만 전송</li>
</ul>

따로 설정하지 않은 경우 크롬에서는 Lax가 기본값으로 설정되며, 다음과 같은 조건을 모두 만족하는 요청은 안전한 요청으로 간주되어 Lax에서도 전송됩니다.

<ul data-ke-list-type="disc">
<li>GET, HEAD, OPTIONS, TRACE 메서드로 전달되는 요청</li>
<li>최상위 레벨 탐색에서 이루어지는 작업 (&lt;Iframe&gt; 내부, ajax 요청 등은 제외)</li>
</ul>



<h3 data-ke-size="size23">웹 스토리지 (로컬 스토리지 &amp; 세션 스토리지)</h3>

<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="901" data-origin-height="433">
 
 <img src="https://blog.kakaocdn.net/dn/bhphpF/btsDUbvVV55/ZXfkLtphR6kosM1olyr4D1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="704" height="338" data-filename="blob" data-origin-width="901" data-origin-height="433">
 
 <figcaption>로컬 스토리지에 저장된 데이터들</figcaption>
</figure>



웹 스토리지는 로컬 스토리지와 세션 스토리지로 이루어져 있으며, 브라우저 자체에 데이터를 저장하는 방법입니다. 쿠키는 매 통신마다 서버에 값을 송신하고, 수신하기 때문에 불필요한 페이로드가 늘어나는 단점이 있었습니다. 따라서 단순히 데이터 저장이 필요한 경우라면 웹 스토리지가 좋은 대안이 됩니다.

웹 스토리지는 아래와 같은 특징을 가지고 있습니다.

<ul data-ke-list-type="disc">
<li>키 : 값 형태로 데이터를 저장</li>
<li>표준 스펙상 최대 용량은 5MB, 브라우저마다 다름</li>
<li>오리진(origin)마다 별개의 저장소로 분리</li>
</ul>

로컬 스토리지와 세션 스토리지는 위와 같은 특성을 공유하지만, 약간 다른점이 있습니다.

로컬 스토리지의 경우,
<ul data-ke-list-type="disc">
<li>직접 삭제하지 않으면 소멸되지 않음</li>
</ul>
세션 스토리지의 경우, 
<ul data-ke-list-type="disc">
<li>탭을 종료하면 소멸됨</li>
<li>저장소 공유 범위에 &lt;iframe&gt;까지 포함</li>
</ul>

따라서 데이터가 언제 휘발되어야 하는지와 얼마나 공유되어야 할지를 기준으로 보고 로컬 스토리지를 사용해야 할지, 세션 스토리지를 사용해야 할지 선택하는 것이 좋습니다.


웹 스토리지 또한 쿠키와 마찬가지로 브라우저에 저장되고, 자바스크립트로 접근이 가능하여 보안상 위협을 받기 쉽습니다. 민감한 데이터라면 적절한 암호화를 통해 값을 저장해 줄 수 있겠지만, 애초에 그런 데이터라면 저장하지 않는게 가장 좋습니다.


<h3 data-ke-size="size23">마치며</h3>
오늘은 데이터를 저장하는 방법인 쿠키와 웹 스토리지에 대해 알아보았습니다. 각 방법의 특성을 기억한다면 필요한 상황과 데이터에 따라 적절한 방법을 선택하여 데이터를 다룰 수 있겠습니다.

읽어주셔서 감사합니다.


<h4 data-ke-size="size20">참고문서</h4>
<ul data-ke-list-type="disc">
<li><a href="https://datatracker.ietf.org/doc/html/rfc7231#section-4.2.1" target="_blank" rel="noopener">RFC 7231 - Safe Methods</a></li>
<li><a href="https://ko.javascript.info/cookie" target="_blank" rel="noopener">모던 JavaScript 튜토리얼 - 쿠키와 document.cookie</a></li>
<li><a href="https://web.dev/articles/samesite-cookies-explained?hl=ko" target="_blank" rel="noopener">Web.dev - SameSite 쿠키 설명</a></li>
</ul>
 
 
 </div></div>

개발의 올바르지 않은 용례

서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다.
 
현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 웹 스토리지 API를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해, 그리고 또 다른 저장소인 Indexed DB에 대해서도 간단히 알아보겠습니다.
 
 
쿠키 
쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송하여 사용자를 식별하고 그에 맞는 동작을 제공할 수 있습니다.
 
대부분의 웹 서비스에서 사용자를 식별하는 기능은 필수적입니다. 가장 흔한 예시는 로그인 상태 유지입니다. 사용자의 데이터를 저장할 수 없다면 지금 화면을 보고 있는 사람이 로그인 과정을 거쳤더라도, 새로운 페이지에 들어가는 순간 그 데이터를 잃게 됩니다. 이럴때 쿠키를 이용하여 사용자의 로그인 여부를 저장하는 방법을 사용할 수 있습니다.
 
단, 사용자 데이터는 브라우저에 저장하기엔 민감한 정보입니다. 이러한 정보들은 서버 쪽에 저장하되 해당 정보의 식별자를 쿠키로 저장하고, 이 식별자를 이용해 서버에 저장중인 데이터를 찾아 사용합니다. 이를 세션이라고 하며, 쿠키의 몇몇 단점들을 개선하기 위해 등장한 방법입니다.
 
 
 
 
 
쿠키의 특징들을 몇 가지 살펴보면 아래와 같습니다.
 
이름 : 값 형태로 데이터를 저장
지정한 만료일이 되면 소멸
쿠키에는 유효시간, 도메인, 경로 등의 정보를 포함
쿠키 값의 최대 용량은 4KB, 한 사이트에는 20개까지 저장 가능
서버에서 Set-Cookie 속성을 사용하여 브라우저에 쿠키를 저장
서버 - 브라우저 간 통신에서 자동으로 전송
 
쿠키는 이러한 특성들로 인해 적은 양의, 민감하지 않은 사용자 데이터를 저장하기에 좋습니다. 쿠키에는 최대 4KB의 용량 제한이 있기 때문에, 만약 큰 사이즈의 데이터를 저장해야 한다면 아래에 소개할 웹 스토리지를 이용해야 합니다. 또한 클라이언트에 저장하는 방식이다보니 언제든 탈취의 위험이 존재하고, CSRF(Cross Site Request Forgery)나 XSS(Cross-Site Scripting)처럼 이러한 취약점을 통한 공격 기법들 또한 널리 알려져 있습니다. 
 
 
쿠키의 보안 옵션
일반적으로 쿠키는 브라우저에서  document 객체를 통해 접근할 수 있습니다. 하지만 위에서 언급했듯 쿠키 정보를 노출하는건 위험하기 때문에, HttpOnly 옵션을 통해 이러한 접근을 차단할 수 있습니다.
 
 
 
 
 
클라이언트에서의 접근 외에도, HTTP 통신을 감청하여 쿠키 값이 유출되는 경우도 있습니다. HTTPS 연결을 사용하면 암호화가 이루어진 채로 통신이 일어나기 때문에 값이 유출되어도 괜찮지만, HTTP 통신에는 이러한 암호화 과정이 없기 때문에 중간에 유출될 가능성이 있습니다.
 
이런 경우를 방지하기 위해 쿠키에 secure 옵션을 사용하면 HTTPS 통신에서만 쿠키를 전송하도록 할 수 있습니다. 암호화가 이루어지지 않은 HTTP 통신에서는 쿠키를 전달하지 않게 됩니다.
 
다음으로는 크로스 사이트 요청의 허용 범위를 설정하는 SameSite 옵션이 있습니다. 현재 접속한 도메인으로부터 받고, 다시 전송되는 쿠키를 퍼스트 파티 쿠키(First Party Cookie)라고 하고, 이 외의 도메인으로부터 받은 쿠키를 서드 파티 쿠키(Third Party Cookie) 라고 합니다. SameSite 옵션을 이용하면 쿠키가 서드 파티에서도 전송이 가능하도록 할지, 퍼스트 파티에만 전송되도록 할지 설정할 수 있습니다.
 
None : 서드 파티 쿠키 또한 전송
Lax : 안전한 방법에서만 서드 파티 쿠키를 전송, 일반적으로는 퍼스트 파티 쿠키만 전송
Strict : 반드시 퍼스트 파티 쿠키만 전송
 
따로 설정하지 않은 경우 크롬에서는 Lax가 기본값으로 설정되며, 다음과 같은 조건을 모두 만족하는 요청은 안전한 요청으로 간주되어 Lax에서도 전송됩니다.
 
GET, HEAD, OPTIONS, TRACE 메서드로 전달되는 요청
최상위 레벨 탐색에서 이루어지는 작업 (<Iframe> 내부, ajax 요청 등은 제외)
 
 
 
웹 스토리지 (로컬 스토리지 & 세션 스토리지)
 
 
 
 
웹 스토리지는 로컬 스토리지와 세션 스토리지로 이루어져 있으며, 브라우저 자체에 데이터를 저장하는 방법입니다. 쿠키는 매 통신마다 서버에 값을 송신하고, 수신하기 때문에 불필요한 페이로드가 늘어나는 단점이 있었습니다. 따라서 단순히 데이터 저장이 필요한 경우라면 웹 스토리지가 좋은 대안이 됩니다.
 
웹 스토리지는 아래와 같은 특징을 가지고 있습니다.
 
키 : 값 형태로 데이터를 저장
표준 스펙상 최대 용량은 5MB, 브라우저마다 다름
오리진(origin)마다 별개의 저장소로 분리
 
로컬 스토리지와 세션 스토리지는 위와 같은 특성을 공유하지만, 약간 다른점이 있습니다.
 
로컬 스토리지의 경우,
직접 삭제하지 않으면 소멸되지 않음
세션 스토리지의 경우, 
탭을 종료하면 소멸됨
저장소 공유 범위에 <iframe>까지 포함
 
따라서 데이터가 언제 휘발되어야 하는지와 얼마나 공유되어야 할지를 기준으로 보고 로컬 스토리지를 사용해야 할지, 세션 스토리지를 사용해야 할지 선택하는 것이 좋습니다.
 
 
웹 스토리지 또한 쿠키와 마찬가지로 브라우저에 저장되고, 자바스크립트로 접근이 가능하여 보안상 위협을 받기 쉽습니다. 민감한 데이터라면 적절한 암호화를 통해 값을 저장해 줄 수 있겠지만, 애초에 그런 데이터라면 저장하지 않는게 가장 좋습니다.
 
 
마치며
오늘은 데이터를 저장하는 방법인 쿠키와 웹 스토리지에 대해 알아보았습니다. 각 방법의 특성을 기억한다면 필요한 상황과 데이터에 따라 적절한 방법을 선택하여 데이터를 다룰 수 있겠습니다.
 
읽어주셔서 감사합니다.
 
 
참고문서
RFC 7231 - Safe Methods
모던 JavaScript 튜토리얼 - 쿠키와 document.cookie
Web.dev - SameSite 쿠키 설명

Cookie와 Web Storage (Local Storage와 Session Storage)

댓글