Reatjs ile localStorage'da bir jwt saklamak güvenli midir?

Şu anda reatjs kullanarak tek sayfalık bir uygulama geliştiriyorum. LocalStorage kullanmamanın birçok nedeninin XSS güvenlik açıklarından kaynaklandığını okudum. React tüm kullanıcı girdilerinden kaçtığından, artık localStorage kullanmak güvenli midir?

Modern tek sayfalık uygulamaların çoğunda, jetonu istemci tarafında bir yerde saklamamız gerekir (en yaygın kullanım durumu - bir sayfayı yeniledikten sonra kullanıcının oturum açmasını sağlamak için).

Toplam 2 seçenek vardır: Web Depolama (oturum depolama, yerel depolama) ve istemci tarafı çerezi. Her iki seçenek de yaygın olarak kullanılmaktadır, ancak bu çok güvenli oldukları anlamına gelmez.

Tom Abbott iyi özetlemektedir JWT sessionStorage ve localStorage güvenliğini :

Web Depolama'ya (localStorage / sessionStorage) aynı etki alanındaki JavaScript aracılığıyla erişilebilir. Bu, sitenizde çalışan herhangi bir JavaScript'in web depolama alanına erişebileceği ve bu nedenle siteler arası komut dosyası oluşturma (XSS) saldırılarına karşı savunmasız olabileceği anlamına gelir . Özetle XSS, bir saldırganın sayfanızda çalışacak JavaScript enjekte edebileceği bir tür güvenlik açığıdır. Temel XSS saldırıları, saldırganın <script>alert('You are Hacked');</script>tarayıcı tarafından çalıştırılıp çalıştırılmadığını ve diğer kullanıcılar tarafından görüntülenip görüntülenemeyeceğini görmek için bir form içine koyduğu form girişleri aracılığıyla JavaScript enjekte etmeye çalışır.

XSS'yi önlemek için, ortak yanıt güvenilir olmayan tüm verilerden kaçmak ve kodlamaktır. React (çoğunlukla) bunu sizin için yapar! React'ın ne kadar XSS güvenlik açığı korumasından sorumlu olduğu hakkında harika bir tartışma .

Ancak bu, olası tüm güvenlik açıklarını kapsamaz! Diğer bir potansiyel tehdit, CDN'lerde veya dış altyapıda barındırılan JavaScript kullanımıdır .

İşte Tom yine:

Modern web uygulamaları, A / B testi, huni / pazar analizi ve reklamlar için 3. taraf JavaScript kitaplıklarını içerir. Diğer insanların kodlarını uygulamalarımıza aktarmak için Bower gibi paket yöneticilerini kullanıyoruz.

Kullandığınız komut dosyalarından yalnızca biri tehlikeye girerse ne olur? Kötü amaçlı JavaScript sayfaya gömülebilir ve Web Deposu tehlikeye atılır. Bu tür XSS saldırıları, herkesin sitenizi ziyaret eden Web Depolama Alanlarını bilgisi olmadan alabilir. Muhtemelen bir grup kuruluş, değerli bir şey depolamamanızı veya web depolama alanında herhangi bir bilgiye güvenmemeyi tavsiye eder. Bu, oturum tanımlayıcılarını ve belirteçlerini içerir.

Bu nedenle, bir depolama mekanizması olarak Web Depolama'nın aktarım sırasında herhangi bir güvenli standart uygulamadığı sonucuna varıyorum . Her kim Web Depolama'yı okur ve kullanırsa, JWT'yi her zaman HTTPS üzerinden göndermelerini ve asla HTTP göndermemelerini sağlamak için gereken özeni göstermelidir.

