`document.domain` API 的废弃与现代 Web 开发的转型

1. API 介绍与核心功能：

   • document.domain 是一个 JavaScript 属性，允许开发者修改当前文档的域名（通常是其主机名部分）。
   • 主要目的： 解决跨子域通信的问题。
   • 工作原理： 通过在涉及通信的多个页面（例如主页面和 iframe 内容，或两个不同子域的页面）中将 document.domain 设置为相同的父域（例如 example.com），浏览器会将这些页面视为同源（Same Origin），从而绕过同源策略的限制。
   • 代码示例：

     // 在 sub.example.com 页面中
     document.domain = 'example.com';
     // 在 another.example.com 页面中
     document.domain = 'example.com';
     // 设置后，这两个页面就可以相互访问彼此的 DOM 和 JavaScript 对象。
     

2. 历史上的流行原因：

   • 在 SPA（单页面应用） 架构流行之前，大型网站普遍采用多子域架构（如 www.example.com, api.example.com, cdn.example.com, admin.example.com）。
   • document.domain 为这些子域之间的通信提供了一个相对简单且无需复杂配置的解决方案。
   • 相比于当时其他选项（如复杂的 postMessage 机制），它更易于实现跨 iframe 和父页面之间的交互。

3. 废弃的信号与时间线：

   • Chrome： 在 2020 年宣布计划逐步废弃。从 Chrome 106 版本开始，该 API 被标记为废弃状态，并在控制台输出明确警告：Setting document.domain is deprecated and will be removed. Please use postMessage() or Channel Messaging API instead.。
   • Firefox： 从 Firefox 91 版本开始也显示同样的废弃警告。
   • Safari： 在 Safari 15 版本中加入了废弃警告机制。
   • 结论： 三大主流浏览器厂商（Chrome, Firefox, Safari） 采取了一致行动，标志着 document.domain 的终结是不可避免的。

4. 废弃的根本原因：

   • 严重的安全风险：
     • 该 API 破坏/削弱了同源策略（Same-Origin Policy） 这个 Web 安全的核心基石。
     • 它允许网站通过设置 document.domain 来绕过某些安全限制。恶意网站可能利用此特性伪装成可信赖的域名，从而发起攻击（如窃取数据）。
   • 高昂的维护成本：
     • 浏览器厂商需要为这个特殊的 API 维护非常复杂且容易出错的逻辑，包括：
       • 域名验证机制（确保设置的值是有效的父域）。
       • 跨域权限管理。
       • 确保该 API 与其他不断演进的安全特性（如 Site Isolation）兼容。
   • 现代替代方案的成熟：
     • Web 平台已经发展并提供了一套更安全、更灵活、标准化程度更高的跨域通信解决方案：
       • postMessage API: 提供了一种安全、可控的方式在窗口/iframe 之间传递消息。
       • Channel Messaging API (如 MessageChannel): 提供直接的、双向的通信通道。
       • CORS (Cross-Origin Resource Sharing): 用于跨域 HTTP 请求（如 AJAX/Fetch），通过在服务端设置响应头（Access-Control-Allow-Origin 等）来控制哪些外部域可以访问资源。

5. 当前现状：高使用率与迁移困境：

   • 广泛使用： 根据 GitHub 代码搜索和 Stack Overflow 的统计数据，尽管已被废弃，document.domain 在现有代码库和开发者实践中仍然非常广泛地被使用（约 90%）。
   • 遗留系统的挑战： 许多企业级应用（特别是历史较久的系统）严重依赖此 API 来实现复杂的多子域交互。迁移面临的主要困难包括：
     • 历史代码庞大且耦合度高，修改成本巨大。
     • 需要深入理解和实施替代方案（如重构通信逻辑、正确配置 CORS）。
     • 可能涉及多个团队或系统的协调。

6. 迁移指南（推荐的替代方案）：

   • 使用 postMessage 替代跨窗口/iframe 通信：
     • 主页面和 iframe 使用 postMessage 发送结构化消息。
     • 双方通过监听 message 事件来接收和处理消息。
     • 提供了比 document.domain 更精细的控制和更好的安全性。
   • 使用 Channel Messaging API 进行更直接的通信： 创建 MessageChannel 来建立点对点的通信管道。
   • 优化 CORS 配置进行跨域 HTTP 请求：
     • 服务端： 必须正确设置响应头：

       Access-Control-Allow-Origin: https://trusted.example.com // 指定允许的来源
       Access-Control-Allow-Credentials: true // 允许发送凭据（如 cookies），如果需要的话
       

     • 客户端： 在发起 Fetch 请求时指定模式为 cors 并携带凭据（如果需要）：

       fetch('https://api.example.com/data', {credentials: 'include', // 发送凭据mode: 'cors'           // 使用 CORS 模式
       });
       

7. 核心结论与警示：

   • document.domain 的废弃是 Web 平台朝着更安全、更规范方向发展的必然结果和重要里程碑。
   • 虽然迁移过程对依赖此 API 的遗留系统来说可能充满挑战且成本高昂，但这是不可逆转的趋势。
   • 强烈呼吁开发者采取行动：
     • 不要等待浏览器完全移除该 API 的支持才开始行动。
     • 提前规划和实施迁移到推荐的现代替代方案（postMessage, Channel Messaging API, CORS）。
     • 这样做的目的是避免未来浏览器版本彻底移除支持时导致生产环境中的功能突然失效，从而确保应用的稳定性、安全性和未来的兼容性。

篇外友情提醒：

最后，竭诚欢迎大家使用免费的书签系统：Pocket Bookmarks。