Einführung der Cross-Origin Storage API

Thomas Steiner

Veröffentlicht: 10. November 2026

Moderne Webanwendungen sind oft auf große Assets wie JavaScript-Frameworks, Game-Engines und KI-Modelle angewiesen. Obwohl die Websites identische Assets verwenden, muss jede Website eine eigene Kopie herunterladen und speichern.

Mit der vorgeschlagenen Cross-Origin Storage API (COS) gibt der Client den gesuchten Inhalt anhand seines Hashs an und ruft ihn von einer beliebigen URL ab, um ihn auf den angegebenen Websites (oder allen Websites) zu teilen. Das bedeutet, dass eine genaue, bekannte Ressource unabhängig von der Bereitstellung des Assets websiteübergreifend freigegeben werden kann. Dieser Vorschlag bietet Sicherheitsvorteile, bringt aber auch Herausforderungen mit sich.

Anwendungsfälle

Wir haben ausführlich über die Bedeutung des Caching von Modellen und des Caching von Assets mit der Cache Storage API geschrieben. Die Cross-Origin Storage API geht noch einen Schritt weiter und kann nützlich sein, wenn mehrere (oder andere) Websites Zugriff auf dieselbe Ressource benötigen:

  • KI-Modelle: Modelle wie Gemma- oder Llama-Varianten sind zwischen etwa einem Gigabyte und mehreren Dutzend Gigabyte groß. Durch das Speichern und Abrufen einer Kopie über COS werden massive doppelte Downloads vermieden. Das ist eine der Hauptmotivationen für den Vorschlag.
  • Wasm-Module: Frameworks wie Flutter stellen Wasm-Dateien bereit, die täglich Millionen Mal von Tausenden verschiedenen Ursprüngen angefordert werden und immer byteidentisch sind.
  • Beliebte JavaScript-Bibliotheken und ‑Frameworks: Wenn Sie Anbieter-Code separat und vollständig bündeln (z. B. die vollständige, nicht per Tree Shaking optimierte React-Bibliothek), können mehrere Apps eine im Cache gespeicherte Kopie über COS gemeinsam nutzen.
  • Spiel-Engines: Browsergames, die auf Engines wie Godot oder Unity basieren, können die Engine-Laufzeit über COS freigeben und nur spielspezifische Assets über das Netzwerk abrufen. Gaming-Portale, die viele Casual Games aus verschiedenen Quellen oder iFrames hosten, profitieren am meisten.
  • Große Webschriftarten: Symbolschriftarten, Emoji-Schriftarten und Schriftarten mit breiter Unicode-Abdeckung werden auf einer enormen Anzahl von Seiten heruntergeladen. Wenn Sie sie einmal über COS freigeben, trägt das sowohl zur Leistung als auch zur Nachhaltigkeit bei.
Zwei nicht miteinander verwandte Three.js-Spiele, Descent und Quake, teilen sich eine Kopie der Engine über COS, die in den DevTools untersucht wird.
Zwei nicht miteinander verbundene Three.js-Spiele, Descent (im Hintergrund-Tab) und Quake (im Vordergrund-Tab), teilen sich eine Kopie der Engine über COS, die in den DevTools untersucht wird. Dieser Screenshot stammt aus einem experimentellen Chromium-Build und entspricht möglicherweise nicht dem endgültigen Design.

Grundlegender Ablauf bei der Arbeit mit COS

Die COS API führt eine navigator.crossOriginStorage.getFileHandle()-Methode ein, mit der Web-Apps Dateien über Ursprungsgrenzen hinweg speichern und abrufen können, die durch einen kryptografischen Hash identifiziert werden. In der Erläuterung finden Sie ein Beispiel, das den grundlegenden Ablauf der Arbeit mit der API zeigt.

Jetzt ausprobieren

Es gibt derzeit zwei Möglichkeiten, mit COS zu experimentieren:

  • Installieren Sie eine Browsererweiterung aus dem Chrome Web Store, den Firefox-Add-ons oder dem Safari App Store, um die API-Oberfläche und alle Integrationen zu polyfillen. Sie können den API-Ablauf in jedem Browser testen. Oder Sie laden die Erweiterung entpackt aus dem Quellcode.
  • Experiment in Chromium: Es gibt eine experimentelle Chromium-Implementierung. Laden Sie die Version für macOS auf Apple Silicon oder Linux x86_64 von goo.gle/cos-chromium herunter, öffnen Sie about://flags, suchen Sie nach „Cross-Origin Storage“, setzen Sie die Option auf Aktiviert und starten Sie den Browser neu, wenn Sie dazu aufgefordert werden. Dieser Build enthält eine DevTools-Integration: Ursprungsübergreifender Speicher auf dem Tab Anwendung.

Interesse am Ökosystem

COS ist ein Vorschlag in der Anfangsphase. Eine Reihe von Projekten bietet bereits experimentelle Unterstützung, in der Regel hinter einem Opt-in-Flag und als progressive Verbesserung:

  • Emscripten gibt die generierte Wasm-Ausgabe frei.
  • Flutter verwendet die Skia-Wasm-Laufzeit.
  • Transformers.js teilt Modellgewichtungen und die Wasm-Laufzeiten, von denen sie abhängen.
  • WebLLM teilt Modelle und Laufzeiten.
  • wllama gibt KI-Modelle frei.
  • Nuxt.js lädt freigegebene Abhängigkeiten aus dem Cross-Origin Storage und verwaltet ein Vite COS-Plug-in.
  • Prompt API Polyfill teilt KI-Modelle über die WebLLM- und Transformers.js-Backends.
  • Prebid.js bietet eine COS-kompatible CDN-Verteilung der Header Bidding-Bibliothek.

Standardisierung

Cross-Origin Storage ist ein Vorschlag der WICG, der sich noch in einem frühen Stadium befindet. Sie können die frühe W3C TAG-Designprüfung lesen.

Feedback zur API und zum Vorschlag ist willkommen. Sie können im Cross-Origin Storage-Repository Probleme melden, Support anbieten oder Pull-Anfragen öffnen.

Ressourcen

Außerdem können Sie sich diese Tools und Demos ansehen:

Weitere Hintergrundinformationen

Vorträge und Podcasts