分区弹出式窗口：开发者试用版中用于 Web 弹出式窗口的新方法

Natalia Markoborodova
Natalia Markoborodova
X GitHub LinkedIn

自 Chrome 132 起，开发者可以参与一项开发者试用，体验一种新的 Web 弹出式窗口方法：分区弹出式窗口。此开发者试用版仅适用于桌面设备，Android 设备尚不支持此功能。

分区的 popin 是一种新型弹出式窗口，专为短时间交互而设计，例如登录或快速确认。它加载具有以下两项独特功能的 Web 内容：

为什么需要分区弹出式窗口？

分区弹出窗口旨在维护分区 iframe 的隐私属性和弹出窗口的安全属性。

随着越来越多的用户选择在不使用第三方 Cookie 的情况下浏览网页，依赖于在弹出式窗口中存储数据以便日后在第三方环境中检索数据的流程（例如，跨网站维护用户会话）可能会中断。分区弹出式窗口旨在解决此问题。

分区弹出式窗口是如何运作的？

每个分区弹出式窗口的存储空间都分区到其打开者。存储分区可限制对跨网站数据的访问，从而降低跟踪风险和脚本注入攻击风险。如需了解存储空间分区的工作原理，请参阅我们的文档。

假设有一个 opener.example 网站嵌入了来自 third-party.example 的内容。如需在 opener.example 上显示个性化内容，用户需要在 third-party.example 上登录。当用户的浏览器中屏蔽了第三方 Cookie 时，当前的弹出式窗口流程如下所示：

  1. 用户点击登录按钮。
  2. 系统会打开一个对话框。
  3. 用户从 third-party.example 的顶级上下文登录，并写入未分区的身份验证 Cookie。
  4. 当 third-party.example 内容嵌入到 opener.example 中时，如果 third-party.example 在第一方环境中呈现，则无法访问其自身在 third-party.example 上写入的顶级 Cookie。这是因为身份验证 Cookie 未分区，因此属于第三方 Cookie。
一种弹出式用户身份验证流程，其中来自“third-party.example”的 iframe 嵌入在“opener.example”上，并且“third-party.example”在弹出式窗口中打开。由于该 Cookie 是在“third-party.example”弹出窗口的顶级上下文中设置的，因此 iframe 无法访问其自己的未分区 Cookie。
弹出式窗口流程：嵌入在 opener.example 中的 third-party.example iframe 无法访问其自身在 third-party.example 弹出式窗口的顶级上下文中设置的未分区 Cookie。

分区后的弹出式窗口的存储空间会分区给打开者。此更改会影响流程的第 3-4 步：

  1. 用户从 third-party.example 的顶级上下文登录。由于它是在分区后的 popin 中打开的，因此存储空间会按 opener.example 进行分区。

  2. 嵌入在 opener.example 中的 third-party.example 内容可以访问在弹出式窗口中设置的自有 Cookie，因为它们共享相同的分区存储空间。

一种分区弹出式用户身份验证流程。在“opener.example”上打开了来自“third-party.example”的弹出式窗口。此弹出式窗口中的 iframe 可以访问由“third-party.example”的顶级上下文设置的 Cookie
分区弹出式窗口流程：嵌入在 opener.example 中的 third-party.example iframe 可以访问其自身在 third-party.example 弹出式窗口的顶级上下文中设置的分区 Cookie，因为该 Cookie 是按 opener.example 分区的。

分区式弹出窗口旨在帮助用户了解打开程序和弹出窗口之间的关系：

  • 当用户切换到其他标签页时，弹入式窗口会自动变为不可见且无法访问，就像模态框只有在打开标签页处于活动状态时才可见一样。
  • 当用户返回到打开器标签页时，弹出式窗口会再次显示。
  • 用户无法在弹出式窗口的浏览器地址栏中进行更改。
采用分区弹出式窗口的存储空间分区：嵌入在打开网页中的 iframe 可以访问在弹出式窗口中设置的存储空间。

试试看

Chrome 132 针对分区弹出窗口功能推出了开发者试用。这意味着该功能将在标志后面提供。您可以按以下步骤尝试分区弹出式窗口：

  1. 请确保您使用的是 Chrome 132 或更高版本。
  2. 前往 chrome://flags#partitioned-popins 并启用相应的功能标志。
  3. 重新启动 Chrome。
  4. 不妨试试我们的演示。

在网站上使用分区弹出式窗口

如需在网站上使用分区的弹出式窗口，请调用 window.open() 方法并传递 popin 参数：

window.open("third-party-popin.example", "_blank", "popin");

分享您的反馈

我们正在探索分区的弹出式窗口，并期待收到开发者的反馈。以下是一些潜在的应用场景：

  • 用户身份验证流程。如果您实现了自定义身份验证流程，并且身份验证发生在与您的网站不同的网域上（例如，site.example 用户在 auth-site.example 上登录），请尝试在弹出式窗口中打开身份验证页面，以使用打开器页面上的会话 Cookie。
  • 嵌入式内容。您可以尝试使用分屏弹出式窗口来显示第三方 widget 中的其他内容，例如设置对话框、图片或 PDF（或通常在弹出式窗口中加载的其他内容），这些内容会呈现在更大的窗口中。在这种情况下，分区弹出式窗口旨在保留第三方 widget 与您的网站之间的用户会话状态。

如果您的解决方案中存在上述任何一种情况，或者您想到了其他使用情形，或者想帮助我们塑造此功能的未来，请试用此功能并告诉我们：

  • 您是否遇到过任何问题？
  • 您对如何改进用户体验有任何建议吗？
  • 您对改进界面有什么建议吗？具体来说，您是否认为界面清楚地表明了打开者和嵌入式窗口之间的关系？
  • 您觉得此功能对您有多大用处？
  • 您是否还有其他用例希望使用分区弹出式窗口？

请在 GitHub 上提交问题，分享您的想法。