2023-02-24-TIL

2023-02-24-TIL

Today I Learned

Local Storage vs Session Storage vs Cookie

브라우저에 데이터를 저장하는 세 가지 방법이다. 링크 대부분이 결국 “JWT 같은 인증 토큰을 어디에 둘 것인가”라는 질문으로 모인다.

구분	localStorage	sessionStorage	Cookie
범위	출처(origin) 단위	출처와 탭 단위	도메인, 경로 단위
수명	만료 없음	탭(페이지 세션)을 닫으면 삭제	Expires/Max-Age로 지정
서버 전송	하지 않음	하지 않음	요청마다 자동 전송
JavaScript 접근	가능	가능	HttpOnly면 불가능

MDN에 따르면 localStorage는 출처별 저장소로 브라우저 세션이 끝나도 남고 만료 시간이 없다. sessionStorage는 출처뿐 아니라 탭(최상위 브라우징 컨텍스트) 단위로도 나뉘어서, 페이지 세션이 끝나면 지워진다. 쿠키는 브라우저가 해당 도메인으로 보내는 요청마다 Cookie 헤더에 담아 자동으로 보낸다. 그래서 쿠키가 많으면 요청이 무거워지고, MDN은 쿠키 하나의 크기가 보통 4KB 정도로 제한된다고 설명한다.

토큰 저장 위치의 쟁점은 XSS와 CSRF의 맞교환이다.

• Web Storage에 두면 페이지에서 실행되는 모든 JavaScript가 읽을 수 있으므로, XSS 취약점 하나로 토큰이 그대로 유출된다. 대신 자동 전송되지 않으니 CSRF에는 안전하다.
• 쿠키에 HttpOnly를 붙이면 JavaScript가 읽을 수 없어 XSS로 토큰을 훔치기 어렵고, Secure를 붙이면 HTTPS로만 전송된다. 대신 자동 전송되므로 CSRF를 신경 써야 하고, SameSite 속성이나 CSRF 토큰으로 막는다.

SuperTokens 글을 비롯해 링크한 글 대부분은 세션 토큰을 HttpOnly, Secure, SameSite를 붙인 쿠키에 두는 쪽을 권한다. 다만 쿠키도 XSS를 완전히 막지는 못한다. 공격자가 토큰을 꺼내 가지는 못해도, 피해자 브라우저 안에서 인증된 요청을 대신 보낼 수는 있기 때문이다. 어느 쪽이든 XSS 자체를 막는 것이 먼저다.

• https://krishankantsinghal.medium.com/local-storage-vs-session-storage-vs-cookie-22655ff75a8
• https://zakelstorm.tistory.com/5
• https://stackoverflow.com/questions/54258233/do-i-have-to-store-tokens-in-cookies-or-localstorage-or-session
• https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id
• https://www.pivotpointsecurity.com/local-storage-versus-cookies-which-to-use-to-securely-store-session-tokens/
• https://hshine1226.medium.com/localstorage-vs-cookies-jwt-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%B4-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0-%EB%AA%A8%EB%93%A0%EA%B2%83-4fb7fb41327c
• https://coolgk.medium.com/localstorage-vs-cookie-for-jwt-access-token-war-in-short-943fb23239ca
• https://levelup.gitconnected.com/why-cookie-is-preferable-compared-to-localstorage-when-it-comes-to-authentication-b43ac5610be6
• https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie
• https://supertokens.com/blog/cookies-vs-localstorage-for-sessions-everything-you-need-to-know

참고한 자료외부 출처 4

외부 출처

• Window: localStorage propertyMDN
• Window: sessionStorage propertyMDN
• Using HTTP cookiesMDN
• Cookies vs. LocalStorage for SessionsSuperTokens