使用限制属性安全地进行弹出式交互

在与弹出式窗口互动时,实现跨域隔离和跨网站泄露防护。

Arthur Hemery
Maud Nalpas
Maud Nalpas

跨源打开者政策 (COOP) 的新值:restrict-properties。它可带来安全优势,并简化跨源隔离的采用,同时允许您的网站与第三方弹出式窗口进行互动,以实现付款、身份验证或其他用例。

如需开始使用 restrict-properties 进行实验,请从 Chrome 116 开始参与源试用

为何使用 restrict-properties

restrict-properties 有两个主要用例:

防止跨网站泄露,且不会中断

默认情况下,任何网站都可以在弹出式窗口中打开您的应用并获取对它的引用。

恶意网站可以利用这一点来执行跨网站数据泄露等攻击。为降低此风险,您可以使用 Cross-Origin-Opener-Policy (COOP) 标头。

到目前为止,您对 Cross-Origin-Opener-Policy 的选项有限。您可以执行以下任一操作:

  • 设置 same-origin,,以阻止与弹出式窗口的所有跨源互动。
  • 设置 same-origin-allow-popups,以阻止在弹出式窗口中打开您网站的所有跨源互动。
  • 设置 unsafe-none,以允许与弹出式窗口进行所有跨源交互。

这样一来,需要在弹出式窗口中打开的网站无法与其打开程序进行交互以强制执行 COOP。这使得单点登录和付款等关键应用场景不受跨网站泄露的保护。

Cross-Origin-Opener-Policy: restrict-properties 可解决此问题。

使用 restrict-properties 时,无法使用可用于帧计数和其他跨网站渗漏攻击的属性,但允许窗口之间通过 postMessageclosed 进行基本通信。

这样可以提高网站的安全性,同时保留关键用例。例如:

  • 如果您在弹出式窗口中提供服务,设置 Cross-Origin-Opener-Policy: restrict-properties 可保护您免受各种跨网站数据泄露攻击。您仍然可以打开之前可以打开的所有网页。
  • 如果您需要访问跨源弹出式窗口,设置 Cross-Origin-Opener-Policy: restrict-properties 同样也可以防止您的网站进行 iframe 计数。您将能够打开与现在相同的一组弹出式窗口。
  • 如果 opener 和 openee 都设置了标头,并且网页是跨源网页,则其行为方式与其中一个设置了标头的行为类似。如果它们同源,则会授予完整访问权限。

将您的网站进行跨源隔离

为什么需要跨源隔离

某些 Web API 会增加遭受 Spectre 等旁道攻击的风险。Spectre为降低此类风险,浏览器提供了一项名为跨源隔离的可选式隔离环境。借助跨源隔离状态,网页可以使用SharedArrayBufferperformance.measureUserAgentSpecificMemory()高精度计时器等特权功能,并获得更精确的结果,同时将该源与其他源隔离(除非其他源选择启用)。

到目前为止,若要使用这些 API,您必须设置 Cross-Origin-Opener-Policy: same-origin。不过,这会破坏您可能需要的任何跨源弹出式窗口流程,例如单点登录和付款。

现在,您可以使用 Cross-Origin-Opener-Policy: restrict-properties 代替 Cross-Origin-Opener-Policy: same-origin 来启用跨源隔离。它并非切断打开器关系,而是仅将其限制为 window.postMessage()window.closed 的最小通信子集。

您可以使用以下两个标头启用跨源隔离:

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: require-corp

Cross-Origin-Opener-Policy: restrict-properties
Cross-Origin-Embedder-Policy: credentialless

如需详细了解 credentialless,请参阅使用 COEP: credentialless 加载不含 CORP 标头的跨源资源

演示

跨源隔离演示中尝试各种标头选项。

针对源试用进行实验

如需对 Cross-Origin-Opener-Policy: restrict-properties 进行实验,请选择加入源代码试用计划

浏览器支持

目前只有 Chrome 支持 Cross-Origin-Opener-Policy: restrict-properties。其他浏览器也在积极参与标准化讨论

常见问题解答

我的网站需要与同源弹出式窗口进行通信,我是否应使用 COOP: restrict-properties 启用跨源隔离?

在弹出式窗口和主页面上都设置 COOP: restrict-properties 不会造成限制。仅在弹出式窗口或仅在主页面上设置此属性会阻止在打开器中对 postMessageclosed 以外的任何属性的任何访问,即使它们是同源的也是如此。

允许的一组属性是否固定不变?

根据目前收到的反馈,我们怀疑 window.postMessagewindow.closed 已经足以满足大多数工作流程的需求,但我们仍在考虑将其开放给其他媒体资源。如果您的用例无法仅使用 postMessageclosed 解决,请在“Intent to Experiment”线程中留下反馈。

资源