Apakah aman untuk menyimpan jwt di localStorage dengan reactjs?

Saat ini saya sedang membangun satu aplikasi halaman menggunakan reactjs. Saya membaca bahwa banyak alasan untuk tidak menggunakan localStorage adalah karena kerentanan XSS. Karena Bereaksi lolos dari semua input pengguna, apakah sekarang aman menggunakan localStorage?

Di sebagian besar aplikasi satu halaman modern, kita memang harus menyimpan token di suatu tempat di sisi klien (kasus penggunaan paling umum - untuk menjaga pengguna tetap masuk setelah penyegaran halaman).

Ada total 2 opsi yang tersedia: Penyimpanan Web (penyimpanan sesi, penyimpanan lokal) dan cookie sisi klien. Kedua opsi ini banyak digunakan, tetapi ini tidak berarti mereka sangat aman.

Tom Abbott merangkum dengan baik sesi JWTSageage dan keamanan localStorage :

Penyimpanan Web (localStorage / sessionStorage) dapat diakses melalui JavaScript pada domain yang sama. Ini berarti bahwa setiap JavaScript yang berjalan di situs Anda akan memiliki akses ke penyimpanan web, dan karena ini dapat rentan terhadap serangan lintas situs (XSS) . Singkatnya, XSS, adalah jenis kerentanan di mana penyerang dapat menyuntikkan JavaScript yang akan berjalan di halaman Anda. Serangan XSS dasar mencoba untuk menyuntikkan JavaScript melalui input formulir, di mana penyerang memasukkan <script>alert('You are Hacked');</script>ke dalam formulir untuk melihat apakah itu dijalankan oleh browser dan dapat dilihat oleh pengguna lain.

Untuk mencegah XSS, respons umum adalah melarikan diri dan menyandikan semua data yang tidak dipercaya. Bereaksi (kebanyakan) melakukannya untuk Anda! Berikut adalah diskusi hebat tentang seberapa banyak perlindungan kerentanan XSS yang Bereaksi bertanggung jawab atas .

Tapi itu tidak mencakup semua kemungkinan kerentanan! Ancaman potensial lainnya adalah penggunaan JavaScript yang diinangi pada CDN atau infrastruktur luar .

Ini Tom lagi:

Aplikasi web modern termasuk perpustakaan JavaScript pihak ketiga untuk pengujian A / B, analisis saluran / pasar, dan iklan. Kami menggunakan manajer paket seperti Bower untuk mengimpor kode orang lain ke dalam aplikasi kami.

Bagaimana jika hanya satu dari skrip yang Anda gunakan yang dikompromikan? JavaScript berbahaya dapat disematkan pada halaman, dan Penyimpanan Web dikompromikan. Jenis serangan XSS ini dapat membuat Penyimpanan Web semua orang yang mengunjungi situs Anda, tanpa sepengetahuan mereka. Ini mungkin sebabnya banyak organisasi menyarankan untuk tidak menyimpan sesuatu yang bernilai atau mempercayai informasi apa pun dalam penyimpanan web. Ini termasuk pengidentifikasi dan token sesi.

Oleh karena itu, kesimpulan saya adalah bahwa sebagai mekanisme penyimpanan, Penyimpanan Web tidak memberlakukan standar keamanan apa pun selama transfer . Siapa pun yang membaca Penyimpanan Web dan menggunakannya harus melakukan uji tuntas untuk memastikan mereka selalu mengirim JWT melalui HTTPS dan tidak pernah HTTP.

Saya tahu ini adalah pertanyaan lama tetapi menurut apa yang dikatakan @ mikejones1477, pustaka dan kerangka kerja modern modern luput dari teks yang memberi Anda perlindungan terhadap XSS. Alasan mengapa cookie bukan metode aman menggunakan kredensial adalah bahwa cookie tidak mencegah CSRF ketika localStorage melakukannya (juga ingat bahwa cookie dapat diakses oleh javascript juga, jadi XSS bukan masalah besar di sini), jawaban ini melanjutkan alasannya .

Alasan menyimpan token otentikasi di penyimpanan lokal dan menambahkannya secara manual ke setiap permintaan melindungi terhadap CSRF adalah kata kunci: manual. Karena browser tidak secara otomatis mengirim token autentikasi itu, jika saya mengunjungi evil.com dan mengatur untuk mengirim POST http://example.com/delete-my-account , ia tidak akan dapat mengirim token authn saya, jadi permintaan itu diabaikan.

Tentu saja httpOnly adalah grail suci tetapi Anda tidak dapat mengakses dari reactjs atau kerangka js di samping Anda masih memiliki kerentanan CSRF. Rekomendasi saya adalah penyimpanan lokal atau jika Anda ingin menggunakan cookie, pastikan Anda menerapkan beberapa solusi untuk masalah CSRF Anda seperti yang dilakukan Django .

Mengenai CDN, pastikan Anda tidak menggunakan beberapa CDN aneh, misalnya CDN seperti google atau bootstrap berikan, dikelola oleh komunitas dan tidak mengandung kode berbahaya, jika Anda tidak yakin, Anda bebas untuk meninjau.

Pada dasarnya tidak apa-apa untuk menyimpan JWT Anda di Penyimpanan lokal Anda.

Dan saya pikir ini cara yang baik. Jika kita berbicara tentang XSS, XSS menggunakan CDN, itu juga berpotensi menimbulkan risiko masuk / lulus klien Anda juga. Menyimpan data dalam penyimpanan lokal setidaknya akan mencegah serangan CSRF.

