리액트JS에서 localStorage에 JWT를 저장하는 것이 안전한가요?

ReactJS를 사용하여 단일 페이지 애플리케이션을 구축 중입니다.

localStorage를 사용하지 않는 이유 중 하나는 XSS 취약점 때문입니다.

React가 모든 사용자 입력을 이스케이프(escape)하기 때문에 이제 localStorage를 안전하게 사용할 수 있을까요?

답변 1

하지만 이는 모든 가능한 취약점을 다루지 않습니다! 또 다른 잠재적인 위협은 CDN이나 외부 인프라에 호스팅된 JavaScript의 사용입니다.

다시 Tom이 말합니다:

현대적인 웹 앱은 A/B 테스트, 퍼널/시장 분석 및 광고를 위해 3rd party JavaScript 라이브러리를 포함합니다. 우리는 Bower와 같은 패키지 매니저를 사용하여 다른 사람들의 코드를 앱에 가져옵니다.

만약 당신이 사용하는 스크립트 중 하나만 침해당한다면 어떻게 될까요? 악성 JavaScript가 페이지에 포함되며, 웹 스토리지가 침해됩니다. 이러한 유형의 XSS 공격은 사용자의 동의 없이 모든 사람의 웹 스토리지를 가져올 수 있습니다. 이것이 아마도 가치 있는 것을 저장하거나 웹 스토리지에 대한 정보를 신뢰하지 말라는 조언을 하는 조직의 이유일 것입니다. 여기에는 세션 식별자와 토큰도 포함됩니다.

그러므로, 나의 결론은 저장 메커니즘으로서, 웹 스토리지는 전송 중에 어떠한 안전한 표준도 강제하지 않는다는 것입니다. 웹 스토리지를 읽고 사용하는 사람은 항상 JWT를 HTTPS로만 보내고 HTTP를 사용하지 않도록 주의를 기울여야 합니다.

답변 2

로컬 스토리지에 JWT를 저장하는 것이 ReactJS와 함께 안전한지에 대해선 의견이 분분합니다. 이에 관한 토론은 보안 전문가들 사이에서도 활발하게 이루어지고 있습니다. 본 기사에서는 대표적인 의견을 소개하며, ReactJS를 사용할 때 JWT를 로컬 스토리지에 저장하는 것의 잠재적인 위험성에 대해 설명하겠습니다.
JWT(JSON Web Token)는 사용자 인증 및 인가 정보를 포함하는 토큰입니다. 로컬 스토리지는 클라이언트 측에서 데이터를 일시적으로 저장하는 데 사용되며, ReactJS와 같은 프론트엔드 프레임워크에서 편리하게 접근할 수 있습니다. JWT를 로컬 스토리지에 저장하면 토큰을 간단하게 관리할 수 있으며, 애플리케이션을 새로고침했을 때에도 토큰의 지속성을 유지할 수 있습니다.
그러나 JWT를 로컬 스토리지에 저장하는 것은 잠재적인 보안 위험을 가지고 있습니다. 로컬 스토리지는 악의적인 코드가 접근할 수 있는 클라이언트 측에 위치하므로, XSS(Cross-Site Scripting) 공격으로부터 취약할 수 있습니다. XSS 공격은 해커가 사용자의 세션을 탈취하고 악용할 수 있도록 악성 스크립트를 삽입하는 공격입니다. JWT를 로컬 스토리지에 저장한다면, 해커가 해당 토큰을 훔칠 경우 복호화하여 유효하지 않은 인증 요청을 할 수 있으며 사용자의 계정에 대한 권한을 부여받을 수도 있습니다.
이를 방지하기 위해서는 JWT를 로컬 스토리지 대신 HttpOnly 쿠키에 저장하는 것이 좋습니다. HttpOnly 쿠키는 JavaScript 코드로 접근할 수 없으므로 XSS 공격에 안전합니다. 또한, CSRF(Cross-Site Request Forgery) 공격으로부터도 보호될 수 있습니다. CSRF 공격은 인증된 사용자의 브라우저를 악용하여 인증된 사용자의 이름 아래서 악의적인 요청을 보내는 공격입니다. 로컬 스토리지에 JWT를 저장하면 CSRF 공격에 취약할 수 있으며, 이는 악의적인 요청을 통해 사용자의 계정이 손상될 수 있음을 의미합니다.
따라서 ReactJS와 함께 JWT를 안전하게 저장하기 위해서는 로컬 스토리지 대신 HttpOnly 쿠키에 저장하는 것이 좋습니다. 이렇게 함으로써 XSS 공격과 CSRF 공격으로부터 보다 안전하게 애플리케이션을 보호할 수 있습니다. 보안은 개발자와 사용자 모두에게 중요한 이슈이므로, 팀의 보안 전문가와 협력하여 적절한 보안 대책을 마련하는 것이 좋습니다.