第三题 · iframe 通信桥

主页面 / iframe / iframe 之间的加密通信演示

这个页面用单文件 HTML 演示一个可运行的 iframe 通信桥方案:主页面与 iframe 双向通信, iframe 之间通过主页面中转通信,消息体在传输过程中使用 Base64 编码,主页面仅允许已注册的 iframe 源窗口参与通信。 下方直接提供两个测试场景,对应题目中的两条验证要求。

方案要点

用 `postMessage` 做跨窗口通信,主页面做桥接与安全校验,消息体统一编码后再传递。

  • 主页面维护 iframe 注册表,只接受已注册 source window 的消息。
  • 消息体统一通过 Base64 编码,接收端再解码。
  • 主页面既能主动调用 iframe,也能作为 iframe 间通信中转站。
  • 支持请求 / 响应模型,iframe2 可获知 iframe3 是否执行成功。
postMessage Base64 Host Relay Source 校验

三个 SaaS iframe

每个 iframe 都是独立客户端,内部会展示自己的控制台日志。

iframe1

接收主页面调用并回执。

iframe2

点击内部按钮,请求主页面中转调用 iframe3。

iframe3

接收来自 iframe2 的中转消息并回执。

主页面桥接日志

显示主页面的发送、转发、安全校验与回执情况。