不能直接调用插件js函数，因跨域iframe受同源策略限制；必须用postmessage并严格校验origin和message.type，通过nonce双向握手确认身份，且仅传可结构化克隆的数据。
为什么不能直接调用插件的 JS 函数
第三方插件通常运行在独立 <iframe></iframe> 中，且源（origin）与主编辑器不同。浏览器会直接阻止 iframe.contentWindow.pluginMethod() 这类调用，抛出 SecurityError: Blocked a frame with origin "https://editor.com" from accessing a cross-origin frame.。这不是 bug，是同源策略强制行为——别试图绕过，该用 postMessage 就用。
握手阶段必须校验 event.origin 和 message.type
“握手”本质是双向身份确认：编辑器要确认收到的是可信插件发来的消息，插件也要确认指令来自合法编辑器。只监听 message 事件远远不够。
- 接收方必须检查
event.origin是否在白名单里，比如if (event.origin !== 'https://plugin.example.com') return;，禁止用'*' - 消息体必须带明确类型标识，例如
{ type: 'handshake:request', version: '1.2' }，避免把普通日志误当握手信号 - 插件首次发消息前，应等待编辑器先发
{ type: 'editor:ready' }，否则可能因编辑器未就绪而丢消息
如何设计可验证的握手协议
握手不是一次 postMessage 就完事，而是两轮异步确认，确保双方状态同步。关键点在于：不依赖时序假设，用随机 nonce 防重放，用 type 字段做路由。
- 编辑器向插件发送：
iframe.contentWindow.postMessage({ type: 'handshake:challenge', nonce: 'abc123' }, 'https://plugin.example.com') - 插件验证 origin 后，回传：
window.parent.postMessage({ type: 'handshake:response', nonce: 'abc123', pluginId: 'math-editor-v2' }, 'https://editor.com') - 编辑器比对
nonce并记录pluginId，后续所有通信都带上该 ID 做上下文隔离 - 若超时（如 3s）未收到响应，视为插件加载失败，不启用其功能
容易被忽略的边界：结构化克隆失败和 iframe 加载时机
常见错误是把函数、DOM 节点或 Date 对象塞进握手消息——它们无法被结构化克隆，会静默变成 {} 或 null，导致握手字段丢失。
- 只传原始类型、plain object、
Array、ArrayBuffer；避免Map、Set、RegExp（虽部分浏览器支持，但兼容性差） - 不要在
iframe的src设置后立刻发消息，需监听iframe.onload或iframe.contentWindow.addEventListener('load', ...)，否则contentWindow可能为null - 若插件页面启用了
COOP: restrict-properties，postMessage可能被拦截，需检查控制台是否报Blocked by Cross-Origin-Opener-Policy
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
