Chrome 禁止修改 document.domain

如果您的网站依赖于设置 document.domain，则需要您采取行动。

Maud Nalpas
Eiji Kitamura

发生了哪些变化，原因是什么？

从 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 会在 DevTools 问题面板中向您发出警告 - 此警告已在 2022 年添加。 请注意 DevTools 右上角的黄色标志。

DevTools 中问题警告的屏幕截图

您还可以通过 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 在 iframe 中请求 https://video.example.com，以通过 postMessage() 发送消息来操作 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 上使用 a 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 企业版政策列表和管理功能 | 文档。

资源

致谢

照片提供者：Finan Akbar；来源：Unsplash