Kennismaking met de Cross-Origin Storage API

Thomas Steiner

Gepubliceerd: 10 november 2026

Moderne web-apps zijn vaak afhankelijk van grote componenten, zoals JavaScript-frameworks, game-engines en AI-modellen. Hoewel sites identieke componenten gebruiken, moet elke site een eigen kopie van elke component downloaden en opslaan.

Met de voorgestelde Cross-Origin Storage API, afgekort COS, geeft de client de content aan die deze zoekt via de hash en haalt deze op van een URL om deze te delen op de aangewezen sites (of alle sites). Dit betekent dat een exacte, bekende bron kan worden gedeeld tussen sites, onafhankelijk van de weergave van het item. Dit voorstel biedt beveiligingsvoordelen, maar brengt ook veiligheidsuitdagingen met zich mee.

Toepassingen

We hebben uitgebreid geschreven over het belang van modellen voor caching en het cachen van items met de Cache Storage API. De Cross-Origin Storage API gaat nog een stap verder en kan nuttig zijn als meerdere gerelateerde (of andere) websites toegang nodig hebben tot dezelfde bron:

  • AI-modellen: Modellen zoals Gemma- of Llama-varianten wegen ongeveer een gigabyte tot tientallen gigabytes. Als je één kopie opslaat en ophaalt via COS, voorkom je enorme dubbele downloads. Dit is een belangrijke motivatie achter het voorstel.
  • Wasm-modules: Frameworks zoals Flutter leveren Wasm-bestanden die miljoenen keren per dag worden aangevraagd via duizenden verschillende herkomsten, altijd byte-identiek.
  • Populaire JavaScript-bibliotheken en -frameworks: Als je leverancierscode afzonderlijk en in zijn geheel bundelt (zoals de volledige, niet-getreeshakete React-bibliotheek), kunnen meerdere apps één gecachte kopie delen via COS.
  • Game-engines: Browsergames die zijn gebouwd op engines zoals Godot of Unity, kunnen de engine-runtime delen via COS en alleen gamespecifieke items ophalen via het netwerk. Gamingportals die veel casual games hosten via verschillende oorsprongen of iframes, hebben hier het meeste baat bij.
  • Grote weblettertypen: Icoonlettertypen, emoji-lettertypen en lettertypen met een brede Unicode-dekking worden op een enorm aantal pagina's gedownload. Als je ze één keer deelt via COS, is dat goed voor zowel de prestaties als de duurzaamheid.
2 niet-gerelateerde Three.js-games, Descent en Quake, delen één exemplaar van de engine via COS, geïnspecteerd in DevTools.
2 niet-gerelateerde Three.js-games, Descent (op het achtergrondtabblad) en Quake (op het voorgrondtabblad), delen één exemplaar van de engine via COS, geïnspecteerd in DevTools. Dit screenshot is van een experimentele Chromium-build en komt misschien niet overeen met het uiteindelijke ontwerp.

Het basisproces voor het werken met COS

De COS API introduceert een navigator.crossOriginStorage.getFileHandle()-methode waarmee web-apps bestanden opslaan en ophalen over oorsprongsgrenzen heen, geïdentificeerd door een cryptografische hash. De uitleg bevat een voorbeeld dat de basisstroom van het werken met de API toont.

Probeer het nu

Je kunt op 2 manieren experimenteren met COS:

  • Installeer een browserextensie uit de Chrome Web Store, Firefox Add-ons of Safari App Store om de API-surface en alle integraties te polyfillen. Je kunt het API-proces in elke browser testen. Of laad de uitgepakte extensie vanuit de broncode.
  • Experiment in Chromium: Er is een experimentele Chromium-implementatie. Download de versie voor macOS op Apple Silicon of Linux x86_64 via goo.gle/cos-chromium, open about://flags, zoek naar Cross-Origin Storage, stel deze in op Aangezet en start opnieuw op als daarom wordt gevraagd. Deze build bevat een DevTools-integratie: zoek Cross-origin-opslag op het tabblad App.

Interesse in ecosysteem

COS is een voorstel in een vroeg stadium en een aantal projecten biedt al experimentele ondersteuning, meestal achter een aanmeldingsvlag en gelaagd als een progressive enhancement:

  • Emscripten deelt de gegenereerde Wasm-uitvoer.
  • Flutter deelt de Skia Wasm-runtime.
  • Transformers.js deelt modelgewichten en de Wasm-runtimes waarvan ze afhankelijk zijn.
  • WebLLM deelt modellen en runtimes.
  • wllama deelt AI-modellen.
  • Nuxt.js laadt gedeelde afhankelijkheden uit Cross-Origin Storage en onderhoudt een Vite COS-plug-in.
  • Prompt API Polyfill deelt AI-modellen via de backends WebLLM en Transformers.js.
  • Prebid.js heeft een COS-klare CDN-distributie van de bibliotheek voor bieden via koptekst.

Standaardisatie

Cross-Origin Storage is een voorstel van de WICG dat zich nog in een vroeg stadium bevindt. Je kunt de vroege W3C TAG Design Review lezen.

Feedback over de API en het voorstel is welkom. Je kunt problemen melden, support tonen of pull-verzoeken openen in de Cross-Origin Storage-repository.

Bronnen

Probeer ook deze tools en demo's:

Aanvullende achtergrondinformatie

Lezingen en podcasts