Programing

reactjs를 사용하여 localStorage에 jwt를 저장하는 것이 안전합니까?

lottogame 2020. 8. 16. 21:47
반응형

reactjs를 사용하여 localStorage에 jwt를 저장하는 것이 안전합니까?


현재 reactjs를 사용하여 단일 페이지 애플리케이션을 구축하고 있습니다. localStorage를 사용하지 않는 많은 이유는 XSS 취약점 때문이라고 읽었습니다. React는 모든 사용자 입력을 이스케이프하므로 이제 localStorage를 사용하는 것이 안전합니까?


대부분의 최신 단일 페이지 애플리케이션에서 우리는 실제로 클라이언트 측 어딘가에 토큰을 저장해야합니다 (가장 일반적인 사용 사례-페이지 새로 고침 후 사용자 로그인 유지).

사용 가능한 총 2 개의 옵션이 있습니다. 웹 저장소 (세션 저장소, 로컬 저장소) 및 클라이언트 측 쿠키입니다. 두 옵션 모두 널리 사용되지만 이것이 매우 안전하다는 의미는 아닙니다.

Tom Abbott는 JWT sessionStorage 및 localStorage 보안을 잘 요약합니다 .

Web Storage (localStorage / sessionStorage)는 동일한 도메인에서 JavaScript를 통해 액세스 할 수 있습니다. 즉, 사이트에서 실행되는 모든 JavaScript는 웹 저장소에 액세스 할 수 있으며 이로 인해 XSS (교차 사이트 스크립팅) 공격에 취약 할 수 있습니다 . 간단히 말해서 XSS는 공격자가 페이지에서 실행되는 JavaScript를 삽입 할 수있는 취약점 유형입니다. 기본 XSS 공격은 양식 입력을 통해 JavaScript를 삽입하려고 시도합니다. 여기서 공격자는 양식에 입력 <script>alert('You are Hacked');</script>하여 브라우저에서 실행되고 다른 사용자가 볼 수 있는지 확인합니다.

XSS를 방지하기 위해 일반적인 응답은 신뢰할 수없는 모든 데이터를 이스케이프하고 인코딩하는 것입니다. React는 (대부분) 당신을 위해 그렇게합니다! 여기에 위대한 훨씬 XSS 취약점 보호에 대한 책임 반작용하는 방법에 대한 논의는 .

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

다시 Tom이 있습니다.

최신 웹 앱에는 A / B 테스트, 퍼널 / 시장 분석 및 광고를위한 타사 JavaScript 라이브러리가 포함됩니다. Bower와 같은 패키지 관리자를 사용하여 다른 사람의 코드를 앱으로 가져옵니다.

사용하는 스크립트 중 하나만 손상되면 어떻게됩니까? 페이지에 악성 JavaScript가 삽입 될 수 있으며 웹 저장소가 손상됩니다. 이러한 유형의 XSS 공격은 자신도 모르게 사이트를 방문하는 모든 사람의 웹 스토리지를 얻을 수 있습니다. 이것이 아마도 많은 조직들이 가치있는 것을 저장하거나 웹 스토리지에 정보를 신뢰하지 말라고 조언하는 이유 일 것입니다. 여기에는 세션 식별자와 토큰이 포함됩니다.

따라서 내 결론은 저장 메커니즘으로서 Web Storage 가 전송 중에 보안 표준을 적용하지 않는다는 것 입니다. 웹 스토리지를 읽고이를 사용하는 사람은 항상 HTTP가 아닌 HTTPS를 통해 JWT를 전송하도록 실사를 수행해야합니다.


나는 이것이 오래된 질문이라는 것을 알고 있지만 @ mikejones1477이 말한 바에 따르면 최신 프런트 엔드 라이브러리 및 프레임 워크는 XSS에 대한 보호를 제공하는 텍스트를 이스케이프합니다. 쿠키가 자격 증명을 사용하는 안전한 방법이 아닌 이유는 localStorage가 수행 할 때 쿠키가 CSRF를 방지하지 않기 때문입니다 (쿠키도 자바 스크립트로 액세스 할 수 있으므로 XSS가 여기서 큰 문제가 아닙니다). 이 답변은 이유를 다시 시작합니다 .

인증 토큰을 로컬 저장소에 저장하고 각 요청에 수동으로 추가하면 CSRF로부터 보호되는 이유는 바로 수동입니다. 브라우저가 해당 인증 토큰을 자동으로 보내지 않기 때문에 evil.com을 방문하여 POST http://example.com/delete-my-account 를 보내면 인증 토큰을 보낼 수 없습니다. 요청이 무시됩니다.

