Memperkenalkan Cross-Origin Storage API

Thomas Steiner

Dipublikasikan: 10 November 2026

Aplikasi web modern sering kali bergantung pada aset besar, seperti framework JavaScript, game engine, dan model AI. Meskipun situs menggunakan aset yang sama, setiap situs harus mendownload dan menyimpan salinan masing-masing aset.

Dengan Cross-Origin Storage API yang diusulkan, atau disingkat COS, klien menentukan konten yang dicarinya berdasarkan hash-nya, dan mengambilnya dari URL mana pun untuk membagikannya di seluruh situs yang ditentukan (atau semua situs). Artinya, resource yang sama dan diketahui dapat dibagikan di seluruh situs, terlepas dari penayangan aset. Proposal ini memberikan manfaat keamanan dan tantangan keselamatan.

Kasus penggunaan

Kami telah menulis panjang lebar tentang pentingnya menyimpan model ke dalam cache dan menyimpan aset apa pun ke dalam cache dengan Cache Storage API. Cross-Origin Storage API melangkah lebih jauh, dan dapat bermanfaat jika beberapa situs terkait (atau lainnya) memerlukan akses ke resource yang sama:

  • Model AI: Model seperti varian Gemma atau Llama memiliki ukuran mulai dari sekitar satu gigabyte hingga puluhan gigabyte. Menyimpan dan mengambil satu salinan melalui COS akan menghindari download duplikat yang sangat besar. Hal ini merupakan motivasi utama di balik proposal tersebut.
  • Modul Wasm: Framework seperti Flutter mengirimkan file Wasm yang diminta jutaan kali sehari di ribuan origin yang berbeda, dan selalu identik dalam hal byte.
  • Library dan framework JavaScript populer: Memaketkan kode vendor secara terpisah dan secara keseluruhan (seperti library React lengkap yang tidak di-treeshake) memungkinkan beberapa aplikasi berbagi satu salinan yang di-cache melalui COS.
  • Game engine: Game browser yang dibuat di engine seperti Godot atau Unity dapat membagikan runtime engine melalui COS dan hanya mengambil aset khusus game melalui jaringan. Portal game yang menghosting banyak game kasual di berbagai origin atau iframe akan mendapatkan manfaat paling besar.
  • Font web besar: Font ikon, font emoji, dan font dengan cakupan Unicode yang luas didownload di banyak halaman. Membagikannya sekali melalui COS akan membantu performa dan keberlanjutan.
Dua game Three.js yang tidak terkait, Descent dan Quake, berbagi satu salinan mesin melalui COS, yang diperiksa di DevTools.
Dua game Three.js yang tidak terkait, Descent (di tab latar belakang) dan Quake (di tab latar depan), berbagi satu salinan mesin melalui COS, yang diperiksa di DevTools. Screenshot ini berasal dari build Chromium eksperimental dan mungkin tidak mencerminkan desain akhir.

Alur dasar penggunaan COS

COS API memperkenalkan metode navigator.crossOriginStorage.getFileHandle() yang digunakan aplikasi web untuk menyimpan dan mengambil file di seluruh batas origin, yang diidentifikasi dengan hash kriptografis. Penjelasan ini memiliki contoh yang menunjukkan alur dasar penggunaan API.

Cobalah sekarang

Ada dua cara untuk bereksperimen dengan COS saat ini:

  • Instal ekstensi browser dari Chrome Web Store, Firefox Add-ons, atau Safari App Store untuk melakukan polyfill pada platform API dan semua integrasi. Anda dapat menguji alur API di browser apa pun. Atau muat ekstensi yang tidak dipaketkan dari kode sumbernya.
  • Eksperimen di Chromium: Ada penerapan Chromium eksperimental. Download untuk macOS di Apple silicon atau Linux x86_64 dari goo.gle/cos-chromium, lalu buka about://flags, telusuri "Cross-Origin Storage", tetapkan ke Enabled, dan mulai ulang saat diminta. Build ini menyertakan integrasi DevTools: temukan Penyimpanan lintas origin di tab Aplikasi.

Minat ekosistem

COS adalah proposal tahap awal, dan sejumlah project sudah menyediakan dukungan eksperimental, biasanya di balik tanda keikutsertaan dan berlapis sebagai progressive enhancement:

  • Emscripten membagikan output Wasm yang dihasilkan.
  • Flutter membagikan runtime Skia Wasm-nya.
  • Transformers.js membagikan bobot model dan runtime Wasm yang menjadi dependensinya.
  • WebLLM membagikan model dan runtime.
  • wllama membagikan model AI.
  • Nuxt.js memuat dependensi bersama dari Penyimpanan Lintas Origin dan mengelola plugin COS Vite.
  • Prompt API Polyfill membagikan model AI di seluruh backend WebLLM dan Transformers.js.
  • Prebid.js memiliki distribusi CDN library bidding header yang siap digunakan untuk COS.

Standardisasi

Penyimpanan Lintas Origin adalah proposal WICG tahap awal. Anda dapat membaca Peninjauan Desain TAG W3C awal.

Masukan tentang API dan proposal ini sangat diharapkan. Anda dapat melaporkan masalah, menunjukkan dukungan, atau membuka permintaan pull di repositori Cross-Origin Storage.

Resource

Selain itu, lihat alat dan demo berikut:

Bacaan latar belakang tambahan

Diskusi dan podcast