웹 어플리케이션에서 사용자 세션을 관리를 위해 생성된 Token을 저장해야 합니다. 이 Token은 클라이언트 측에서 localStorage 와 쿠키 라는 두 가지 저장소를 이용해서 저장할 수 있습니다.
두가지 저장소는 목적이 다르므로 강점과 약점이 다릅니다. 쿠키는 서버에서 읽을 수 있는 반면 , localStorage 는 브라우저에서만 읽을 수 있습니다. 또한 쿠키는 4KB 의 크기 제한을 갖고 있지만 localStorage 는 더 많은 데이터를 저장할 수 있습니다.
이 게시물에서는 웹 앱에서 세션 관리 토큰의 모범 사례 보안을 위해 localStorage 또는 쿠키를 사용할지 여부에 대해 설명합니다.
Local Storage 에 저장된 Access Token
localStorage 는 JavaScript를 사용하여 토큰을 엑세스하기 때문에 사용하기 매우 편리합니다. 또한 콘텐츠를 자동으로 보낼 수 없기 때문에 CSRF 공격에 안전합니다.
다만 localStorage는 cross-site Scripting ( XSS ) 에 취약합니다. 공격자가 악성 JavaScript를 웹 페이지에 주입할 경우 localStorage에 있는 Access Token을 탈취할 수 있습니다. 또한 다른 도메인이나 하위 도메인에서 엑세스할 수 없습니다.
Cookie 에 저장된 Access Token
요청을 할 때 Cookie에 담긴 Access Token을 보내는 방식으로 Cookie 의 Security 와 HttpOnly 옵션을 통해 XSS 공격을 방어할 수 있습니다.
즉 , 자바스크립트가 쿠키를 조작하는 것을 막을 수 있기 때문에 토큰이 탈취당하거나 조작하는 것을 보호할 수 있습니다. 또한 localStorage 보다 더 많은 보안 옵션을 활용하여 취약점을 보호할 수 있습니다.
그리고 서버에 대한 모든 HTTP 요청에서 자동으로 전송됩니다.
하지만 쿠키의 저장 용량은 4KB로 제한되며 API 서버와 쿠키를 공유할 수 없습니다.
그리고 애플리케이션에 JavaScript를 실행할 수 있는 경우 HTTP 요청을 보낼 수 있으며 자동으로 쿠키가 포함되기에 CSRF 에 대한 공격에 취약하다는 단점이 있습니다.
쿠키의 CSRF 공격
CSRF 공격은 사용자가 의도하지 않은 요청을 하도록 하는 공격입니다. 공격자가 악의적인 웹 사이트에 들어갈 수 있게 하며 이때 쿠키는 자동으로 포함됩니다.
ex ) 강제로 비밀번호를 변경하는 요청을 보냄
그러나 이는 쿠키의 플래그를 사용하고 sameSite 를 포함하여 쉽게 완화할 수 있습니다.
플래그는 domain , secure , HttpOnly 옵션을 의미합니다.
어떤 것을 사용할까?
쿠키와 localStorage는 모두 XSS 공격에 취약합니다. 그러나 쿠키는 보안 옵션을 통해 이러한 취약점을 완화할 수 있습니다. OWASP 커뮤니티에서도 쿠키를 사용하는 것을 권고하고 있습니다.
이는 쿠키는 CSRF 공격에 취약하지만 플래그 및 CSRF 방지 토큰을 사용하여 완화할 수 있습니다. ( sameSite )
또한 쿠키는 CSRF에 대한 공격을 CORS 를 통해 허용된 URL 에서만 요청할 수 있게 설정할 수 있으며, 클라이언트에서 Authorization 헤더에 토큰 값을 넣어주어야 하는 번거로움을 막을 수 있습니다.
함께 읽으면 좋은 글
참고 블로그 1 : HTTP 쿠키 플래그 정리
참고
참고 블로그 1 : https://velog.io/@ehdrms2034/Access-Token-%EC%A0%80%EC%9E%A5-%EC%9C%84%EC%B9%98%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0
참고 블로그 2 : https://www.pivotpointsecurity.com/local-storage-versus-cookies-which-to-use-to-securely-store-session-tokens/
참고 블로그 3 : https://dev.to/cotter/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-15id