물론 httpOnly는 성배이지만 reactjs 또는 다른 js 프레임 워크에서 액세스 할 수 없습니다. 여전히 CSRF 취약점이 있습니다. 내 권장 사항은 localstorage이거나 쿠키를 사용하려는 경우 django와 같은 CSRF 문제에 대한 솔루션을 구현하는지 확인하십시오 .

CDN과 관련하여 이상한 CDN을 사용하지 않는지 확인하십시오. 예를 들어 google 또는 부트 스트랩 제공과 같은 CDN은 커뮤니티에서 유지 관리하고 악성 코드를 포함하지 않습니다. 확실하지 않은 경우 검토 할 수 있습니다.


CDN을 사용하는 것은 안전하지 않습니다.

페이지에 악성 JavaScript가 삽입 될 수 있으며 웹 저장소가 손상됩니다. 이러한 유형의 XSS 공격은 자신도 모르게 사이트를 방문하는 모든 사람의 웹 스토리지를 얻을 수 있습니다. 이것이 아마도 많은 조직들이 가치있는 것을 저장하거나 웹 스토리지에 정보를 신뢰하지 말라고 조언하는 이유 일 것입니다. 여기에는 세션 식별자와 토큰이 포함됩니다.

폭풍 경로 를 통해

외부에서 필요한 모든 스크립트는 잠재적으로 손상 될 수 있으며 클라이언트의 저장소에서 JWTS를 가져 와서 개인 데이터를 공격자의 서버로 다시 보낼 수 있습니다.


기본적으로 JWT를 localStorage에 저장해도됩니다.

그리고 이것이 좋은 방법이라고 생각합니다. XSS, CDN을 사용하는 XSS에 대해 이야기하는 경우 클라이언트 로그인 / 패스를 얻을 수있는 잠재적 인 위험도 있습니다. 로컬 저장소에 데이터를 저장하면 적어도 CSRF 공격을 방지 할 수 있습니다.

두 가지를 모두 인식하고 원하는 것을 선택해야합니다. 두 가지 공격 모두 당신이 알아야 할 전부는 아닙니다. 기억하세요 : 당신은 앱의 보안 수준이 낮을만큼 안전합니다.

다시 한 번 저장해도 괜찮습니다. XSS, CSRF에 취약합니다.


Localstorage는 자바 스크립트로 액세스 할 수 있도록 설계되었으므로 XSS 보호를 제공하지 않습니다. 다른 답변에서 언급했듯이 XSS 공격을 수행하는 방법은 여러 가지가 있으며 localstorage는 기본적으로 보호되지 않습니다.

그러나 쿠키에는 XSS 및 CSRF 공격으로부터 보호하는 보안 플래그가 있습니다. HttpOnly 플래그는 클라이언트 측 javascript가 쿠키에 액세스하는 것을 방지하고, Secure 플래그는 브라우저가 ssl을 통해 쿠키를 전송할 수 있도록 허용하며, SameSite 플래그는 쿠키가 원본으로 만 전송되도록합니다. 방금 확인했고 SameSite는 현재 Opera와 Chrome에서만 지원되므로 CSRF로부터 보호하려면 다른 전략을 사용하는 것이 좋습니다. 예를 들어 일부 공개 사용자 데이터와 함께 다른 쿠키에 암호화 된 토큰을 보냅니다.

따라서 쿠키는 인증 데이터를 저장하는 데 더 안전한 선택입니다.


localStorage 또는 httpOnly 쿠키 모두 허용되지 않습니까? 손상된 타사 라이브러리와 관련하여 중요한 정보의 도난을 줄이거 나 방지 할 수있는 유일한 솔루션은 Subresource Integrity를 시행하는 것 입니다.

SRI (Subresource Integrity)는 브라우저가 가져온 리소스 (예 : CDN에서)가 예기치 않은 조작없이 제공되는지 확인할 수있는 보안 기능입니다. 가져온 리소스가 일치해야하는 암호화 해시를 제공하도록 허용하여 작동합니다.

손상된 타사 라이브러리가 웹 사이트에서 활성화되어있는 한 키로거는 사용자 이름, 비밀번호 및 사이트에 입력 한 기타 모든 정보를 수집 할 수 있습니다.

An httpOnly cookie will prevent access from another computer but will do nothing to prevent the hacker from manipulating the user's computer.

참고URL : https://stackoverflow.com/questions/44133536/is-it-safe-to-store-a-jwt-in-localstorage-with-reactjs

반응형