如果您的网站依赖于设置 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.domain
setter 持较为积极的态度。 - 与其他浏览器供应商讨论
- WHATWG / HTML 工作组拉取请求(等待实验体验)
如何知道自己的网站是否受到影响?
如果您的网站受此变更的影响,Chrome 会在开发者工具的“Issues”面板中向您发出警告 - 此警告已于 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
通过postMessage()
发送消息,在 iframe 中请求https://video.example.com
来操控 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 的特定要求,请通过 @ChromiumDev 在 Twitter 上告诉我们,或者在 Stack Overflow 上使用 document.domain
标记提问。
作为最后的补救手段,请发送 Origin-Agent-Cluster: ?0
标头
如果您有充分的理由继续设置 document.domain
,可以将 Origin-Agent-Cluster: ?0
响应标头随目标文档一起发送。
Origin-Agent-Cluster: ?0
Origin-Agent-Cluster
标头会指示浏览器是否应由以源为键的代理集群处理文档。如需详细了解 Origin-Agent-Cluster
,请参阅使用 Origin-Agent-Cluster
标头请求性能隔离。
发送此标头时,您的文档可以继续设置 document.domain
,即使它默认变得不可变也是如此。
需要该行为的所有其他文档也需要发送 Origin-Agent-Cluster
(请注意,如果只有一个文档设置了 document.domain
,则无效)。
为企业政策配置“OriginAgentClusterDefaultEnabled
”
或者,您的管理员可以将 OriginAgentClusterDefaultEnabled
政策配置为 false
,从而在组织中的 Chrome 实例上默认将 document.domain
设置为可设置。有关详情,请参阅 Chrome 企业版政策列表和管理 | 文档。
资源
Document.domain
- Web API | MDN- 源隔离和废弃
document.domain
- 废弃了
document.domain
。· 问题 564 · w3ctag/design-reviews
致谢
照片由 Finan Akbar 提供,由 Unsplash 提供