第三题 · 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 都是独立客户端,内部会展示自己的控制台日志。
iframe2
点击内部按钮,请求主页面中转调用 iframe3。
iframe3
接收来自 iframe2 的中转消息并回执。
主页面桥接日志
显示主页面的发送、转发、安全校验与回执情况。