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

在与弹出式窗口互动时,获得跨源隔离和跨站泄漏保护。

跨源开放者政策 (COOP) 有一个新值:restrict-properties。它不仅能带来安全优势,还能让您更轻松地采用跨源隔离,同时允许您的网站与第三方弹出式内容(窗口/广告/etc.)互动,以实现付款、身份验证或其他用例。

如需开始体验 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 计数的影响。您将能够打开目前可以打开的同一组弹出式窗口。
  • 如果打开方和被打开方都设置了该标头,并且页面是跨源的,则其行为与其中一方设置了该标头类似。如果它们是同源的,则授予完全访问权限。

使您的网站实现跨域隔离

为什么需要跨源隔离

某些 Web API 会增加发生侧信道攻击(例如 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,请选择加入源试用

浏览器支持

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

常见问题解答

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

同时在弹出式窗口和主网页上设置 COOP: restrict-properties 不会造成限制。如果仅在弹出式窗口或仅在主网页上设置此属性,即使打开程序是同源的,也会阻止其访问 postMessageclosed 以外的任何属性。

允许的属性集是否固定?

根据目前收到的反馈,我们认为 window.postMessagewindow.closed 足以满足大多数工作流程的需求,但我们仍在考虑是否向其他媒体资源开放此功能。如果您有无法仅使用 postMessageclosed 解决的用例,请在“Intent to Experiment”主题帖中留下反馈

资源