在Web开发的世界里，变化是常态。但有时候，一些我们习以为常的API会在不经意间被标记为"废弃"，甚至在某些浏览器中被完全移除。今天我们要聊的，就是一个被广泛使用却已经走向末路的JavaScript API——document.domain。

什么是document.domain？

document.domain 是一个看似简单却功能强大的属性，它允许开发者修改当前文档的域名。这个API最初的设计目的是为了解决跨子域通信的问题。

// 在 sub.example.com 页面中
document.domain = 'example.com';

// 在 another.example.com 页面中
document.domain = 'example.com';

// 现在两个页面可以相互访问

为什么它如此受欢迎？

在Single Page Application（SPA）兴起之前，许多大型网站都采用多子域架构：

www.example.com - 主站
api.example.com - API服务
cdn.example.com - 静态资源
admin.example.com - 管理后台

document.domain 为这些子域之间的通信提供了一个简单的解决方案。无需复杂的postMessage机制，只需要设置相同的domain值，iframe和父页面就能愉快地交互了。

废弃的信号

Chrome的动作

早在2020年，Chrome团队就在其博客中宣布了计划逐步废弃document.domain。Chrome 106版本开始，这个API被标记为废弃状态，并在控制台中显示警告信息：

Setting document.domain is deprecated and will be removed. 
Please use postMessage() or Channel Messaging API instead.

Firefox和Safari的跟进

Firefox在版本91中也开始显示废弃警告，而Safari则在版本15中加入了相同的警告机制。三大浏览器厂商的一致行动，标志着这个API的末日即将到来。

为什么要废弃它？

安全风险

document.domain 的存在破坏了同源策略的完整性。恶意网站可能通过设置document.domain来绕过某些安全限制：

// 潜在的安全漏洞
if (document.domain === 'trusted.com') {
    // 攻击者可能通过设置document.domain来通过这个检查
    performSensitiveOperation();
}

维护成本

浏览器厂商需要为这个特殊的API维护复杂的逻辑，包括：

域名验证机制
跨域权限管理
与其他安全特性的兼容性

现代替代方案的成熟

现代Web平台提供了更安全、更灵活的跨域通信方案：

postMessage API
Channel Messaging API
CORS（跨域资源共享）

90%开发者仍在使用的现状

根据GitHub代码搜索和Stack Overflow的统计数据，document.domain 的使用仍然非常广泛：

遗留系统的困境

许多企业级应用仍然依赖这个API：

// 典型的遗留代码模式
function initCrossDomainCommunication() {
    try {
        document.domain = getBaseDomain(window.location.hostname);
        // 初始化跨域iframe通信
        setupIframeHandlers();
    } catch (e) {
        console.error('Failed to set document.domain:', e);
    }
}

迁移指南

使用postMessage替代

// 旧方式
document.domain = 'example.com';
parent.someFunction();

// 新方式
parent.postMessage({
    action: 'someFunction',
    data: someData
}, 'https://example.com');

// 接收消息
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://trusted.example.com') return;

    if (event.data.action === 'someFunction') {
        handleSomeFunction(event.data.data);
    }
});

使用Channel Messaging API

// 创建MessageChannel
const channel = new MessageChannel();

// 发送port2给iframe
iframe.postMessage('init', '*', [channel.port2]);

// 使用port1进行通信
channel.port1.onmessage = function(event) {
    console.log('Received:', event.data);
};

channel.port1.postMessage('Hello from parent');

CORS配置优化

对于API调用，正确配置CORS头：

// 服务端设置
Access-Control-Allow-Origin: https://trusted.example.com
Access-Control-Allow-Credentials: true

// 客户端请求
fetch('https://api.example.com/data', {
    credentials: 'include',
    mode: 'cors'
});

document.domain 的废弃标志着Web平台向更安全、更规范方向的演进。虽然迁移过程可能面临挑战，但这是必然趋势。

不要等到浏览器完全移除支持才开始行动，与其在生产环境中遭遇突然的功能失效，不如提前做好准备，确保应用的稳定性和未来兼容性。

醋醋百科网

Good Luck To You!

浏览器悄悄废弃了这个JavaScript API，90%开发者还在用