为何iframe postMessage返回NOT ALLOWED（405错误）？

问题背景 #

需要实现外观层（Facade）完成父页面与iframe子页面的双向交互，已配置CORS并指定postMessage目标URL，但点击iframe内的提交按钮时出现NOT ALLOWED（405错误）。

错误根源分析 #

405是HTTP方法不允许错误，并非postMessage跨域限制导致：iframe内的表单使用POST方法提交到当前路径（action=""），但Docker上的模拟服务器未配置对应路径的POST请求处理逻辑，从而触发405错误。同时postMessage的部分逻辑也存在可优化点。

具体修复步骤 #

1. 阻止表单默认提交行为 #

修改iframe的JS代码，阻止表单提交时的页面刷新和POST请求，避免触发405错误：

// iframe的JS部分修改
window.addEventListener('message', (event) => {
  console.log('Message received from parent:', event.data);
  if (event.data.type === 'GREETING') {
    alert(event.data.payload);
  }
});

// 获取表单元素，阻止默认提交行为
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止表单默认POST提交
  // 收集表单数据
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  
  // 向父页面发送表单数据
  window.parent.postMessage({
    type: 'FORM_SUBMIT',
    payload: data
  }, "http://localhost:57967");
});

2. 修正postMessage的目标源与数据格式 #

• 父页面发送消息时，避免使用*作为目标源，明确指定iframe的源http://localhost:81，提升安全性：

// 父页面sendMessageToIframe函数修改
function sendMessageToIframe(message) {
  let iframe = document.getElementById('iframe');
  if (iframe && iframe.contentWindow) {
    iframe.contentWindow.postMessage(message, 'http://localhost:81'); // 明确指定源
  } else {
    console.error("Iframe not available");
  }
}

• iframe发送消息时，无需将数据转为JSON字符串，直接传递对象即可（postMessage支持结构化克隆算法）：

// iframe发送消息部分修改
window.parent.postMessage({
  type: 'FORM_SUBMIT',
  payload: data
}, "http://localhost:57967");

3. 统一父页面的消息监听逻辑 #

父页面存在两处message监听，合并为一处并完善校验逻辑：

// 父页面的消息监听合并修改
window.addEventListener('message', (event) => {
  // 校验消息来源是否为目标iframe
  const iframe = document.getElementById('iframe');
  if (event.source !== iframe.contentWindow) return;
  // 校验消息源的origin
  if (event.origin !== 'http://localhost:81') return;
  
  console.log('Received message from iframe:', event.data);
  // 根据消息类型处理不同逻辑
  if (event.data.type === 'FORM_SUBMIT') {
    console.log('Form data:', event.data.payload);
    // 这里添加表单数据的后续处理逻辑
  }
}, false);

4. 确认iframe服务器的基础配置 #

确保Docker上的模拟服务器：

• 允许静态文件访问（如果是纯静态页面，需确保服务器支持GET请求访问HTML文件）
• 若需要处理POST请求，需配置对应端点的POST路由（如果不需要，仅阻止表单默认提交即可）

额外注意事项 #

• 始终在postMessage中指定明确的目标源，避免使用*，防止安全风险
• 消息监听时必须校验event.origin和event.source，避免接收恶意消息
• 父页面的iframe元素需添加id="iframe"，确保JS能正确获取到元素：

<!-- 父页面的iframe标签修改 -->
<iframe id="iframe" style="width: 100%;height:100%" src="http://localhost:81"></iframe>

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