Czy przechowywanie pliku jwt w localStorage za pomocąreakjs jest bezpieczne?

Obecnie tworzę aplikację jednostronicową przy użyciureakjs. Czytałem, że wiele powodów, dla których nie używam localStorage, wynika z luk w zabezpieczeniach XSS. Skoro React wymyka wszystkie dane wejściowe użytkownika, czy teraz byłoby bezpiecznie używać localStorage?

W większości nowoczesnych aplikacji jednostronicowych rzeczywiście musimy przechowywać token gdzieś po stronie klienta (najczęstszy przypadek użycia - aby użytkownik był zalogowany po odświeżeniu strony).

Dostępne są łącznie 2 opcje: przechowywanie w sieci Web (przechowywanie sesji, pamięć lokalna) i plik cookie po stronie klienta. Obie opcje są szeroko stosowane, ale nie oznacza to, że są bardzo bezpieczne.

Tom Abbott dobrze podsumowuje sesję JWT sessionStorage i localStorage security :

Magazyn sieciowy (localStorage / sessionStorage) jest dostępny za pośrednictwem JavaScript w tej samej domenie. Oznacza to, że każdy skrypt JavaScript działający w Twojej witrynie będzie miał dostęp do pamięci sieciowej iz tego powodu może być podatny na ataki typu cross-site scripting (XSS) . Krótko mówiąc, XSS to rodzaj luki, w której osoba atakująca może wstrzyknąć JavaScript, który będzie działał na Twojej stronie. Podstawowe ataki XSS próbują wstrzyknąć JavaScript za pomocą danych wejściowych formularza, w których osoba atakująca umieszcza <script>alert('You are Hacked');</script>formularz, aby sprawdzić, czy jest uruchamiany przez przeglądarkę i czy może być przeglądany przez innych użytkowników.

Aby zapobiec XSS, typową odpowiedzią jest ucieczka i zakodowanie wszystkich niezaufanych danych. React (głównie) robi to za Ciebie! Oto świetna dyskusja na temat tego, za jaką ochronę przed lukami XSS odpowiada React .

Ale to nie obejmuje wszystkich możliwych luk! Innym potencjalnym zagrożeniem jest użycie JavaScript hostowanego w sieciach CDN lub poza infrastrukturą .

Oto znowu Tom:

Nowoczesne aplikacje internetowe obejmują zewnętrzne biblioteki JavaScript do testowania A / B, analizy ścieżek / rynku i reklam. Używamy menedżerów pakietów, takich jak Bower, do importowania kodu innych osób do naszych aplikacji.

Co się stanie, jeśli tylko jeden z używanych przez Ciebie skryptów zostanie przejęty? Na stronie może zostać osadzony złośliwy kod JavaScript, co spowoduje zagrożenie dla magazynu internetowego. Tego typu ataki XSS mogą uzyskać dostęp do Web Storage każdego, kto odwiedza Twoją witrynę, bez ich wiedzy. Prawdopodobnie dlatego wiele organizacji zaleca, aby nie przechowywać niczego wartościowego ani nie ufać żadnym informacjom w pamięci sieciowej. Obejmuje to identyfikatory sesji i tokeny.

Dlatego dochodzę do wniosku, że Web Storage jako mechanizm przechowywania nie wymusza żadnych bezpiecznych standardów podczas przesyłania . Ktokolwiek czyta Web Storage i korzysta z niego, musi dołożyć wszelkich starań, aby zawsze wysyłać token JWT przez HTTPS, a nigdy przez HTTP.

Wiem, że to stare pytanie, ale zgodnie z tym, co powiedział @ mikejones1477, nowoczesne biblioteki i frameworki interfejsu użytkownika wymykają się z tekstu, zapewniając ochronę przed XSS. Powodem, dla którego pliki cookie nie są bezpieczną metodą używającą poświadczeń, jest to, że pliki cookie nie zapobiegają CSRF, gdy robi to localStorage (pamiętaj również, że pliki cookie są również dostępne przez javascript, więc XSS nie jest tutaj dużym problemem), ta odpowiedź wznawia dlaczego .

