2. 인증 상태 관리(브라우저 저장소)

웹 애플리케이션에서 인증 상태를 관리하는 것은 보안적으로 매우 중요한 문제이다. 인증 상태를 유지하기 위해 사용자는 로그인한 후 서버가 발급한 세션 ID나 토큰(JWT)을 클라이언트 측에 저장하여, 이후 요청 시 이를 서버에 보내 인증된 사용자인지를 확인한다. 이때 인증 정보를 저장할 수 있는 여러 가지 브라우저 저장소 옵션이 있으며, 각각의 장단점과 보안 위험이 다르다.

(1) 브라우저 저장소 옵션(localStorage vs sessionStorage vs 쿠키)

1) localStorage

localStorage는 브라우저 내에서 영구적으로 데이터를 저장하는 저장소이다. 페이지를 새로 고침 하거나 브라우저를 닫아도 데이터가 삭제되지 않으며, 명시적으로 삭제하지 않는 이상 브라우저에 계속 남아있는다. 그 때문에 대용량 데이터를 장기간 저장할 때 적합하다.

예를 들어, 사용자의 개인 설정이나 테마와 같은 데이터를 저장하는 데 유용하며, 서버와 지속적인 통신 없이도 클라이언트 측에서 데이터를 쉽게 관리할 수 있다. 하지만 localStorage는 보안 취약점이 존재할 수 있어 인증 정보와 같은 민감한 정보는 저장하지 않는 것이 좋다.

localStorage의 특징

데이터를 영구적으로 저장한다.

최대 5~10MB의 데이터 저장이 가능하다.

도메인 단위로 데이터를 관리한다.

자바스크립트를 통해 읽기 및 쓰기가 가능하다.

브라우저 간에 데이터를 공유하지 않는다.

2) sessionStorage

sessionStorage는 사용자가 브라우저 탭을 닫거나 페이지를 떠날 때 자동으로 삭제되는 임시 저장소이다. 한 브라우저 탭 내에서만 데이터를 유지하며, 다른 탭이나 창과 공유되지 않는다.

따라서 세션 스토리지는 사용자가 특정 세션 내에서만 유효한 데이터를 저장하는 데 적합하다. 예를 들어, 사용자 인터페이스 상태나 일시적인 폼 데이터를 저장하는 데 유용하며, 데이터를 빠르게 삭제할 필요가 있을 때 적절하다. sessionStorage도 인증 정보 저장에 권장되지 않으며, 혹여 sessionStorage에 인증 정보를 저장할 시 로그아웃이나 세션 만료 시 토큰을 수동으로 삭제해야 한다.

sessionStorage의 특징

세션 단위로 데이터를 저장하며, 브라우저 탭을 닫으면 데이터가 삭제된다.

최대 5~10MB의 데이터 저장이 가능하다.

자바스크립트를 통해 읽기 및 쓰기가 가능하다.

도메인 단위로 데이터를 관리하지만, 각 브라우저 탭마다 별도의 저장 공간을 가진다.

3) 쿠키

쿠키는 클라이언트 측에 데이터를 저장하고, 각 요청마다 자동으로 서버에 전송되는 작은 데이터 저장소이다. 쿠키는 웹사이트가 서버와 클라이언트 간 상태를 유지하는 데 자주 사용된다.

쿠키는 만료 시간을 설정할 수 있어, 세션을 관리하거나 서버와 연관된 작은 데이터를 저장하는 데 적합하다. 하지만 데이터 크기 제한(약 4KB)과 보안 문제로 민감한 정보는 HttpOnly, Secure와 같은 보안 속성을 설정하여 보호해야 한다.

쿠키의 특징

데이터 크기 제한: 최대 4KB 정도의 작은 데이터만 저장할 수 있다.

자동 전송: 각 HTTP 요청마다 자동으로 서버로 쿠키를 전송할 수 있다.

