Chrome 停用了 document.domain 的修改功能

如果你的網站必須使用 document.domain，請務必採取行動。

莫德納爾帕斯
Mau Nalpas
Twitter GitHub
Eiji Kitamura
Eiji Kitamura
Twitter GitHub Glitch Mastodon

異動內容與原因

從 Chrome 115 版開始，網站將無法設定 document.domain：Chrome 將讓 document.domain 設為不可變動。如要跨來源通訊，您需要使用其他方法，例如 postMessage() 或 Channel Messaging API。

請注意，我們會逐步推出這項變更。

我們希望其他瀏覽器最終會淘汰並移除此功能。詳情請參閱瀏覽器相容性一節。

為什麼要將 document.domain 設為不可變動？

document.domain 的用途是取得或設定來源的主機名稱。許多網站設定了 document.domain，以便允許「相同網站」和「跨來源」網頁進行通訊。

雖然這是個方便的技術，但由於這會放寬相同來源政策，因此會產生安全性風險。document.domain 相關的安全疑慮導致以下規格異動，警告使用者應避免使用該服務。

詳細說明：為什麼要將 document.domain 設為不可變動？

「document.domain」目前的用量

許多網站設定了 document.domain，以便允許相同網站但跨來源網頁進行通訊。

相同網站，但跨來源網站有相同的 eTLD+1，但子網域不同。

以下是目前為止「document.domain」的使用情形：

假設 https://parent.example.com 上的網頁嵌入了 https://video.example.com 的 iframe 頁面。這些網頁的 eTLD+1 (example.com) 不同子網域。如果兩個網頁的 document.domain 設為 'example.com'，瀏覽器會將這兩個來源視為相同來源。

設定 https://parent.example.com 的 document.domain：

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

設定 https://video.example.com 的 document.domain：

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

您現在可以針對 https://video.example.com 的 https://parent.example.com 建立跨來源 DOM 操控。

網站會設定 document.domain，以便讓同網站文件更容易進行通訊。這項變更會放寬相同來源政策，因此父項頁面可以存取 iframe 的文件，並且週遊 DOM 樹狀結構，反之亦然。

這是很方便的技術，但會帶來安全性風險。

與「document.domain」有安全疑慮

document.domain 相關的安全疑慮導致規格異動，提醒使用者避免使用該功能。

舉例來說，當兩個頁面設定 document.domain 時，可能會偽裝成相同來源。當這些網頁使用具有不同子網域的共用代管服務時，這一點尤其重要。設定 document.domain 可開放由該項服務代管的所有其他網站的存取權，讓攻擊者更容易存取您的網站。之所以可以這麼做，是因為 document.domain 忽略網域的通訊埠編號部分。

如要進一步瞭解設定 document.domain 的安全性影響，請參閱 MDN 的「Document.domain」頁面。

瀏覽器相容性

如何得知我的網站是否受到影響？

如果您的網站受到這項異動影響，Chrome 會在開發人員工具「Issues」面板中顯示警告訊息，- 我們在 2022 年新增了這項警告。請注意開發人員工具右上方的黃色旗標。

開發人員工具中問題警告的螢幕截圖

您也可以透過 LightHouse 已淘汰 API 稽核功能執行網站，找出所有已排定從 Chrome 移除的 API。

如果您已設定 Reporting API，Chrome 會傳送淘汰報表給您，通知您即將淘汰的消息。進一步瞭解如何使用 Reporting API 搭配現有的報表收集服務，或藉由建構自己的內部解決方案。

如何實際看到這項變更？

這項變更將自 Chrome 115 版起逐步推出。 如要查看這項實際運作情形 (即使 Chrome 瀏覽器尚未推出變更)，您可以按照下列步驟開啟這項功能：

  1. 開啟「chrome://flags/#origin-agent-cluster-default」
  2. 選取「啟用」。
  3. 重新啟動 Chrome。

我可以使用哪些替代方案？

最好的做法是完全不修改 document.domain，例如將網頁和所有構成頁框放在同一來源上。適用於所有版本的瀏覽器。但這可能需要大量重新處理應用程式，因此建議您考慮繼續支援跨來源存取的替代方案。

使用 postMessage() 或 Channel Messaging API，不要使用 document.domain

在大多數用途中，跨來源 postMessage() 或 Channel Messaging API 可以取代 document.domain。

在下列範例中：

  1. https://parent.example.com 會透過 postMessage() 傳送訊息，藉此在 iframe 中要求 https://video.example.com，以便控制 DOM。
  2. https://video.example.com 會在收到訊息後立即操控 DOM，並將成功通知傳回父項。
  3. https://parent.example.com 確認成功。

於 https://parent.example.com：

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

於 https://video.example.com：

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

試用看看，瞭解運作方式。如果您有無法與 postMessage() 或 Channel Messaging API 搭配使用的特定需求，請前往 Twitter 透過 @ChromiumDev 告知我們，或是前往 Stack Overflow 張貼問題並加上 document.domain 標記。

如不得已，請傳送 Origin-Agent-Cluster: ?0 標頭

如果您有充分理由繼續設定 document.domain，可以傳送 Origin-Agent-Cluster: ?0 回應標頭和目標文件。

Origin-Agent-Cluster: ?0

Origin-Agent-Cluster 標頭會指示瀏覽器是否應由 origin-keyed 代理程式叢集處理文件。如要進一步瞭解 Origin-Agent-Cluster，請參閱「使用 Origin-Agent-Cluster 標頭要求效能隔離」。

傳送這個標頭時，文件在預設無法變更後仍可繼續設定 document.domain。

其他所有需要該行為的文件都必須傳送 Origin-Agent-Cluster (請注意，如果只有一組文件設定，document.domain 就沒有作用)。

為企業政策設定 OriginAgentClusterDefaultEnabled

您可以視需要將 OriginAgentClusterDefaultEnabled 政策設為 false，在貴機構的 Chrome 執行個體預設將 document.domain 設定為可設定，詳情請參閱 Chrome Enterprise 政策清單與管理 | 說明文件。

資源

特別銘謝

Finan Akbar 提供的相片由 Unsplash 提供