Anda harus menyadari keduanya dan memilih apa yang Anda inginkan. Kedua serangan itu tidak semua yang perlu Anda waspadai, hanya ingat: SELURUH APLIKASI ANDA HANYA SEPERTI AMAN SEBAGAI TITIK AMAN TERTAMBAH DARI APLIKASI ANDA.

Sekali lagi menyimpan tidak masalah, menjadi rentan terhadap XSS, CSRF, ... tidak

Tidak aman jika Anda menggunakan CDN:

JavaScript berbahaya dapat disematkan pada halaman, dan Penyimpanan Web dikompromikan. Jenis serangan XSS ini dapat membuat Penyimpanan Web semua orang yang mengunjungi situs Anda, tanpa sepengetahuan mereka. Ini mungkin sebabnya banyak organisasi menyarankan untuk tidak menyimpan sesuatu yang bernilai atau mempercayai informasi apa pun dalam penyimpanan web. Ini termasuk pengidentifikasi dan token sesi.

melalui stormpath

Setiap skrip yang Anda butuhkan dari luar berpotensi dikompromikan dan dapat mengambil JWTS dari penyimpanan klien Anda dan mengirim data pribadi kembali ke server penyerang.

Penyimpanan lokal dirancang agar dapat diakses oleh javascript, sehingga tidak memberikan perlindungan XSS. Seperti disebutkan dalam jawaban lain, ada banyak cara yang memungkinkan untuk melakukan serangan XSS, dari mana penyimpanan lokal tidak dilindungi secara default.

Namun, cookie memiliki bendera keamanan yang melindungi dari serangan XSS dan CSRF. Bendera HttpOnly mencegah javascript sisi klien mengakses cookie, Bendera aman hanya memungkinkan browser untuk mentransfer cookie melalui ssl, dan bendera SameSite memastikan bahwa cookie dikirim hanya ke tempat asal. Meskipun saya baru saja memeriksa dan SameSite saat ini hanya didukung di Opera dan Chrome, jadi untuk melindungi dari CSRF lebih baik menggunakan strategi lain. Misalnya, mengirim token terenkripsi di cookie lain dengan beberapa data pengguna publik.

Jadi cookie adalah pilihan yang lebih aman untuk menyimpan data otentikasi.

Cara untuk melihatnya adalah dengan mempertimbangkan tingkat risiko atau bahaya.

Apakah Anda membangun aplikasi tanpa pengguna, POC / MVP? Apakah Anda seorang pemula yang perlu memasarkan dan menguji aplikasi Anda dengan cepat? Jika ya, saya mungkin hanya akan menerapkan solusi paling sederhana dan mempertahankan fokus pada menemukan produk yang sesuai pasar. Gunakan localStorage karena seringkali lebih mudah diterapkan.

Apakah Anda membuat v2 aplikasi dengan banyak pengguna aktif harian atau aplikasi yang sangat bergantung pada orang / bisnis. Apakah diretas berarti sedikit atau tidak ada ruang untuk pemulihan? Jika demikian, saya akan lama melihat ketergantungan Anda dan mempertimbangkan untuk menyimpan informasi token dalam cookie http-only.

Menggunakan penyimpanan lokal dan penyimpanan cookie / sesi memiliki pro dan kontra mereka sendiri.

Seperti yang dinyatakan oleh jawaban pertama: Jika aplikasi Anda memiliki kerentanan XSS, tidak ada yang akan melindungi pengguna Anda. Karena sebagian besar aplikasi modern memiliki selusin atau lebih dependensi berbeda, menjadi semakin sulit untuk menjamin bahwa salah satu dependensi aplikasi Anda tidak rentan terhadap XSS.

Jika aplikasi Anda memang memiliki kerentanan XSS dan seorang peretas telah dapat memanfaatkannya, peretas akan dapat melakukan tindakan atas nama pengguna Anda. Peretas dapat melakukan permintaan GET / POST dengan mengambil token dari localStorage atau dapat melakukan permintaan POST jika token disimpan dalam cookie http-only.

Satu-satunya sisi buruk dari penyimpanan token Anda di penyimpanan lokal adalah peretas akan dapat membaca token Anda.

Apakah localStorage atau httpOnly cookie tidak dapat diterima? Sehubungan dengan perpustakaan pihak ke-3 yang dikompromikan, satu-satunya solusi yang saya tahu yang akan mengurangi / mencegah informasi sensitif dicuri akan diberlakukan Integritas Subresource .

Subresource Integrity (SRI) adalah fitur keamanan yang memungkinkan browser untuk memverifikasi bahwa sumber daya yang mereka ambil (misalnya, dari CDN) dikirimkan tanpa manipulasi yang tidak terduga. Ini bekerja dengan memungkinkan Anda untuk memberikan hash kriptografi yang harus diambil oleh sumber daya yang diambil.

Selama pustaka pihak ketiga yang dikompromikan aktif di situs web Anda, keylogger dapat mulai mengumpulkan info seperti nama pengguna, kata sandi, dan apa pun yang Anda masukkan ke dalam situs.

Cookie httpOnly akan mencegah akses dari komputer lain tetapi tidak akan melakukan apa pun untuk mencegah peretas memanipulasi komputer pengguna.

Aman untuk menyimpan token Anda di Penyimpanan lokal selama Anda mengenkripsi itu. Di bawah ini adalah cuplikan kode terkompresi yang menunjukkan salah satu dari banyak cara Anda dapat melakukannya.

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

Lalu, sebelum menggunakan token Anda dekripsi menggunakan PRIVATE_KEY_STORED_IN_ENV_FILE