Vue组件中调用iframe.contentWindow.postMessage无效问题排查

一、sendResponse2无效的核心原因 #

sendResponse2无法发送消息，是因为你依赖iframe的初始src计算targetOrigin，但如果iframe内部发生了重定向（比如跳转到同域下的其他页面、或协议/子域变更），此时iframe的实际origin会和初始src的origin不一致，浏览器会因targetOrigin不匹配而拦截postMessage请求。

而sendResponse1能正常工作，是因为它直接使用了消息事件里的event.origin（iframe发送消息时的实时origin）和event.source（iframe的contentWindow实例），这两个值是准确且符合浏览器安全要求的。

二、修复方案 #

我们需要保存iframe的实时contentWindow和origin，而非依赖初始src的静态计算值。以下是修改后的完整代码：

<template>
  <div ref="elm" />
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps<{
  src: string;
}>();

const elm = ref<HTMLElement | null>(null);
const box = ref<HTMLElement | null>(null);
const iframe = ref<HTMLIFrameElement | null>(null);
// 新增：存储iframe的实时窗口对象和源
const iframeContentWindow = ref<Window | null>(null);
const iframeOrigin = ref<string | null>(null);

onMounted(() => {
  if (!elm.value) {
    return;
  }

  box.value = document.createElement('div');

  iframe.value = document.createElement('iframe');
  iframe.value.src = props.src;

  box.value.appendChild(iframe.value);
  elm.value.appendChild(box.value);

  window.addEventListener('message', messageHandler, { passive: true });
});

onBeforeUnmount(() => {
  // 直接调用通用方法发送卸载前消息
  sendResponse({ message: 'Component will unmount' });
  
  iframe?.value?.remove?.();
  box?.value?.remove?.();
  window.removeEventListener('message', messageHandler);
});

function messageHandler(event: MessageEvent) {
  if (!iframe.value) return;
  
  // 验证消息来源合法性
  const expectedBaseOrigin = new URL(props.src).origin;
  if (event.origin !== expectedBaseOrigin) return;
  
  // 更新iframe的实时窗口对象和源
  iframeContentWindow.value = event.source as Window;
  iframeOrigin.value = event.origin;

  // 发送响应消息
  sendResponse({ message: 'Received your message' });
}

// 重构后的通用消息发送方法
function sendResponse(message: any) {
  if (iframeContentWindow.value && iframeOrigin.value) {
    iframeContentWindow.value.postMessage(message, iframeOrigin.value);
  }
}
</script>

<style scoped>
/* 保留原有样式 */
</style>

三、关键修改说明 #

1. 新增iframeContentWindow和iframeOrigin变量，专门存储iframe的实时窗口实例和源，避免依赖初始src的静态计算值
2. 在messageHandler中，每次收到合法消息时更新这两个变量，确保后续发送消息时使用的是最新、有效的值
3. 重构sendResponse通用方法，统一使用保存的变量发送消息，不管是在messageHandler还是onBeforeUnmount中都能正常调用
4. onBeforeUnmount中无需依赖event参数，直接调用sendResponse即可发送消息

额外注意事项 #

• 如果组件卸载前从未收到过iframe的消息，此时无法获取有效的origin和contentWindow，这种情况下浏览器会拦截postMessage请求（安全机制限制），属于正常现象
• 始终要验证消息的origin，避免接收恶意网站的消息，防止XSS攻击

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