Pertanyaan Penyimpanan Lokal vs Cookie


Saya ingin mengurangi waktu muat di situs web saya dengan memindahkan semua cookie ke penyimpanan lokal karena tampaknya memiliki fungsi yang sama. Apakah ada pro / kontra (terutama kinerja-bijaksana) dalam menggunakan penyimpanan lokal untuk menggantikan fungsi cookie kecuali untuk masalah kompatibilitas yang jelas?


796
2017-07-10 20:02


asal


Jawaban:


Cookie dan penyimpanan lokal melayani tujuan yang berbeda. Cookie terutama untuk membaca sisi server, penyimpanan lokal hanya dapat dibaca oleh sisi klien. Jadi pertanyaannya adalah, di aplikasi Anda, siapa yang membutuhkan data ini - klien atau server?

Jika itu klien Anda (JavaScript Anda), maka dengan segala cara beralihlah. Anda membuang-buang bandwidth dengan mengirim semua data di setiap tajuk HTTP.

Jika itu server Anda, penyimpanan lokal tidak begitu berguna karena Anda harus meneruskan data bersama entah bagaimana (dengan Ajax atau bidang formulir tersembunyi atau sesuatu). Ini mungkin baik-baik saja jika server hanya membutuhkan sebagian kecil dari total data untuk setiap permintaan.

Anda tentu ingin meninggalkan cookie sesi Anda sebagai cookie.

Sesuai perbedaan teknis, dan juga pemahaman saya:

  1. Selain sebagai cara lama dalam menyimpan data, Cookie memberi Anda batas 4096 byte (4095, sebenarnya) - per cookie. Penyimpanan Lokal sebesar 5 MB per domain - SO Pertanyaan juga menyebutkannya

  2. localStorage merupakan implementasi dari Storage Antarmuka. Ini menyimpan data dengan tidak ada tanggal kedaluwarsa, dan dibersihkan hanya melalui JavaScript, atau menghapus Data Browser Cache / Locally Stored - tidak seperti kadaluwarsa cookie.


988
2017-07-10 20:54



Dalam konteks JWT, Stormpath telah menulis sebuah artikel yang cukup membantu menguraikan cara yang mungkin untuk menyimpannya, dan keuntungan (dis-) yang berkaitan dengan masing-masing metode.

Ini juga memiliki gambaran singkat tentang XSS dan serangan CSRF, dan bagaimana Anda dapat memeranginya.

Saya telah menyertakan beberapa cuplikan singkat dari artikel di bawah ini, seandainya artikel mereka diambil offline / situs mereka turun.

Penyimpanan lokal

Masalah:

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

Pencegahan:

Untuk mencegah XSS, tanggapan umum adalah untuk melarikan diri dan menyandikan semua data yang tidak dipercaya. Tapi ini jauh dari cerita lengkapnya. Pada tahun 2015, aplikasi web modern menggunakan JavaScript yang dihosting di CDN atau infrastruktur luar. Aplikasi web modern menyertakan pustaka JavaScript pihak ke-3 untuk pengujian A / B, analisis corong / pasar, dan iklan. Kami menggunakan pengelola paket seperti Bower untuk mengimpor kode orang lain ke dalam aplikasi kami.

Bagaimana jika hanya satu skrip yang Anda gunakan yang disusupi? Jahat   JavaScript dapat disematkan di halaman, dan Penyimpanan Web adalah   dikompromikan. Serangan XSS jenis ini bisa mendapatkan Penyimpanan Web semua orang   yang mengunjungi situs Anda, tanpa sepengetahuan mereka. Ini mungkin alasannya a   sekelompok organisasi menyarankan untuk tidak menyimpan sesuatu yang berharga atau kepercayaan   informasi apa pun dalam penyimpanan web. Ini termasuk pengenal sesi dan   token.

Sebagai mekanisme penyimpanan, Penyimpanan Web tidak memberlakukan keamanan apa pun   standar selama transfer. Siapa pun yang membaca Penyimpanan Web dan menggunakannya harus   melakukan due diligence untuk memastikan mereka selalu mengirim JWT melalui HTTPS   dan tidak pernah HTTP.

Kue

Masalah:

Cookie, bila digunakan dengan bendera cookie HttpOnly, tidak dapat diakses melalui JavaScript, dan kebal terhadap XSS. Anda juga dapat mengatur bendera cookie Aman untuk menjamin cookie hanya dikirim melalui HTTPS. Ini adalah salah satu alasan utama mengapa cookie telah dimanfaatkan di masa lalu untuk menyimpan token atau data sesi. Pengembang modern ragu-ragu untuk menggunakan cookie karena mereka secara tradisional mengharuskan negara untuk disimpan di server, sehingga melanggar praktik terbaik RESTful. Cookie sebagai mekanisme penyimpanan tidak mengharuskan negara untuk disimpan di server jika Anda menyimpan JWT di cookie. Ini karena JWT merangkum semua kebutuhan server untuk melayani permintaan.

Namun, cookie rentan terhadap jenis serangan yang berbeda:   pemalsuan permintaan lintas situs (CSRF). Serangan CSRF adalah tipe serangan   yang terjadi ketika situs web jahat, email, atau blog menyebabkan pengguna   browser web untuk melakukan tindakan yang tidak diinginkan di situs tepercaya   pengguna saat ini dikonfirmasi. Ini adalah eksploitasi bagaimana   browser menangani cookie. Cookie hanya dapat dikirim ke domain di   yang diizinkan. Secara default, ini adalah domain yang awalnya   mengatur cookie. Cookie akan dikirim untuk permintaan apa pun   apakah Anda berada di galaxies.com atau hahagonnahackyou.com.

