토큰 사용시 로컬스토리지 사용의 보안 문제

웹 애플리케이션에서 인증 정보를 저장하는 방식 중 하나로 **로컬스토리지(LocalStorage)**를 활용하는 경우가 많다. 하지만, 로컬스토리지에 토큰을 저장하는 것은 보안적으로 취약한 방식이며, 특히 XSS(Cross-Site Scripting) 공격에 노출될 가능성이 높다.

 

 

로컬스토리지의 보안 취약점

1. XSS 공격에 취약함
   • 로컬스토리지는 브라우저의 JavaScript 코드에서 직접 접근 가능하다.
   • 만약 공격자가 XSS를 통해 악성 스크립트를 실행하면, 로컬스토리지에 저장된 Access Token을 탈취할 수 있다.
   • 예를 들어, 웹사이트에 XSS 공격이 성공하면 다음과 같은 코드로 토큰을 훔칠 수 있다.
   • console.log(localStorage.getItem("access_token"));
   • 이 토큰을 공격자가 탈취하면, 사용자의 세션을 가로채고 계정을 도용할 가능성이 생긴다.
2. CSRF 공격 방어 불가능
   • 로컬스토리지에 저장된 토큰은 자동으로 브라우저가 서버에 전송하지 않음.
   • CSRF(Cross-Site Request Forgery) 방어를 위해서는 쿠키의 SameSite 옵션을 설정하는 것이 더 안전함.
3. 브라우저 개발자 도구(DevTools)로 접근 가능
   • 로컬스토리지는 개발자 도구(F12 → Application → Local Storage)를 통해 누구나 확인할 수 있다.
   • 공격자가 직접 브라우저에 접근할 수 있다면 토큰을 쉽게 복사하여 다른 환경에서 사용할 수 있음.

---

더 안전한 대안: HttpOnly 쿠키

토큰을 저장할 때 HttpOnly 쿠키를 사용하는 것이 더 안전한 방법이다.

1. HttpOnly 옵션을 사용하면 JavaScript에서 접근 불가능
   • XSS 공격으로 인해 document.cookie를 통해 토큰을 탈취하는 것이 불가능해진다.
   • 서버에서 응답 시 Set-Cookie 헤더를 사용해 토큰을 저장할 수 있다.
   • Set-Cookie: access_token=abc123; HttpOnly; Secure; SameSite=Strict
2. 자동으로 요청 시 포함됨
   • 쿠키에 저장된 토큰은 fetch 또는 axios 요청 시 자동으로 포함되므로, 별도로 헤더를 추가할 필요가 없다.
   • fetch("https://api.example.com/protected", { credentials: "include", // 쿠키 자동 전송 });
3. CSRF 방어 가능
   • SameSite=Strict 또는 SameSite=Lax 옵션을 설정하면 다른 도메인에서 CSRF 공격을 방지할 수 있다.

토큰 저장 방식 비교

저장 방식XSS 공격CSRF 방어보안 수준

로컬스토리지	취약	불가능	❌ 낮음
세션스토리지	취약	불가능	❌ 낮음
HttpOnly 쿠키	안전	가능	✅ 높음

 

 

결론

로컬스토리지에 토큰을 저장하는 것은 보안적으로 위험한 방식이다. 특히 XSS 공격에 취약하며, 브라우저 개발자 도구를 통해 직접 접근할 수도 있다.

보다 안전한 인증 방식으로는 HttpOnly 쿠키를 활용하는 것이 좋으며, 이를 통해 XSS 공격을 방어하고 CSRF 보호 기능을 강화할 수 있다.

웹 애플리케이션을 개발할 때는 토큰 저장 방식까지 고려해야 보안성을 높일 수 있다.