Powodem przechowywania tokena uwierzytelniającego w lokalnej pamięci i ręcznego dodawania go do każdego żądania zabezpieczającego przed CSRF jest to słowo kluczowe: manual. Ponieważ przeglądarka nie wysyła automatycznie tego tokena autoryzacji, jeśli odwiedzę evil.com i uda jej się wysłać POST http://example.com/delete-my-account , nie będzie w stanie wysłać mojego tokena autoryzacji, więc żądanie jest ignorowane.

Oczywiście httpOnly jest świętym Graalem, ale nie możesz uzyskać dostępu zreakjs ani żadnego frameworka js, poza tym nadal masz lukę w zabezpieczeniach CSRF. Moją rekomendacją byłoby przechowywanie lokalne lub jeśli chcesz używać plików cookie, upewnij się, że zaimplementujesz jakieś rozwiązanie problemu CSRF, tak jak robi to django .

Jeśli chodzi o CDN, upewnij się, że nie używasz dziwnych CDN, na przykład CDN, takich jak Google lub Bootstrap, są obsługiwane przez społeczność i nie zawierają złośliwego kodu, jeśli nie masz pewności, możesz je przejrzeć.

Zasadniczo można przechowywać swój token JWT w lokalnym magazynie.

Myślę, że to dobry sposób. Jeśli mówimy o XSS, XSS używającym CDN, istnieje również potencjalne ryzyko uzyskania loginu / przepustki klienta. Przechowywanie danych w pamięci lokalnej zapobiegnie przynajmniej atakom CSRF.

Musisz być świadomy obu i wybrać to, czego chcesz. Oba ataki to nie wszystko, o czym musisz wiedzieć, pamiętaj tylko: CAŁA APLIKACJA JEST TYLKO TAK BEZPIECZNA JAK NAJMNIEJ BEZPIECZNY PUNKT TWOJEJ APLIKACJI.

Po raz kolejny przechowywanie jest OK, bądź podatny na XSS, CSRF, ... nie jest

Nie jest bezpieczne, jeśli używasz sieci CDN:

Na stronie może zostać osadzony złośliwy kod JavaScript, co spowoduje zagrożenie dla magazynu internetowego. Tego typu ataki XSS mogą uzyskać dostęp do Web Storage każdego, kto odwiedza Twoją witrynę, bez ich wiedzy. Prawdopodobnie dlatego wiele organizacji zaleca, aby nie przechowywać niczego wartościowego ani nie ufać żadnym informacjom w pamięci sieciowej. Obejmuje to identyfikatory sesji i tokeny.

via stormpath

Każdy skrypt, którego potrzebujesz z zewnątrz, może zostać potencjalnie naruszony i może pobrać dowolny JWTS z pamięci klienta i wysłać dane osobowe z powrotem na serwer atakującego.

Localstorage jest zaprojektowany tak, aby był dostępny przez javascript, więc nie zapewnia żadnej ochrony przed XSS. Jak wspomniano w innych odpowiedziach, istnieje kilka możliwych sposobów przeprowadzenia ataku XSS, przed którym magazyn lokalny nie jest domyślnie chroniony.

Jednak pliki cookie mają flagi bezpieczeństwa, które chronią przed atakami XSS i CSRF. Flaga HttpOnly uniemożliwia dostęp javascript po stronie klienta do pliku cookie, flaga Secure pozwala przeglądarce tylko na przesyłanie pliku cookie za pośrednictwem protokołu SSL, a flaga SameSite zapewnia, że ​​plik cookie jest wysyłany tylko do źródła. Chociaż właśnie sprawdziłem, a SameSite jest obecnie obsługiwane tylko w Operze i Chrome, więc do ochrony przed CSRF lepiej jest użyć innych strategii. Na przykład wysłanie zaszyfrowanego tokena w innym pliku cookie z niektórymi publicznymi danymi użytkownika.

