共享存储空间和部分网址更新：跨源 Worklet 和已保存的查询

Tara Agyemang
Tara Agyemang
GitHub LinkedIn

Chrome 130 对 Shared Storage API 进行了更改，以支持将跨源 worklet 脚本与 createWorklet() 和 addModule() 搭配使用。我们还将在 Chrome 132 中更新 Select 网址 API with Shared Storage，以支持已保存的查询。

此图显示已注册的网站可以将任何类型的键值对数据写入共享存储空间，但只能使用特定输出 API 读取数据。
借助 Shared Storage API，已注册的网站可以将任何类型的键值对数据写入 Shared Storage，但只能使用特定的输出 API 读取数据。

Chrome 130 中的 Shared Storage API 跨源 worklet

我们在 Chrome 130 中对 Shared Storage API 进行了更改，以便您在使用跨源 worklet 脚本时更灵活。

具体变化

我们已移除 addModule() 的同源限制，因此您现在可以从任何来源加载 Worklet 脚本。跨源 worklet 脚本支持关键用例，例如在 CDN 上托管 worklet 脚本。如果 worklet 脚本与调用 browsing context 的来源不同，则调用 context 的来源将用作访问共享存储空间的数据分区来源。

为了与新的 addModule() 行为保持一致并减少可能的混淆，createWorklet() 调用中添加了 dataOrigin 属性，以允许对与调用浏览上下文不同的共享存储数据分区进行读写。这样一来，您就可以更精细地控制每个 worklet 访问哪个源的共享存储空间，即使使用跨源 worklet 脚本也是如此。

变化情况

从 Chrome 125 开始，网页上的第三方跨源脚本能够通过调用 createWorklet(url) 创建跨源 Worklet，而无需跨源 iframe。以前，无论调用上下文如何，createWorklet(url) 都使用脚本网址 (url) 来源作为数据分区来源。

在 Chrome 130 中，为了与新的 addModule() 行为保持一致，createWorklet() 还会将调用上下文用作默认的数据分区来源。为了继续将脚本网址来源用作数据分区来源，我们引入了新属性 dataOrigin，以便您显式设置数据分区来源。

新的 dataOrigin 属性接受 "script-origin"，用于将数据分区源设置为脚本的源，以及 "context-origin"，用于将数据分区源设置为调用浏览上下文的源。在未来的版本中，我们还计划支持自定义数据分区来源，在这种情况下，worklet 脚本可以选择性地访问来自任意来源的共享存储数据。

加载将数据源设置为 "script-origin" 的跨源脚本时，从浏览器发送的脚本请求将包含 "Sec-Shared-Storage-Data-Origin: <origin>" 标头。如需启用此功能，脚本还必须包含 "Shared-Storage-Cross-Origin-Worklet-Allowed: ?1" 选择接受响应标头。

使用方法

如果您已在使用 createWorklet()，并且将脚本来源用作 Worklet 的数据分区来源，则可以按如下方式设置 dataOrigin：

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

由于 createWorklet() 允许创建跨源数据分区和创建多个 worklet，因此我们建议您改用 createWorklet()，而不是使用 addModule()。

我们更新了开发者文档，以反映这些变更并提供进一步的指导。

在 Chrome 132 中使用 Select 网址 API 保存的查询

我们将在 Chrome 132 中更新 Select 网址 API，使其支持已保存的查询，并支持 Shared Storage。

具体变化

Select 网址 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 相关的最新动态和公告。

需要帮助？