React在iframe单次调用postMessage，AngularJS父页为何收到多条消息

在你已确认无重复自定义监听器、配置once: true未生效、React侧业务代码仅单次调用postMessage的前提下，这类“单次发送却收到N条不固定数量消息”的问题，高频诱因集中在以下几个场景：

• 全局message转发逻辑形成消息闭环
  不少适配多iframe嵌套的旧AngularJS项目，会内置一套无差别的message广播逻辑：只要window收到任意message事件，就会把收到的内容通过postMessage转发给所有关联的子iframe、甚至回传父窗口。当你在React iframe内发一次消息，父页面的这套通用逻辑会把收到的消息再向外转发一圈，链路就会形成「React发消息→Angular父页面接收→Angular广播回所有关联窗口→如果有其他窗口的转发逻辑就再回传一次」的循环。因为整个循环依赖浏览器事件队列的调度时序，最终触发的消息数量不会是固定值，通常在10条上下浮动。
  这类问题你之前的排查很容易漏：你只核对了自己写的receiveReactMessage没有重复注册，没排查全局通用转发逻辑的链路；哪怕你给自己的监听器加了once: true，如果AngularJS的作用域每次$digest循环都重新注册一次监听器，once的配置也会在每轮重注册时被覆盖，根本起不到单次触发就移除的作用。
• React组件层的合成事件重复触发postMessage
  不要只看execute方法内部仅单次调用sendMessage，要往上追溯触发源：不少旧版React组件库（比如早期Antd、自定义多选组件）的onChange回调，在一次用户选中操作里会触发多次——依次触发清空值、写入新选中值、同步表单状态这几轮回调，每轮回调都会单独执行一遍execute→sendMessage流程。你直观上觉得只操作了一次，实际上组件已经悄悄触发了3-4次postMessage，叠加刚才说的全局转发逻辑，累计下来很容易达到10条左右的消息量。
• 无消息边界校验导致杂散消息被误判
  你现在的监听器没有做任何来源校验：既不判断event.source是不是挂载React组件的那个iframe的contentWindow，也不判断event.data.type是不是自己业务定义的EXECUTE类型，只要window上抛出message事件就触发业务逻辑。这种情况下，浏览器插件注入的自定义message、页面内其他第三方组件派发的message、全局转发回来的循环message，都会被当成正常业务消息处理，最终导致接收数量不固定。

• 在Angular侧receiveReactMessage的入口打印所有收到消息的event.origin、event.source、event.data字段，筛选出到底哪些是真正来自React iframe的业务消息，哪些是杂散的第三方/循环回传消息
• 在React侧sendMessage的实现里打日志，记录单次用户操作下实际调用了几次postMessage，排除组件层的重复触发
• 临时注释掉页面全局所有其他message监听逻辑，只保留自己的自定义监听器，再发送一次消息验证是否还存在重复接收的问题

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