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://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”页面。

浏览器兼容性

如何知道我的网站是否受到影响？

如果您的网站受到此变更的影响，Chrome 会在 DevTools 的“问题”面板中发出警告（此警告已于 2022 年添加）。请注意开发者工具右上角的黄色旗帜。

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 通过 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-Agent-Cluster，请参阅使用 Origin-Agent-Cluster 标头请求性能隔离。

发送此标头后，即使文档默认变为不可变，您仍可继续设置 document.domain。

所有其他需要此行为的文档也需要发送 Origin-Agent-Cluster（请注意，如果只有一个文档设置了 document.domain，则不会产生任何影响）。

为企业政策配置 OriginAgentClusterDefaultEnabled

（可选）您的管理员可以将 OriginAgentClusterDefaultEnabled 政策配置为 false，以便在整个组织中的 Chrome 实例上默认可设置 document.domain。如需了解详情，请参阅 Chrome 企业版政策列表和管理功能 | 文档。

资源

致谢

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