Today I Learned

오늘은 클라이언트 사이드에 데이터를 저장하는 대표적인 방법인 쿠키와 로컬스토리지, 그리고 세션 스토리지에 대해 공부하였다. 이 세가지의 특징과 동작 방식, 장 단점에 대하여 조금 더 깊이 찾아보았다.

쿠키

쿠키는 key=value;형태로 이루어진, 로컬(브라우저)에 저장되는 데이터로, 문자열로 구성되어 있다.

쿠키를 통한 데이터 통신 과정

1. 클라이언트는 서버에 요청을 보낸다.
2. 서버가 응답할 때, http헤더에 쿠키를 함께 담아 응답한다.
3. 쿠키는 만료 기한이 정해져 있고, 만료되지 않은 쿠키는 브라우저에 보관하고 있으며, 이는 브라우저를 닫아도 지워지지 않는다. 만료된 쿠키는 자동으로 지워진다.
4. 클라이언트가 다시 같은 도메인에 요청을 보낼 때, http헤더에 쿠키를 담아 함께 보낸다.
5. 서버는 쿠키를 받아 뭔가를 처리하고, 쿠키 값을 업데이트 해야 할 필요가 있다면, 업데이트 된 쿠키의 값을 헤더에 담아서 클라이언트에 응답한다.

쿠키의 장점과 단점들

장점

1. 쿠키는 만료 기한이 정해져 있는 데이터이다. 따라서 만료 기한이 지나면, 브라우저에서 자동으로 삭제된다. 따라서 개발자는 만료된 쿠키의 값을 지우거나 업데이트 하기 위하여 특별히 추가적인 조치를 취할 필요가 없다. 전지적 개발자 시점

단점

1. 파싱이 불편하다.

console.log(document.cookie); // "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC;

쿠키는 문자열로 이루어져 있기 때문에, key-value를 찾아 쓰기 위해서는 첫 번째는 ;로 나누어 파싱해야하고, 다시 =으로 파싱해야하는 불편한 문제점을 갖고 있다.
2. 불필요한 정보까지 헤더에 담아 함께 전송해야한다.
쿠키는 문자열로 이루어져있는 key-value 쌍이 함께 존재하는 값이므로, 따로 자를 수 없고 함께 헤더에 담아서 보내야 한다. 서버에 보낼 필요가 없는 데이터들까지 보내기 때문에, 불필요한 용량을 차지한다는 단점이 존재, 헤더 크기가 커질 수록 응답에 필요한 시간이 증가할 수 밖에 없다.
3. 쿠키가 가질 수 있는 최대 크기는 4KB이다.
쿠키는 최대 300개까지 값을 가질 수 있고, 하나의 도메인 당 20개의 key-value 값을 가질 수 있다. 20개가 넘는 key가 필요하다면 난감해질 수 있다.
4. XSS(cross-site-scripting) 공격에 취약하다.
XSS는, 서버가 제공하는 스크립트 파일이 아닌, 허가되지 않은 제3자가 임의로 스크립트를 실행하여 의도지 않은 동작을 발생시키는 공격을 말한다. document.cookie를 통해 쿠키 값을 얻을 수 있었다. 이러한 쿠키 값을 이용하여 개인 식별 정보들을 저장하고 서버에 전송하므로, 제3의 사용자가 쿠키를 탈취하여 변조 및 본인으로 위장할 수 있는 위험이 있다.

XSS 공격에 대응하기 위한 방안

• http-only 옵션을 사용
  http-only 옵션을 사용할 경우, 오직 http요청 시에만 쿠키 값을 읽을 수 있으며, 일반적인 자바스크립트 document.cookie를 이용하여 쿠키의 값을 읽을 수 없다.

http-only 쿠키의 한계

요즘은 클라이언트 웹 페이지를 SPA(Single Page Application)으로 구현한다. 하나의 페이지에서 많은 작업들을 하기 위하여 서버와 AJAX(Asynchronous Javascript And XML)로 주로 통신하게 되는데, http-only의 쿠키에는 접근이 불가능하므로, 사용자 식별 등에 접근이 어려워 기능 구현에 많은 어려움을 겪을 수 있다.

Local Storage와 Session Storage

LocalStorage와 SessionStorage모두 html5에서 추가된 저장소이다. key - value로 이루어져있다. window(global)객체에 포함되어 있으며, set(key, value), get(value) 등 편한 메소드로 쉽게 값을 얻거나 수정할 수 있다.

특징

공통점

• 모두 key-value쌍으로 이루어져 있으며, 쿠키에 비해 값을 얻기 쉽다.
• 최대 저장할 수 있는 크기는 약 2.5MB정도이다. 쿠키에 비해서는 엄청 큰 정보들 역시 저장이 가능하다.

LocalStorage

• 개발자 또는 사용자가 직접 값을 제거하지 않는이상, 영구적으로 브라우저에 저장되어 있다.
• 해당 도메인은 LocalStorage를 공유하므로, 여러 창을 띄어 놓아도 같은 정보를 공유하고 있기 때문에 탭 간의 정보의 차이가 발생하지 않는다.

SessionStorage

• 휘발성 정보로, 브라우저를 닫으면 삭제된다.

특이사항 및 주의해야 할 점

• Storage는 key, value 모두 문자열로만 저장한다. 따라서 어떤 객체를 저장할 때에는(배열 포함) JSON.stringify()를 통해 객체를 문자열로 파싱하여 저장하고, 값을 꺼내 쓸때는 JSON.Parse()를 이용하여 문자열로 변환된 객체를 다시 객체로 파싱하여 사용한다.
• Storage 또한 평문으로 값을 저장하므로, 평문으로 되어 있는 비밀번호를 저장하는 미친 짓은 절대로 하면 안된다.

마치며

오늘은 클라이언트 사이드에 데이터를 저장하는 쿠키 그리고 스토리지(Local, Session)에 대해 알아보았다. 주로 리액트를 사용하며 AJAX로 통신했기 때문에 Storage를 사용하여 데이터를 다루었지만, 아직까지 많은 브라우저들이 쿠키를 이용하여 정보를 다루고 있기 때문에 쿠키에 대해서 집중적으로 정리를 해보았다.
정리하면서 파생된 모르는 개념들을 한번 더 찾아봐야겠다.