共用儲存空間和選取網址更新：跨來源小程式和已儲存的查詢

Tara Agyemang
Tara Agyemang
GitHub LinkedIn

Chrome 130 對 Shared Storage API 進行了變更，可透過 createWorklet() 和 addModule() 使用跨來源工作區塊指令碼。我們也將在 Chrome 132 中推出 Select URL API 的更新版本，以支援儲存的查詢。

圖表顯示已註冊的網站可以將任何類型的鍵/值資料寫入共用儲存空間，但讀取資料的權限則受到特定輸出 API 的限制。
Shared Storage API 可讓已註冊的網站將任何類型的鍵/值資料寫入 Shared Storage，但讀取資料的權限僅限於特定輸出 API。

在 Chrome 130 中使用 Shared Storage API 的跨來源 worklet

我們已在 Chrome 130 中對 Shared Storage API 進行變更，讓您在使用跨來源工作區塊指令碼時更具彈性。

異動情形

我們已移除 addModule() 的相同來源限制，因此您現在可以從任何來源載入 worklet 指令碼。跨來源工作區塊指令碼可用於執行重要用途，例如在 CDN 上代管工作區塊指令碼。如果工作區範本指令碼跨來源對應至叫用瀏覽內容，系統會將叫用內容的來源做為資料分區來源，用於存取共用儲存空間。

為了配合新的 addModule() 行為，並減少可能產生的混淆，我們已將 dataOrigin 屬性新增至 createWorklet() 呼叫，以便讀取及寫入與叫用瀏覽內容不同的共用儲存資料區段。這樣一來，您就能更精細地控制每個 worklet 可以存取哪些來源的共用儲存空間，即使使用跨來源 worklet 指令碼也是如此。

變化情形

自 Chrome 125 起，網頁上的第三方跨原始來源指令碼可透過叫用 createWorklet(url) 建立跨原始來源的 worklet，而不需要跨原始來源 iframe。先前，無論叫用情境為何，createWorklet(url) 都會使用指令碼網址 (url) 來源做為資料區隔來源。

在 Chrome 130 中，為了配合新的 addModule() 行為，createWorklet() 也會使用叫用內容做為預設資料區隔來源。如要繼續使用指令碼網址來源做為資料分割區來源，我們會推出新的屬性 dataOrigin，讓您明確設定資料分割區來源。

新的 dataOrigin 屬性可接受 "script-origin"，將資料分區來源設為指令碼的來源，以及 "context-origin"，將資料分區來源設為叫用瀏覽內容的來源。我們也預計在日後推出的版本中支援自訂資料區隔來源，讓工作區單位指令碼可根據選擇加入的方式，存取任意來源的共用儲存空間資料。

當您載入跨來源指令碼，並將資料來源設為 "script-origin" 時，從瀏覽器傳送的指令碼要求會包含 "Sec-Shared-Storage-Data-Origin: <origin>" 標頭。如要啟用這項功能，指令碼也必須包含 "Shared-Storage-Cross-Origin-Worklet-Allowed: ?1" 選擇採用回應標頭。

使用方法

如果您已使用 createWorklet()，並將指令碼來源設為工作區塊的資料分區來源，您可以依下列方式設定 dataOrigin：

sharedStorage.createWorklet(scriptUrl, {dataOrigin: "script-origin"});

由於 createWorklet() 可建立跨來源資料分割區，並建立多個 worklet，因此我們建議您改用 createWorklet() 取代 addModule()。

我們已更新開發人員說明文件，以反映這些變更並提供進一步指引。

在 Chrome 132 中使用 Select URL API 儲存查詢

我們將在 Chrome 132 中推出 Select URL API 更新，並支援儲存的查詢。

異動內容

Select URL API 目前有兩個每頁載入預算，可限制每次頁面載入時對 API 發出的呼叫次數。我們推出了可針對每個網頁儲存及重複使用查詢的功能。使用已儲存查詢時，系統會在首次執行已儲存查詢時收取每頁載入預算，但不會在同一頁面載入期間後續執行已儲存查詢時收取。

如何導入已儲存的查詢

自 Chrome 132 版本起，您可以在 selectURL() 的選項中使用 savedQuery 參數，並搭配查詢名稱：

await sharedStorage.selectURL('experiment', urls, {
  savedQuery: 'control_or_experiment',
  keepAlive: true
});

每次呼叫 selectURL() 時，請使用相同的 savedQuery 名稱，確保後續查詢會使用相同的預算。

我們已更新說明文件，反映這些異動，並提供有關 selectURL() 預算的更多詳細資訊。

互動並分享意見回饋

請注意，Shared Storage API 提案仍在積極討論和開發中，因此可能會有變動。

我們很期待聽到您對 Shared Storage API 的想法。

掌握最新消息

  • 電子報：訂閱我們的電子報，即可取得與 Shared Storage API 相關的最新消息和公告。

需要協助嗎？