如果您的網站依賴設定 document.domain,則必須採取行動。
異動內容和原因
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://parent.example.com 上建立對 https://video.example.com 的跨來源 DOM 操作。
網站會設定 document.domain,讓同網站的文件更容易通訊。由於這項變更放寬了同源政策,父項頁面可以存取 iframe 的文件並遍歷 DOM 樹狀結構,反之亦然。
這項技術很方便,但會帶來安全風險。
document.domain 的安全疑慮
由於 document.domain 的安全性問題,規格已變更,提醒使用者避免使用。
舉例來說,如果兩個網頁設定 document.domain,可以假裝是同源。如果這些網頁與不同子網域共用代管服務,就更需要注意這點。設定 document.domain 會開放存取該服務代管的所有其他網站,讓攻擊者更容易存取您的網站。這是因為 document.domain 會忽略網域的通訊埠號碼部分。
如要進一步瞭解設定 document.domain 對安全性的影響,請參閱 MDN 上的「Document.domain」頁面。
瀏覽器相容性
- HTML 規格指出應移除這項功能。
- Mozilla 認為預設停用
document.domain值得進行原型設計。 - WebKit 表示他們對淘汰
document.domainsetter 持中等程度的正面態度。 - 與其他瀏覽器供應商討論
- WHATWG / HTML 工作群組 Pull Request (待實驗體驗)
如何得知我的網站是否受到影響?
如果您的網站受到這項異動影響,Chrome 會在開發人員工具的「問題」面板中顯示警告 (這項警告是在 2022 年新增)。請注意開發人員工具右上方的黃色旗標。

您也可以透過 LightHouse 淘汰的 API 稽核執行網站,找出所有預計從 Chrome 移除的 API。
如果您已設定 Reporting API,Chrome 會傳送淘汰報表,通知您這項淘汰作業即將進行。進一步瞭解如何使用 Reporting API,無論是搭配現有的報表收集服務,還是自行建構內部解決方案,都適用。
如何查看這項異動的實際運作情形?
這項異動將逐步推出,Chrome 115 版將率先採用。 如要查看這項變更的實際效果 (即使 Chrome 瀏覽器尚未推出這項功能),請按照下列步驟開啟:
- 開啟「
chrome://flags/#origin-agent-cluster-default」 - 選取「啟用」。
- 重新啟動 Chrome。
我可以改用哪些替代方案?
最佳做法是完全不要修改 document.domain,例如將網頁和所有組成框架託管在相同來源。這項功能適用於所有瀏覽器的所有版本。但這可能需要大幅重新設計應用程式,因此也值得考慮其他替代方案,繼續支援跨來源存取。
請改用 postMessage() 或 Channel Messaging API,而非 document.domain
在大多數情況下,跨來源 postMessage() 或 Channel Messaging API 可以取代 document.domain。
在下列範例中:
https://parent.example.com要求https://video.example.com,在 iframe 中透過postMessage()傳送訊息來操控 DOM。https://video.example.com會在收到訊息後立即操控 DOM,並將成功通知傳回父項。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 政策,在貴機構的 Chrome 執行個體上預設啟用 false,讓使用者預設可設定 document.domain。詳情請參閱「Chrome Enterprise 政策清單和管理服務 | 說明文件」。
資源
Document.domain- Web APIs | MDN- 來源隔離和淘汰
document.domain - 淘汰
document.domain。· Issue #564 · w3ctag/design-reviews
特別銘謝
相片來源:Finan Akbar 發表於 Unsplash 網站上