能否在iframe内重定向至新源？跨域postMessage报错问题咨询

当然可行，但你遇到的错误是浏览器同源策略的正常安全限制——你最初给postMessage指定的目标源是https://foo.com，但重定向完成后，iframe的实际 origin 已经变成了https://bar.com，两者不匹配就触发了错误。下面是具体的解决方案：

方案1：动态匹配iframe的当前Origin #

不要硬编码目标源，而是在发送消息前获取iframe的实际当前origin，确保和接收窗口的origin一致。注意要等iframe完成重定向后再发送消息：

const myIframe = document.querySelector('iframe');

// 监听iframe的load事件，确保重定向完成
myIframe.addEventListener('load', () => {
  // 只在目标是bar.com时发送（可选，但更安全）
  if (myIframe.contentWindow.origin === 'https://bar.com') {
    myIframe.contentWindow.postMessage('你的消息内容', myIframe.contentWindow.origin);
  }
});

这里的load事件会触发两次：第一次是foo.com加载，第二次是重定向到bar.com加载，加个origin判断可以避免无效的消息发送。

方案2：让目标页面主动发起通信（更安全推荐） #

如果你能控制https://bar.com的代码，最好让bar.com页面加载完成后主动向父页面发送消息，父页面只需要监听并验证来源即可，这样完全规避目标源不匹配的问题：

父页面代码： #

window.addEventListener('message', (event) => {
  // 严格验证消息来源，只处理bar.com的消息
  if (event.origin !== 'https://bar.com') return;
  
  console.log('收到bar.com的消息:', event.data);
  // 可选：回复消息给bar.com
  event.source.postMessage('已收到消息', event.origin);
});

bar.com页面代码： #

window.addEventListener('DOMContentLoaded', () => {
  // 指定父页面的origin，确保安全
  window.parent.postMessage('我已完成加载并准备好通信', 'https://你的父页面域名');
});

方案3：临时使用通配符（仅测试环境） #

如果你只是在测试环境快速验证功能，可以用'*'作为目标源，但生产环境绝对不要这么做——这会让你的页面暴露给任意域名的恶意消息：

myIframe.contentWindow.postMessage('测试消息', '*');

总结一下：iframe内重定向完全可行，核心是让postMessage的目标源与iframe当前的实际origin匹配，或者采用目标页面主动发起通信的模式，同时始终遵循同源策略的安全要求。

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