Dlatego pliki cookie są bezpieczniejszym sposobem przechowywania danych uwierzytelniających.

Sposobem na przyjrzenie się temu jest rozważenie poziomu ryzyka lub szkody.

Czy tworzysz aplikację bez użytkowników, POC / MVP? Czy jesteś startupem, który musi szybko wejść na rynek i przetestować swoją aplikację? Jeśli tak, prawdopodobnie wdrożyłbym najprostsze rozwiązanie i skupiłbym się na znalezieniu produktu dopasowanego do rynku. Użyj localStorage, ponieważ często jest łatwiejszy do wdrożenia.

Czy tworzysz wersję 2 aplikacji z wieloma codziennymi aktywnymi użytkownikami lub aplikację, od której ludzie / firmy są w dużym stopniu zależni. Czy włamanie oznaczałoby niewiele lub brak miejsca na powrót do zdrowia? Jeśli tak, przyjrzałbym się dokładnie twoim zależnościom i rozważał przechowywanie informacji o tokenach w pliku cookie obsługującym tylko protokół http.

Używanie zarówno localStorage, jak i przechowywania plików cookie / sesji ma swoje zalety i wady.

Jak stwierdzono w pierwszej odpowiedzi: Jeśli Twoja aplikacja ma lukę w zabezpieczeniach XSS, żadna z nich nie ochroni Twojego użytkownika. Ponieważ większość nowoczesnych aplikacji ma kilkanaście lub więcej różnych zależności, coraz trudniej jest zagwarantować, że jedna z zależności aplikacji nie jest podatna na XSS.

Jeśli Twoja aplikacja ma lukę w zabezpieczeniach XSS, a haker był w stanie ją wykorzystać, będzie mógł wykonywać działania w imieniu Twojego użytkownika. Haker może wykonywać żądania GET / POST, pobierając token z localStorage lub może wykonywać żądania POST, jeśli token jest przechowywany w pliku cookie obsługującym tylko protokół http.

Jedyną wadą przechowywania twojego tokena w lokalnej pamięci jest to, że haker będzie mógł odczytać twój token.

Czy nie są akceptowane ani localStorage ani httpOnly cookie? Jeśli chodzi o zagrożoną bibliotekę innej firmy, jedyne znane mi rozwiązanie, które ograniczy / zapobiegnie kradzieży poufnych informacji, będzie egzekwowane integralność zasobów podrzędnych .

Subresource Integrity (SRI) to funkcja zabezpieczeń, która umożliwia przeglądarkom weryfikację, czy zasoby, które pobierają (na przykład z CDN), są dostarczane bez nieoczekiwanej manipulacji. Działa, umożliwiając podanie kryptograficznego skrótu, który musi być zgodny z pobieranym zasobem.

Dopóki zhakowana biblioteka innej firmy jest aktywna w Twojej witrynie, keylogger może zacząć zbierać informacje, takie jak nazwa użytkownika, hasło i cokolwiek innego wprowadzisz do witryny.

Plik cookie httpOnly uniemożliwi dostęp z innego komputera, ale nie zrobi nic, aby uniemożliwić hakerowi manipulowanie komputerem użytkownika.

Przechowywanie tokena w localStorage jest bezpieczne, o ile go zaszyfrujesz. Poniżej znajduje się skompresowany fragment kodu przedstawiający jeden z wielu sposobów, w jaki możesz to zrobić.

    import SimpleCrypto from 'simple-crypto-js';

    const saveToken = (token = '') => {
          const encryptInit = new SimpleCrypto('PRIVATE_KEY_STORED_IN_ENV_FILE');
          const encryptedToken = encryptInit.encrypt(token);

          localStorage.setItem('token', encryptedToken);
     }

Następnie przed użyciem swojego tokena odszyfruj go za pomocą PRIVATE_KEY_STORED_IN_ENV_FILE