Pencegahan:

CSRF dapat dicegah dengan menggunakan pola token yang disinkronkan. Ini   kedengarannya rumit, tetapi semua kerangka web modern memiliki dukungan untuk   ini.

Misalnya, AngularJS memiliki solusi untuk memvalidasi bahwa cookie tersebut   dapat diakses hanya oleh domain Anda. Langsung dari dokumen AngularJS:

Saat melakukan permintaan XHR, layanan $ http membaca token dari a   cookie (secara default, XSRF-TOKEN) dan menetapkannya sebagai header HTTP   (X-XSRF-TOKEN). Karena hanya JavaScript yang berjalan di domain Anda bisa   baca cookie, server Anda dapat dipastikan bahwa XHR berasal   JavaScript berjalan di domain Anda. Anda dapat membuat perlindungan CSRF ini   tanpa kewarganegaraan dengan menyertakan a xsrfToken Klaim JWT:

{
  "iss": "http://galaxies.com",
  "exp": 1300819380,
  "scopes": ["explorer", "solar-harvester", "seller"],
  "sub": "tom@andromeda.com",
  "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e"
}

Memanfaatkan perlindungan CSRF kerangka kerja web Anda membuat cookie rock   solid untuk menyimpan JWT. CSRF juga dapat dicegah sebagian oleh   memeriksa tajuk HTTP Perujuk dan Asal dari API Anda. CSRF   serangan akan memiliki header Referer dan Origin yang tidak terkait   aplikasi Anda.

Artikel lengkapnya dapat ditemukan di sini: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

Mereka juga memiliki artikel yang membantu tentang cara terbaik merancang dan menerapkan JWT, berkaitan dengan struktur token itu sendiri: https://stormpath.com/blog/jwt-the-right-way/


121
2018-04-02 00:23



Dengan localStorage, aplikasi web dapat menyimpan data secara lokal di dalam peramban pengguna. Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. localStorage lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa memengaruhi kinerja situs web. Meskipun localStorage lebih modern, ada beberapa pro dan kontra untuk kedua teknik.

Kue

Pro

  • Dukungan lawas (sudah ada selamanya)
  • Data persisten
  • Tanggal kedaluwarsa

Cons

  • Setiap domain menyimpan semua cookie dalam satu string, yang dapat membuatnya menguraikan data menjadi sulit
  • Data tidak terenkripsi, yang menjadi masalah karena ... ... meskipun dalam ukuran kecil, cookie dikirim dengan setiap permintaan HTTP Ukuran terbatas (4KB)
  • Injeksi SQL dapat dilakukan dari cookie

Penyimpanan lokal

Pro

  • Didukung oleh sebagian besar browser modern
  • Data persisten yang disimpan langsung di browser
  • Aturan asal yang sama berlaku untuk data penyimpanan lokal
  • Tidak dikirim dengan setiap permintaan HTTP
  • ~ 5MB penyimpanan per domain (itu 5120KB)

Cons

  • Tidak didukung oleh apa pun sebelumnya: IE 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOS 2.0, Android 2.0
  • Jika server perlu menyimpan informasi klien yang Anda inginkan untuk mengirimnya.

localStorage penggunaannya hampir identik dengan sesi satu. Mereka memiliki cukup banyak metode yang tepat, jadi beralih dari sesi ke localStorage adalah permainan anak-anak. Namun, jika data yang disimpan sangat penting untuk aplikasi Anda, Anda mungkin akan menggunakan cookie sebagai cadangan untuk berjaga-jaga localStorage tidak tersedia. Jika Anda ingin memeriksa dukungan browser untuk localStorage, yang harus Anda lakukan adalah menjalankan skrip sederhana ini:

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

"nilai localStorage pada halaman Secure (SSL) terisolasi"   sebagai seseorang yang memperhatikan perlu diingat bahwa localStorage tidak akan   tersedia jika Anda beralih dari protokol aman 'http' ke 'https', di mana   cookie akan tetap bisa diakses. Ini penting untuk   harus diperhatikan jika Anda bekerja dengan protokol yang aman.


55
2018-04-01 02:50



Kecepatan penyimpanan lokal sangat tergantung pada browser yang digunakan klien, serta sistem operasi. Chrome atau Safari pada mac bisa jauh lebih cepat daripada Firefox pada PC, terutama dengan API yang lebih baru. Seperti biasa, pengujian adalah teman Anda (saya tidak dapat menemukan tolok ukur apa pun).

Saya benar-benar tidak melihat perbedaan besar dalam cookie vs penyimpanan lokal. Selain itu, Anda harus lebih khawatir tentang masalah kompatibilitas: tidak semua browser bahkan mulai mendukung API HTML5 baru, sehingga cookie akan menjadi taruhan terbaik untuk kecepatan dan kompatibilitas.


6
2017-07-10 20:13



Penyimpanan lokal dapat menyimpan hingga 10mb data offline, sedangkan sesi dapat menyimpan hingga 5 mb data. Tetapi cookie hanya dapat menyimpan data 4kb dalam format teks.


6
2017-08-05 09:04



Juga perlu disebutkan itu localStoragetidak dapat digunakan ketika pengguna menjelajah dalam mode "pribadi" di beberapa versi Safari seluler.

Dikutip dari MDN (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage):

Catatan: Mulai dengan iOS 5.1, Safari Mobile menyimpan data localStorage di   folder cache, yang kadang-kadang harus dibersihkan, di   perintah OS, biasanya jika ruangnya pendek. Swasta Safari Mobile   Mode browsing juga mencegah penulisan ke localStorage sepenuhnya.


2
2017-11-21 22:16