Akses Asinkron ke Cookie HTTP

Victor Costan
X GitHub

Apa itu Cookie Store API?

Cookie Store API mengekspos cookie HTTP ke pekerja layanan dan menawarkan alternatif asinkron untuk document.cookie. API ini memudahkan Anda untuk:

  • Hindari jank di thread utama, dengan mengakses cookie secara asinkron.
  • Hindari polling untuk cookie, karena perubahan pada cookie dapat diamati.
  • Mengakses cookie dari pekerja layanan.

Baca penjelasan

Status saat ini

Langkah Status
1. Membuat penjelasan Selesai
2. Membuat draf awal spesifikasi Selesai
**3. Mengumpulkan masukan & melakukan iterasi pada spesifikasi** **Sedang berlangsung**
4. Uji coba origin Dijeda
5. Luncurkan Belum dimulai

Bagaimana cara menggunakan penyimpanan cookie asinkron?

Mengaktifkan uji coba origin

Untuk mencobanya secara lokal, API dapat diaktifkan di command line:

chrome --enable-blink-features=CookieStore

Meneruskan tanda ini di command line akan mengaktifkan API secara global di Chrome untuk sesi saat ini.

Atau, Anda dapat mengaktifkan tanda #enable-experimental-web-platform-features di chrome://flags.

Anda (mungkin) tidak memerlukan cookie

Sebelum membahas API baru, saya ingin menyatakan bahwa cookie masih merupakan primitif penyimpanan sisi klien terburuk platform Web, dan masih harus digunakan sebagai upaya terakhir. Hal ini bukan kebetulan - cookie adalah mekanisme penyimpanan sisi klien pertama di Web, dan kami telah banyak belajar sejak saat itu.

Alasan utama untuk menghindari cookie adalah:

  • Cookie memasukkan skema penyimpanan ke API backend Anda. Setiap permintaan HTTP membawa snapshot jar cookie. Hal ini memudahkan engineer back-end untuk memperkenalkan dependensi pada format cookie saat ini. Setelah hal ini terjadi, frontend Anda tidak dapat mengubah skema penyimpanannya tanpa men-deploy perubahan yang cocok ke backend.

  • Cookie memiliki model keamanan yang kompleks. Fitur platform Web modern mengikuti kebijakan origin yang sama, yang berarti bahwa setiap aplikasi mendapatkan sandbox-nya sendiri, dan sepenuhnya independen dari aplikasi lain yang mungkin dijalankan pengguna. Cakupan cookie menyebabkan cerita keamanan yang jauh lebih kompleks, dan hanya mencoba merumuskannya akan menggandakan ukuran artikel ini.

  • Cookie memiliki biaya performa yang tinggi. Browser harus menyertakan snapshot cookie Anda dalam setiap permintaan HTTP, sehingga setiap perubahan pada cookie harus disebarkan di seluruh stack penyimpanan dan jaringan. Browser modern memiliki penerapan penyimpanan cookie yang sangat dioptimalkan, tetapi kita tidak akan pernah dapat membuat cookie seefisien mekanisme penyimpanan lainnya, yang tidak perlu berkomunikasi dengan stack jaringan.

Untuk semua alasan di atas, aplikasi Web modern harus menghindari cookie dan sebagai gantinya menyimpan ID sesi ke dalam IndexedDB, dan secara eksplisit menambahkan ID ke header atau isi permintaan HTTP tertentu, melalui fetch API.

Meskipun demikian, Anda masih membaca artikel ini karena memiliki alasan yang baik untuk menggunakan cookie...

API document.cookie yang sudah lama ada adalah sumber jank yang cukup terjamin untuk aplikasi Anda. Misalnya, setiap kali Anda menggunakan pengambil document.cookie, browser harus berhenti mengeksekusi JavaScript hingga memiliki informasi cookie yang Anda minta. Hal ini dapat memerlukan lompatan proses atau pembacaan disk, dan akan menyebabkan UI Anda mengalami jank.

Perbaikan langsung untuk masalah ini adalah beralih dari pengambil document.cookie ke Cookie Store API asinkron.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

Penyetel document.cookie dapat diganti dengan cara yang sama. Perlu diingat bahwa perubahan hanya dijamin akan diterapkan setelah Promise yang ditampilkan oleh cookieStore.set diselesaikan.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

Amati, jangan polling

Aplikasi populer untuk mengakses cookie dari JavaScript mendeteksi saat pengguna logout, dan memperbarui UI. Hal ini saat ini dilakukan dengan polling document.cookie, yang menyebabkan jank dan berdampak negatif pada masa pakai baterai.

Cookie Store API menghadirkan metode alternatif untuk mengamati perubahan cookie, yang tidak memerlukan polling.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

Menyambut pekerja layanan

Karena desain sinkron, document.cookie API belum tersedia untuk pekerja layanan. Cookie Store API bersifat asinkron, sehingga diizinkan di pekerja layanan.

Berinteraksi dengan cookie berfungsi dengan cara yang sama dalam konteks dokumen dan dalam pekerja layanan.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

Namun, mengamati perubahan cookie sedikit berbeda di pekerja layanan. Memicu service worker dapat cukup mahal, jadi kita harus secara eksplisit mendeskripsikan perubahan cookie yang diminati pekerja.

Pada contoh di bawah, aplikasi yang menggunakan IndexedDB untuk menyimpan data pengguna ke dalam cache memantau perubahan pada cookie sesi, dan menghapus data yang di-cache saat pengguna logout.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

Praktik terbaik

Segera hadir.

Masukan

Jika Anda mencoba API ini, beri tahu kami pendapat Anda. Harap kirimkan masukan tentang bentuk API ke repositori spesifikasi, dan laporkan bug implementasi ke komponen Blink Blink>Storage>CookiesAPI.

Kami sangat tertarik untuk mempelajari pengukuran performa dan kasus penggunaan di luar yang diuraikan dalam penjelasan.

Referensi lainnya