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

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

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 計數。您可以開啟與目前相同的彈出式視窗。
  • 如果開啟者和開啟者皆設定了標頭,且網頁為跨來源,則系統的運作方式與其中一方設定標頭時相似。如果是同源,則會授予完整存取權。

讓網站跨來源隔離

為何需要跨來源隔離

有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這種風險,瀏覽器提供一種有選擇的獨立環境,稱為「跨來源隔離」。在跨來源隔離狀態的情況下,網頁可以使用權限功能 (包括 SharedArrayBufferperformance.measureUserAgentSpecificMemory()高精確度計時器) 且解析度較佳,同時將來源與其他來源隔離,除非使用者選擇啟用。

在此之前,您必須設定 Cross-Origin-Opener-Policy: same-origin,才能使用這些 API。不過,這樣會中斷您可能需要的任何跨來源彈出式視窗流程,例如單一登入和付款。

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 解決的問題,請在意圖實驗子串流中提供意見回饋。

資源