使用 restricted-properties 確保彈出式視窗互動的安全

與彈出式視窗互動時,可獲得跨來源隔離和跨網站洩漏防護。

我們推出了新的跨來源開啟者政策 (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 計數。您將可開啟與目前相同的彈出式視窗。
  • 如果開啟者和被開啟者都設定了標頭,且網頁屬於跨來源,則行為與其中一方設定標頭類似。如果來源相同,系統會授予完整存取權。

讓網站已跨來源隔離

為何需要跨來源隔離

部分網頁 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」討論串中提供意見回饋

資源