헬린코린이
쿠키 & 웹 스토리지 본문
쿠키란
브라우저에 저장되는 작은 크기의 문자열(최대 4KB)입니다.
http는 비연결성, 무상태성의 특징을 가지고 있습니다.
특징
- 주로 서버에서 사용합니다
- 요청 시 Headers에 실려서 전송합니다.
- 만료 기간 지정 가능합니다.
쿠리는 만료기간에 따라
영구쿠키(Persistent Cookie)와 세션쿠키(Session Cookie)로 나뉩니다.
영구 쿠키(Persistent Cookie)는
만료기간을 정한 쿠키이며
만료 기간이 끝난 후 삭제됩니다.
세션쿠키(Session Cookie)는
만료기간을 정하지 않은 쿠키이며
브라우저 종료 시 삭제됩니다.
쿠키는
퍼스트파티 쿠키(First party Cookie)와 서드파티 쿠키(Third party Cookie)로도 나뉘는데
퍼스트파티 쿠키(First party Cookie)는
같은 도메인에서 생성된 쿠키이고
서브 도메인도 포함합니다
서드파티 쿠키(Third party Cookie)는
다른 도메인에서 생성된 쿠키입니다.
쿠키의 문제점에 대해 알아보겠습니다.
보안적인 문제점으로는 쿠키는
CSRF XSS에 노출되어 있습니다.
CSRF는
간단하게 쿠키가 자동으로 전송된다는 특징은 이용해서 사이트에 로그인이 되어있는 사용자에게
악성 스크립트를 실행시켜 비밀번호를 변경하거나 결제요청을 하는 등 악의적인 요청을 하는 것
XSS는 Reflected XSS, stored XSS, DOM-based XSS로 세 가지 종류가 있지만
원리와 목적은 같습니다.
악성 스크립트를 실행시켜서 사용자의 토큰과 같은 민감한 정보를 탈취하는 것입니다.
또 다른 문제점으로는
앞서 말씀드린 부족한 (4KB) 용량과
HTTP 요청 시 자동으로 모든 쿠기가 전송한다는 것이 있습니다.
이경우에는 불필요한 트래픽을 증가시키기 때문입니다.
웹 스토리지 앞서 설명드린 쿠키의 문제점을 해결할 수 있는 웹 스토리지가
HTML5에 등장했습니다.
특징으로는
- 최대 5MB의 저장용량과
- 요청 시 Headers에 전송하지 않아서 쿠키의 CSRF의 문제점과 트래픽 문제를 해결했습니다.
- 쿠키와 마찬가지로 문자열만 저장할 수 있습니다.
웹 스토리지는
로컬 스토리지와 세션 스토리지로 나뉘는데
이들은 동기적으로 실행됩니다.
로컬 스토리지는
- 도메인/브라우저별 독립적 스토리지를 사용합니다.
- 삭제 시기는 직접 삭제 시 삭제됩니다.
세션 스토리지는
- 탭 별로 독립된 스토리지를 사용합니다.
- 삭제 시기는 탭 종료 시 삭제됩니다.
대부분의 브라우저는 웹 스토리지를 지원하지만
버전에 따라 지원이 안 될 수도 있습니다
또한 웹스토리지를 지원한다고 해도
웹 스토리지를 비활성화 설정을 할 수 있기에 에러가 발생할 수도 있습니다.
즉 웹스토리지를 사용할 때는 에러 처리를 해줘야 합니다.
웹 스토리지의 문제점을 알아보겠습니다.
쿠키의 문제점을 잡긴 했지만 완벽하지는 않습니다.
웹 스토리지도 쿠키와 마찬가지로
XSS의 취약합니다.
또한 브라우저가 공유가 되지 않기에 다른 브라우저를 접속하거나 데스크톱과 모바일에서 다른 데이터를 볼 수 있습니다.
시간 설정도 할 수 없습니다.
이들인 동기적으로 실행하기 때문에 메인 스레드를 블로킹하게 됩니다 용량이 크다면 IndexedDB를 고려
마지막으로
쿠키 & 웹스토리지는 보안 문제가 있기 때문에 민감한 정보는 저장하지 않는 것이 바람직합니다.
쿠키는 기간을 설정해야 하거나 자동으로 서버로 전송되어야 하는 작은 용량의 데이터의 경우에 사용할 수 있다.
ex) n일 동안 보지 않기, 비로그인 장바구니 등이 있습니다.
세션 스토리지는 탭을 종료했을 때 삭제되어도 괜찮은 데이터인 경우에 사용할 수 있습니다.
ex) 이전 페이지 저장, 이전 스크롤 위치 저장 등이 있습니다.
로컬 스토리지는 브라우저를 종료했을 때에도 유지되어야 한다면 사용할 수 있습니다.
ex) 사용자 설정 저장, 글 임시 저장 등이 있습니다.
쿠키 & 웹 스토리지의 보안 문제 해결
우선 쿠키 보안 문제 해결방안으로는
XSS HttpOnly를 적용하면 해결할 수 있습니다.
- HttpOnly를 적용하면 자바스크립트로 접근이 불가능하기 때문입니다.
CSRF는 쿠키의 SAME Site옵션을 적용하거나 Referer를 검증하면 대부분 해결할 수 있습니다.
웹 스토리지 보안 문재 해결 방안으로는
XSS 사용자의 입력이 자바스크립트코드로 실행될 수 있는 코드를 작성하지 않는 것입니다.
대표적인 예로 innerHTML이 있고
사용한다면 공격이 가능한 스크립트 태그나 이미지태그와 같은 태그르 삽입할 수 있기에 공격을 당할 수 있다.
즉 innerHTML을 사용하지 않는 것이 바람직하다
만약에 innerHTML을 사용해야 한다면
XXS 보안 라이브러리(sanitize-html, DOMPurify)를 사용해야 합니다.