[CS] local storage vs session storage vs cookie

local storage, session storage 그리고 cookie는 모두 클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로, value는 반드시 문자열이어야 한다. 또한, 모두 동일 출처 정책(SOP)을 따르기 때문에 다른 도메인에서 접근할 수 없다.

동일 출처 정책(Same-Origin Policy)
어떠한 문서나 스크립트가 다른 프로토콜/포트/호스트에 있는 리소스를 사용하는 것을 제한하는 정책

예를 들어, 다음과 같은 사이트에서 리소스를 다른 곳으로 요청한다고 하자.
http://website.com/ex/ex.html

그러면 리소스 요청 결과는 다음과 같다.
1️⃣ http://website.com/ex/ 👉 성공
2️⃣ http://website.com/ex1/ 👉 성공
3️⃣ http://website.com:81/ex/ex.html 👉 실패, 포트가 다름
4️⃣ http://wwebsite.com/ex/ 👉 실패, 호스트가 다름
5️⃣ https://website.com/ex/ex.html 👉 실패, 프로토콜이 다름

위와 같이 호스트, 포트, 프로토콜 중 하나라도 다르면 동일 출처 정책이 적용되서 요청에 실패한다.

 

	cookie	local storage	session storage
생성자	클라이언트/서버	클라이언트	클라이언트
지속시간	설정 여부에 따름	명시적으로 지울 때까지	탭/윈도우 닫을 때까지
용량	5KB	5MB/10MB	5MB
서버와의 통신	O	X	X
취약점	XSS/CSRF 공격	XSS 공격	XSS 공격

 

 

 

참고

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/web-storage-api.md

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/security/sop.md