使用 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()高精度計時器) 的解析度,同時將來源與其他來源隔離 (除非使用者選擇加入)。

截至目前為止,如要使用這些 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 才能解決,請在「實驗意圖」執行緒上留下意見回饋。

資源