Bunun eski bir soru olduğunu biliyorum ama @ mikejones1477'in söylediklerine göre, modern ön uç kütüphaneleri ve çerçeveleri XSS'ye karşı koruma sağlayan metinden kaçıyor. Tanımlama bilgilerinin kimlik bilgilerini kullanarak güvenli bir yöntem olmamasının nedeni, localStorage'ın çerezlerin CSRF'yi engellememesidir (ayrıca çerezlerin javascript tarafından da erişilebilir olduğunu unutmayın, bu nedenle XSS burada büyük sorun değildir), bu cevap nedenini devam ettirir .

Bir kimlik doğrulama jetonunu yerel depolamada depolamanın ve her bir isteğe manuel olarak eklemenin CSRF'ye karşı korunmasının nedeni şu anahtar kelimedir: manuel. Tarayıcı bu yetkilendirme jetonunu otomatik olarak göndermediğinden, evil.com adresini ziyaret edersem ve bir http://example.com/delete-my-account POST göndermeyi başarırsa, yetkilendirme jetonumu gönderemez, bu nedenle istek yok sayılır.

Tabii ki httpOnly kutsal kâse, ancak yine de CSRF güvenlik açığına sahip olduğunuzdan tepki veya herhangi bir js çerçevesinden erişemezsiniz. Benim tavsiyem localstorage ya da çerez kullanmak istiyorsanız, django gibi CSRF probleminize bir çözüm uyguladığınızdan emin olun .

CDN'lerle ilgili olarak, google veya bootstrap sağlama gibi CDN gibi bazı garip CDN kullanmadığınızdan emin olun, topluluk tarafından korunur ve emin değilseniz, incelemeniz ücretsizdir.

Temel olarak JWT'nizi localStorage'da saklamak sorun değildir.

Ve bence bu iyi bir yol. CDN kullanarak XSS, XSS hakkında konuşuyorsak, aynı zamanda müşterinizin giriş / geçişini alma riski de vardır. Verilerin yerel depolama alanında depolanması en azından CSRF saldırılarını önleyecektir.

Her ikisinin de farkında olmanız ve ne istediğinizi seçmeniz gerekir. Her iki saldırı da bilmeniz gereken tek şey değil, sadece unutmayın: ENTIRE UYGULAMANIZ SADECE APP EN GÜVENLİ NOKTA kadar GÜVENLİDİR.

Bir kez daha depolama tamam, XSS, CSRF'ye karşı savunmasız olun, ... değil

CDN'leri kullanmanız güvenli değildir:

Kötü amaçlı JavaScript sayfaya gömülebilir ve Web Deposu tehlikeye atılır. Bu tür XSS saldırıları, herkesin sitenizi ziyaret eden Web Depolama Alanlarını bilgisi olmadan alabilir. Muhtemelen bir grup kuruluş, değerli bir şey depolamamanızı veya web depolama alanında herhangi bir bilgiye güvenmemeyi tavsiye eder. Bu, oturum tanımlayıcılarını ve belirteçlerini içerir.

fırtına yoluyla

Dışarıdan ihtiyacınız olan herhangi bir komut dosyası tehlikeye girebilir ve müşterinizin deposundan herhangi bir JWTS'yi alabilir ve kişisel verileri saldırganın sunucusuna geri gönderebilir.

Localstorage, javascript tarafından erişilebilir olacak şekilde tasarlanmıştır, bu nedenle herhangi bir XSS koruması sağlamaz. Diğer cevaplarda belirtildiği gibi, yerel depolama alanının varsayılan olarak korunmadığı bir XSS saldırısı yapmanın birçok yolu vardır.

Ancak, çerezlerin XSS ve CSRF saldırılarına karşı koruma sağlayan güvenlik bayrakları vardır. HttpOnly bayrağı, istemci tarafı javascript'in çereze erişmesini önler, Güvenli bayrağı tarayıcının çerezi ssl yoluyla aktarmasına izin verir ve SameSite bayrağı, çerezin yalnızca başlangıç ​​noktasına gönderilmesini sağlar. Az önce kontrol ettim ve SameSite şu anda sadece Opera ve Chrome'da desteklenmesine rağmen, CSRF'den korumak için diğer stratejileri kullanmak daha iyi. Örneğin, bazı genel kullanıcı verileriyle başka bir çerezde şifreli bir belirteç göndermek.

