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

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() 預算的更多詳細資訊。

Engage and share feedback

Note that the Shared Storage API proposal is under active discussion and development and therefore subject to change.

We're eager to hear your thoughts on the Shared Storage API.

Stay Informed

  • Mailing List: Subscribe to our mailing list for the latest updates and announcements related to the Shared Storage API.

Need Help?