匿名 iframe 來源試用：輕鬆在 COEP 環境中嵌入 iframe

Arthur Sonzogni
Arthur Sonzogni

使用 COEP 的開發人員現在可以嵌入不使用 COEP 的第三方 iframe。

為何需要 COEP

某些網路 API 會提高遭受側通道攻擊的風險，例如 Spectre。為降低這類風險，瀏覽器會提供自選的隔離環境，稱為「跨來源隔離」，其中需要部署 COEP。這可讓網站使用特權功能，包括 SharedArrayBuffer、performance.measureUserAgentSpecificMemory() 和高精確度計時器 (解析度更高)。

如要啟用跨來源隔離功能，網站必須傳送下列兩個 HTTP 標頭：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

啟用 COEP 時會面臨的挑戰

雖然跨來源隔離可提高網頁安全性並啟用強大功能，但部署 COEP 可能並不容易。其中一個最大挑戰是，所有跨來源 iframe 也必須部署 COEP 和 CORP。如果 iframe 沒有這些標頭，瀏覽器就不會載入。

iframe 通常由第三方放送，因此可能不容易部署 COEP。

匿名求救 iframe

這時匿名 iframe 就能派上用場。只要將 anonymous 屬性新增至 <iframe> 元素，iframe 就會從不同的暫時性儲存空間分割區載入，且不再受 COEP 限制。

範例：

<iframe anonymous src="https://example.com">

在新的暫時性內容中建立的 Iframe 無法存取與頂層網站相關聯的任何 Cookie。它從空的 Cookie jar 中開始同樣地，儲存空間 API (例如 LocalStorage、CacheStorage、IndexedDB 等) 會在新的暫時性區隔中載入及儲存資料。該區隔的範圍為目前頂層文件和 iframe 的來源。卸載頂層文件後，系統會清除儲存空間。

匿名 iframe 不適用 COEP 嵌入規則。這仍是安全的，因為每次都是從新的空白背景載入。系統會載入這些廣告，但不會將資料個人化。這些資料只包含公開資料，對攻擊者而言毫無價值。

示範

如要查看匿名 iframe，請前往：https://anonymous-iframe.glitch.me/

註冊來源試用

為確保匿名 iframe 可協助開發人員採用跨來源隔離功能，我們會在 Chrome 106 到 108 版中提供這項功能，做為來源試用功能。

註冊來源試用計畫，讓網站使用匿名 iFrame：

  1. 為來源要求權杖。
  2. 您可以按照下列其中一種方式使用權杖：
    • 在 HTML 中： html <meta http-equiv="Origin-Trial" content="TOKEN_GOES_HERE">
    • 在 JavaScript 中：js const meta = document.createElement('meta'); meta.httpEquiv = 'Origin-Trial'; meta.content = 'TOKEN_GOES_HERE'; document.head.append(meta);
    • 在 HTTP 標頭中： text Origin-Trial: TOKEN_GOES_HERE
  3. 將匿名 iframe 加到你的網頁： html <iframe anonymous src="https://example.com">

如對這項功能有任何意見，請在 GitHub 存放區中提出問題。

第三方來源試用

第三方指令碼也適用來源試用。這表示可透過網頁中嵌入的指令碼啟用。

進一步瞭解如何註冊第三方來源試用版。

常見問題

這項功能會採用其他瀏覽器嗎？

巢狀在 <iframe anonymous> 中的 iframe 是否為匿名？

可以。資源會在內部沿用。一旦 iframe 變成匿名，即使沒有 anonymous 屬性，也會套用至整個子樹狀結構中的所有 iframe。

<iframe anonymous> 的彈出式視窗也會以匿名方式建立嗎？

彈出式視窗會以 noopener 的設定開啟。這些 cookie 是透過新的一般頂層內容建立，並非匿名 cookie。無法與匿名 iframe 通訊。

資源