父页 → 子页 {action:"sync"}
子页 → 父页 origin="null" ✓ 已校验
PostMessage 跨域调试器
右侧是一个 sandbox iframe 沙箱子页面，左侧代表父页面：填好消息类型与 JSON payload 即可双向收发演示，日志控制台逐条记录方向、targetOrigin、event.origin 与数据内容，实时校验 JSON 合法性并提示 targetOrigin="*" 的安全风险。全程本地运行，不依赖外部域名。
父页 PARENT发送消息到子页
payload 必须是合法 JSON（结构化数据是最佳实践，避免传字符串再 eval）。
⚠ 注意：targetOrigin 填字符串 "null" 会直接抛 Invalid target origin —— 它只能是合法 URL 或 *。本演示选 * 是沙箱必需；生产环境携带 token / 用户数据时严禁星号广播，必须写精确 origin。
子页 IFRAMEsandbox="allow-scripts"
子页面运行在不透明源（origin=null）：它收消息后会校验来源并自动回执；也可手动回复父页。
日志消息收发控制台
扩展场景预设 · 分步时间轴 · 字段解释
点选场景会自动填入上方 type、payload 与 targetOrigin；下方时间轴按消息投递顺序分步演示，序列图逐帧高亮。时间轴为概念演示，实际收发请用上方「发送 → 子页」。
分步时间轴 0 / 4
序列图 · 自绘 SVG
实线箭头为已投递消息，虚线为尚未发生的步骤；箭头方向即 data 流向。
MessageEvent 字段解释
| 字段 | 含义 | 安全用法 |
|---|---|---|
event.data | 发送方传入的第一个参数，经结构化克隆的副本；函数、DOM 节点会抛 DataCloneError | 只传可序列化数据，收到后按约定 schema 校验 |
event.origin | 发送方源（scheme + host + port）；sandbox 未开 allow-same-origin 时是字符串 "null" | 与白名单精确比对，不要用 includes 模糊匹配 |
event.source | 发送方 window 的引用，可用于区分具体是哪个 iframe | 与记录的 contentWindow 比对，双重校验来源 |
event.ports | 随消息转移的 MessagePort 数组，可建立独立双向通道 | 用完及时 close，避免长期占用 |
event.type | 监听的事件名，message 事件固定为 "message" | 同窗口多业务时在 data 里加 type 字段区分 |
targetOrigin | 发送方参数，限定接收方 origin；"*" 表示不限接收方 | 携带 token/用户数据时必须写精确 origin |
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！