Cross-Origin Storage API の導入

Thomas Steiner

公開日: 2026 年 11 月 10 日

最新のウェブアプリは、JavaScript フレームワーク、ゲームエンジン、AI モデルなどの大規模なアセットに依存することがよくあります。サイトが同一のアセットを使用しているにもかかわらず、各サイトはそれぞれのアセットのコピーをダウンロードして保存する必要があります。

提案されている クロスオリジン Storage API（略して COS）では、クライアントは探しているコンテンツをハッシュで指定し、任意の URL から取得して、指定されたサイト（またはすべてのサイト）で共有します。つまり、正確で既知のリソースを、アセットの提供とは無関係にサイト間で共有できます。この提案には、セキュリティ上のメリットと安全性に関する課題があります。

ユースケース

キャッシュ モデルの重要性と、Cache Storage API を使用したアセットのキャッシュ保存については、これまで詳しく説明してきました。Cross-Origin Storage API はさらに一歩進んでおり、複数の関連する（または関連しない）ウェブサイトが同じリソースにアクセスする必要がある場合に役立ちます。

  • AI モデル: Gemma や Llama のバリアントなどのモデルは、約 1 GB から数十 GB のサイズになります。COS を介して 1 つのコピーを保存して取得することで、大量の重複ダウンロードを回避できます。これが、この提案の主な動機です。
  • Wasm モジュール: Flutter などのフレームワークは、数千の異なるオリジンから 1 日に数百万回リクエストされる Wasm ファイルを、常にバイト単位で同一の状態で提供します。
  • 一般的な JavaScript ライブラリとフレームワーク: ベンダーコードを個別に、かつ全体としてバンドルする（完全な、ツリーシェイキングされていない React ライブラリなど）ことで、複数のアプリが COS を介して 1 つのキャッシュされたコピーを共有できます。
  • ゲームエンジン: Godot や Unity などのエンジンで構築されたブラウザゲームは、COS を介してエンジン ランタイムを共有し、ゲーム固有のアセットのみをネットワーク経由で取得できます。さまざまなオリジンまたは iframe で多くのカジュアル ゲームをホストするゲームポータルが、最も大きなメリットを得られます。
  • 大きなウェブフォント: アイコン フォント、絵文字フォント、Unicode のカバー範囲が広いフォントは、膨大な数のページでダウンロードされます。COS を通じて一度共有すると、パフォーマンスとサステナビリティの両方に役立ちます。
2 つの無関係な Three.js ゲーム（Descent と Quake）が、COS を介してエンジンの 1 つのコピーを共有しています。これは DevTools で確認できます。
2 つの無関係な Three.js ゲーム、Descent（バックグラウンド タブ）と Quake（フォアグラウンド タブ）が、COS を介してエンジンの 1 つのコピーを共有しています。これは DevTools で確認できます。このスクリーンショットは試験運用版の Chromium ビルドのものであり、最終的なデザインとは異なる場合があります。

COS を使用する際の基本的なフロー

COS API には navigator.crossOriginStorage.getFileHandle() メソッドが導入されており、ウェブアプリは、暗号学的ハッシュで識別されるオリジンの境界を越えてファイルを保存、取得できます。説明資料には、API を操作する基本的なフローを示す例が記載されています。

今すぐ試す

現在、COS を試すには次の 2 つの方法があります。

  • Chrome ウェブストア、Firefox アドオン、Safari App Store からブラウザ拡張機能をインストールして、API サーフェスとすべての統合をポリフィルします。API フローは任意のブラウザでテストできます。または、ソースコードからパッケージ化されていない拡張機能を読み込む。
  • Chromium での試験運用: 試験運用版の Chromium 実装があります。Apple シリコンまたは Linux x86_64 搭載の macOS 用の Chromium を goo.gle/cos-chromium からダウンロードし、about://flags を開いて「クロスオリジン ストレージ」を検索し、[Enabled] に設定して、プロンプトが表示されたら再起動します。このビルドには DevTools の統合が含まれています。[Application] タブで [Cross-origin storage] を見つけてください。

エコシステムへの関心

COS は初期段階の提案であり、多くのプロジェクトですでに試験運用版のサポートが提供されています。通常はオプトイン フラグの背後にあり、プログレッシブ エンハンスメントとして階層化されています。

  • Emscripten は、生成された Wasm 出力を共有します。
  • Flutter は Skia Wasm ランタイムを共有します。
  • Transformers.js は、モデルの重みと、それらが依存する Wasm ランタイムを共有します。
  • WebLLM はモデルとランタイムを共有します。
  • wllama は AI モデルを共有します。
  • Nuxt.js は、クロスオリジン ストレージから共有依存関係を読み込み、Vite COS プラグインを維持します。
  • Prompt API Polyfill は、WebLLM バックエンドと Transformers.js バックエンド間で AI モデルを共有します。
  • Prebid.js には、ヘッダー入札ライブラリの COS 対応 CDN ディストリビューションがあります。

標準化

クロスオリジン ストレージは、WICG の初期段階の提案です。初期の W3C TAG 設計レビューをご覧ください。

API と提案に関するフィードバックをお待ちしています。クロスオリジン ストレージ リポジトリで、問題の報告、サポートの表示、pull リクエストの作成を行うことができます。

リソース

また、以下のツールとデモもご覧ください。

その他の参考情報

トークとポッドキャスト