local storage, session storage, cookie

local storage, session storage, cookie 모두 클라이언트 스토리지이며 SOP(same-origin-policy)를 따른다.

SOP(Same-Origin-Policy, 동일출처정책)란 어떠한 문서나 스크립트가 다른 포로토콜 / 포트 / 호스트에 있는 리소스에 접근하는 것을 제한하는 정책이다.

local storage와 sesseion storage는 상대적으로 새로운 API이며(즉 모든 브라우저들이 이를 지원하지는 않는다.) 서로 유사하다.  두 스토리지의 데이터는 읽기/수정이 쉬우므로 애플리케이션 안에 보안 관련 데이터나 민감한 정보를 저장하지 않는 것이 좋다.

 

🗳 local storage

• 5MB/10MB
• 클라이언트 사이드에서만 읽기가 가능하고, 자바스크립트나 브라우저를 통해 명시적으로 삭제 가능하다
• 유저가 브라우저 윈도우를 닫더라도 데이터는 삭제되지 않는다.
• XSS에 취약함

 

🗃 session storage

• 5MB
• local storage와 비슷하나 데이터는 오직 브라우저의 윈도우나 탭이 열려있을 때만 이용 가능하다. 윈도우나 탭이 닫히면 스토리지의 데이터도 삭제된다.
• XSS에 취약함

 

🍪 cookie

• 4KB
• 모든 HTTP 요청마다 쿠키의 데이터가 함께 서버로 보내지므로 클라이언트뿐만아니라 서버에서도 읽기가 가능
• 만약 SSL을 사용하고 있지 않다면, 쿠키는 퍼블릭 와이파이에 의해 가로채가는 것이 가능하다.
• HttpOnly cookie flag를 사용하면 자바스크립트로 접근이 불가능하게 만들어서 XSS에 방어할 수 있음
• CSRF에 취약함

 

참고자료

What is the difference between localStorage, sessionStorage, session and cookies?

What is the difference between localStorage, sessionStorage, session and cookies?