브라우저 저장소

브라우저의 저장소 종류

 

브라우저의 저장소에는 크게 2가지 종류가 있다.

 

• Web Storage - 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조. key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회한다. windows 전역객체의 Local Storage 컬렉션을 통해 저장과 조회가 이루어진다.
• Cookie - 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다.

Web Storage vs Cookie

서버전송

• web storage는 데이터를 client에만 전송할 뿐 서버로 전송되지 않는다. 그러나 cookie는 서버로 전송된다.

객체저장

• web storage는 브라우저의 지원 여부에 따라 다르지만 문자열 이외에도 구조화된 객체를 저장할 수 있다.

용량제한

• 쿠키는 제한이 있다. (하나의 사이트에 최대 20개의 쿠키, 최대 40kb까지 저장할 수 있다)
• web storage는 용량 제한이 쿠키에 비해 매우 크다

만료일자

• 쿠키는 만료 일자가 있어 언젠가 사라지지만 web storage에 저장한 데이터는 영구적으로 존재한다.(종류에 따라 다름)

Web Storage의 종류

Local Storage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관 가능하다. 도메인 마다 별도로 생성된다. 브라우저를 종료해도 데이터가 보관된다. 도메인이 같으면 전역적으로 데이터를 공유한다.

Session Storage

데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. 브라우저가 종료되면 데이터도 지워지며 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다. 같은 도메인이라도 브라우저가 다르면 데이터가 공유되지 않는다.

보안

Cookie

사용자의 로컬에도 저장되고, 매 HTTP마다 전달된다. 따라서 로컬 또는 요청이 도난당하면 사용자의 정보가 쉽게 도난 당할 수 있다. 그러나 HttpOnly 속성을 적용하면 자바스크립트로 접근이 불가능 하기 때문에 XSS(Cross-Site-Scripting)을 방지할 수 있다. 하지만 여전히 전달과정에서 도난당할 수 있으므로 CSRF(Cross-Site-Request-Forgery)에 취약하다. 이러한 점을 방지하기 위해 API에 대한 요청을 특정 함수를 통해서만 이루어지도록 한다던가(토큰에 특정 해쉬값을 추가하여 발송) HTTP헤더의 Referer, origin값을 분석하여 막는 방법이 있다.

Storage

쿠키의 단점을 거의 커버하고 있고, CSRF에도 보안상 안전하지만 자바스크립트로 제어할 수 있기 때문에 XSS에 취약하다. 여러가지 우회 공격 방식이 있을 수 있기 때문에 방어가 어렵다.