Window 对象 · iframe 消息通道

iframe 与 postMessage 安全通信

父页面会把消息发给右侧的 iframe，iframe 会先检查“发件人的 origin”，再决定是否回信。下面的 origin 字符串是教学用的本地模拟；真实网页要使用浏览器提供的 event.origin。

本地模拟说明：这个文件直接打开时，srcdoc iframe 的真实 event.origin 通常是 null，所以演示区会另外显示“模拟 origin”。

父页面控制台

模拟父页面：https://course.example

模拟发送时的 targetOrigin

写明确目标 模拟 https://safe-frame.example，真实项目推荐这样指定。偷懒写 * 消息能发出，但如果 iframe 被导航到别处，敏感数据可能交错对象。

当前待发送消息

模拟发件人：尚未发送

模拟目标：https://safe-frame.example

真实传递备注：本地 srcdoc 为了能通信，代码实际使用 postMessage(data, "*")，这不是生产写法。

模拟子窗口：https://safe-frame.example

观察检查顺序：先看来源，再看数据，再决定是否回应。

等待发送消息。先选择 targetOrigin 模式，再点击“可信 origin”或“陌生 origin”。