Bu nedenle çerezler, kimlik doğrulama verilerini depolamak için daha güvenli bir seçimdir.

Buna bakmanın bir yolu, risk veya zarar seviyesini dikkate almaktır.

Kullanıcısı olmayan bir uygulama oluşturuyor musunuz, POC / MVP? Uygulamanızı hızlı bir şekilde pazarlayıp test etmesi gereken bir girişim misiniz? Evetse, muhtemelen en basit çözümü uygular ve ürün pazarına uygunluğu bulmaya odaklanırdım. LocalStorage'ı uygulanması genellikle daha kolay olduğu için kullanın.

Birçok günlük etkin kullanıcılı bir uygulama v2 veya insanların / işletmelerin büyük ölçüde bağımlı olduğu bir uygulama oluşturuyor musunuz? Saldırıya uğramak iyileşmek için çok az veya hiç yer anlamına gelmez mi? Eğer öyleyse, bağımlılıklarınıza uzunca bir göz atacağım ve jeton bilgilerini yalnızca http çerezinde saklamayı düşünürdüm.

LocalStorage ve çerez / oturum depolamasının kullanılmasının kendi artıları ve eksileri vardır.

İlk yanıtta belirtildiği gibi: Uygulamanızda bir XSS güvenlik açığı varsa, kullanıcı da korumanızı gerçekleştirmez. Modern uygulamaların çoğunun bir düzine veya daha fazla bağımlılığı olduğundan, uygulamanızın bağımlılıklarından birinin XSS'ye karşı savunmasız olmadığını garanti etmek giderek zorlaşır.

Uygulamanızın bir XSS güvenlik açığı varsa ve bir bilgisayar korsanı bundan yararlanabiliyorsa, bilgisayar korsanı kullanıcı adına işlem gerçekleştirebilir. Bilgisayar korsanı, localStorage'dan jeton alarak GET / POST istekleri gerçekleştirebilir veya jeton yalnızca http çerezinde depolanmışsa POST istekleri gerçekleştirebilir.

Jetonunuzu yerel depolama alanına depolamanın tek alt tarafı, bilgisayar korsanının jetonunuzu okuyabileceğidir.

Ne localStorage ne de httpOnly çerezi kabul edilemez mi? Güvenliği ihlal edilmiş bir üçüncü taraf kütüphanesi ile ilgili olarak, hassas bilgilerin çalınmasını azaltacak / önleyeceğini bildiğim tek çözüm Alt Kaynak Bütünlüğü olacaktır .

Alt Kaynak Bütünlüğü (SRI), tarayıcıların getirdikleri kaynakların (örneğin bir CDN'den) beklenmedik bir işlem yapılmadan teslim edildiğini doğrulamasını sağlayan bir güvenlik özelliğidir. Getirilen bir kaynağın eşleşmesi gereken bir şifreleme karması sağlamanıza izin vererek çalışır.

Güvenliği ihlal edilmiş üçüncü taraf kitaplığı web sitenizde etkin olduğu sürece, bir keylogger kullanıcı adı, şifre ve siteye girdiğiniz diğer bilgiler gibi bilgileri toplamaya başlayabilir.

Bir httpOnly çerezi başka bir bilgisayardan erişimi engeller, ancak bilgisayar korsanının kullanıcının bilgisayarını değiştirmesini önlemek için hiçbir şey yapmaz.

Kodunuzu şifrelediğiniz sürece localStorage'da saklamak güvenlidir. Aşağıda, bunu yapabileceğiniz birçok yoldan birini gösteren sıkıştırılmış bir kod snippet'i bulunmaktadır.

    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);
     }

Ardından, jetonunuzu kullanmadan önce kullanarak şifresini çözün PRIVATE_KEY_STORED_IN_ENV_FILE