안녕하세요 hp입니다 :)
오늘은 브라우저 저장소 역할을 하는 Cookie와 Web Storage에 대해 알아보겠습니다.
📚 개념
먼저 Cookie에 대해서 알아보겠습니다.
Cookie
Cookie는 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 텍스트 파일입니다.
특징
- 데이터의 형태는 Key , Value 형태의 String으로 구성됩니다.
- 최대 4KB까지 저장 가능합니다.
문제점
- 보안에 취약하다. ( CSRF , XSS )
- 쿠키에 대한 정보를 매번 HTTP Header에 추가하여 보내기 때문에 불필요한 트래픽이 발생합니다.
- 저장 용량이 부족하다.
💡 CSRF 와 XSS의 특징과 해결방안
CSRF는 쿠키가 자동으로 전송된다는 특징을 이용해서 사용자가 자신의 의지와 무관하게 악의적인 요청을 하게 만듭니다.
해결방안 : SameSite 옵션을 이용해서 같은 도메인의 요청에만 쿠키를 전송하도록 설정합니다.
XSS는 악성 스크립트를 실행시켜 사용자의 민감한 정보( 토큰 )를 탈취합니다.
해결방안 : HttpOnly 옵션을 적용해서 자바스크립트의 접근이 불가능하도록 합니다.
Web Storage
이번에는 Web Storage에 대해서 알아보겠습니다.
특징
- 쿠키와는 다르게 네트워크 요청 시 서버로 전송되지 않습니다.
- 쿠키에 비해 많은 양에 데이터를 저장할 수 있습니다. ( 최대 5MB )
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없습니다. (CSRF 보안 , 트래픽 문제 해결)
Storage는 지속성에 따라서 로컬 스토리지와 세션 스토리지로 나눌 수 있습니다.
로컬 스토리지
로컬 스토리지는 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능합니다.
도메인 단위로 접근이 제한되어 A도메인에서 저장한 데이터는 B데이터에서 조회 할 수 없습니다.
세션 스토리지
세션 스토리지는 탭에 특정하여 탭의 수명으로 범위가 한정됩니다. 즉, 탭을 종료하면 세션 스토리지에 내용이 비워지게 됩니다.
문제점
- XSS 보안 문제가 존재합니다.
- 만료 기간 설정이 불가능합니다.
- 동기적으로 실행됩니다. => 메인 스레드를 블로킹하여 용량이 크다면 IndexedDB를 고려해봐야 합니다.
💡 XSS 해결방안
XSS의 해결방안으로는 사용자의 입력이 자바스크립트 코드로 실행될 수 있는 코드를 작성하지 않는 것 입니다.
( ex , innerHTML , eval , document.write )
만일 꼭 사용해야한다면 보안 라이브러리 ( sanitize-html과 DOMPurify )를 사용합니다.
쿠키와 스토리지 모두 보안 문제가 있기 때문에 민감한 정보는 저장하지 않도록 해야합니다.
끝까지 읽어주셔서 감사합니다. 😃
📌 참고
