跨域策略导致无法读取iframe响应，请求技术解决方案

这个问题我之前帮不少开发者处理过，本质上是浏览器的同源安全机制在起作用！你遇到的Failed to read the 'contentDocument' property错误，核心原因是浏览器的同源策略（Same-Origin Policy）：因为App A和App B是独立部署的，只要它们的协议、域名、端口三者有任意一个不一样，就属于不同源，浏览器会严格限制不同源页面之间的脚本交互，禁止App A直接访问App B iframe的contentDocument或contentWindow对象，这是浏览器的安全保护机制。

下面给你几个可行的解决方案，按推荐程度排序：

方案一：让两个应用同源（最简单直接） #

如果业务允许的话，把App A和App B部署到同一个源下——比如用同一个域名的不同路径（https://your-domain.com/app-a和https://your-domain.com/app-b），或者配置同主域名的子域名（通过document.domain统一主域名，仅适用于同主域的子域名场景）。同源之后，你原来的代码直接就能读取contentDocument了，不需要额外改动。

方案二：用PostMessage实现跨域通信（最通用的跨域方案） #

如果没法让两个应用同源，PostMessage是标准且可靠的跨域通信方案，步骤很清晰：

1. 在App B的页面（iframe内）发送消息 #

当App B完成表单提交操作后，通过window.parent.postMessage把响应数据发送给父页面（App A）：

// App B的代码，操作完成后执行
const responseData = {
  status: 'success',
  message: '文件上传完成',
  data: { /* 你的具体响应数据 */ }
};
// 第二个参数指定目标源，尽量写App A的具体域名，不要用*，更安全
window.parent.postMessage(responseData, 'https://app-a-domain.com');

2. 在App A的页面监听消息 #

在App A的主页面中，监听message事件，接收App B发来的消息，同时必须验证消息来源的合法性，防止恶意网站发送伪造消息：

// App A的代码，页面加载时初始化监听
window.addEventListener('message', (event) => {
  // 只处理信任的App B域名发来的消息
  if (event.origin !== 'https://app-b-domain.com') {
    return; // 非信任源，直接忽略
  }
  // 处理收到的响应数据
  const response = event.data;
  console.log('收到App B的响应:', response);
  // 这里可以执行你原本想做的逻辑，比如更新页面状态、提示用户等
});

关键注意事项 #

• 一定要指定postMessage的目标源（第二个参数），避免数据泄露给恶意网站；
• 监听message事件时必须校验event.origin，只处理信任源的消息，防止XSS攻击。

方案三：跳转同源中转页面（适合特定场景） #

如果App B的表单提交完成后会返回一个结果页面，也可以让这个结果页面跳转到一个和App A同源的中转页面，然后通过localStorage存储数据，或者直接调用父页面的方法（因为同源了）把数据传给App A。不过这个方法灵活性不如PostMessage，仅适合简单的结果传递场景。

内容的提问来源于stack exchange，提问作者Hulk Man