쿠키에 만료 시간을 지정할 수 있으며, 만료 시간이 지나면 자동으로 삭제된다.

쿠키는 도메인 및 경로 단위로 설정되며, 특정 서브 도메인이나 경로에만 전송되도록 제한할 수 있다.

저장소 유형	설명	장점	단점	저장
localStorage	브라우저에 데이터를 영구적으로 저장. 브라우저를 닫아도 유지됨.	간편하게 데이터 저장 가능, 지속성 있음.	XSS 공격에 취약, 민감한 정보 저장 불가.	장기적인 데이터 저장에 적합
sessionStorage	브라우저 세션 동안만 데이터를 저장. 탭을 닫으면 삭제됨.	세션별로 구분되므로 특정 사용 사례에 유용	XSS 공격에 취약, 세션 종료 시 정보 삭제.	일시적인 세션 데이터 저장에 적합
쿠키(Cookies)	데이터를 작고 간결하게 관리하며 서버와 자동으로 통신.	`HttpOnly`와 `Secure` 옵션으로 보안 강화 가능	CSRF 공격에 취약할 수 있음, 크기 제한.	서버와 클라이언트 간 전송해야 하는 데이터에(인증 정보) 적합

(2) 각 저장소의 보안 위험 및 고려사항

1) localStorage와 sessionStorage의 보안 위험

XSS(Cross-Site Scripting) 공격에 취약: localStorage와 sessionStorage는 자바스크립트를 통해 접근할 수 있기 때문에, 웹사이트가 XSS 공격에 취약하다면 공격자가 클라이언트 측에서 인증 정보에 접근할 수 있다. 공격자가 악성 스크립트를 주입하여 사용자의 인증 토큰이나 세션 정보를 탈취할 수 있다.

민감한 데이터 저장에 부적합: 두 저장소 모두 데이터를 자바스크립트로 쉽게 읽고 쓸 수 있기 때문에, 민감한 정보(예: JWT 토큰, 세션 ID 등)를 저장하기에는 적절하지 않다.

데이터 만료 및 삭제 관리: localStorage는 자동으로 만료되지 않으므로, 세션이나 토큰이 만료된 경우 명시적으로 삭제해야 한다. 이를 적절히 관리하지 않으면 보안 리스크가 발생할 수 있다.

2) 쿠키(Cookie)의 보안 위험 및 고려사항

CSRF(Cross-Site Request Forgery) 공격: 쿠키는 브라우저에서 자동으로 서버에 전송되므로, 공격자가 피해자가 인증된 상태에서 서버에 요청을 보내도록 유도하는 CSRF 공격에 취약할 수 있다. 이를 방지하기 위해서는 CSRF 토큰을 사용하여 요청의 진위를 검증하는 메커니즘을 도입해야 한다.

쿠키 보호 설정: 인증 정보를 저장할 때는 쿠키에 다음과 같은 속성을 설정하여 보호해야 한다.

HttpOnly: 자바스크립트를 통해 쿠키에 접근할 수 없도록 하여 XSS 공격에 대한 취약성을 줄인다.
Secure: 쿠키가 HTTPS를 통해서만 전송되도록 보장하여 네트워크 상에서 탈취되는 위험을 줄인다.
SameSite: 쿠키가 제3자 사이트에서 전송되지 않도록 하여 CSRF 공격을 방지한다.

데이터 암호화: 쿠키에 민감한 데이터를 저장할 경우, 반드시 데이터가 암호화되어 있어야 한다. 암호화된 데이터는 탈취되더라도 복호화되지 않으면 쓸모가 없으므로, 보안성이 높아진다.

요약하자면, 프론트엔드에서 인증 상태를 관리할 때는 쿠키를 이용하는 것이 보안적으로 가장 안전하다. HttpOnly와 Secure 속성을 적절히 설정하여 XSS 공격을 방지하고, 쿠키 전송 시 HTTPS를 사용하는 것이 기본적인 보안 수칙이다.