浏览器实现跨系统交互
浏览器实现跨系统交互
浏览器中通过 iframe 嵌入另一个系统，并实现跨系统消息交互的详细系统讲解，包括原理、安全机制、实现流程、使用场景以及常见问题的全面说明
感兴趣的可以关注一下，会不定期分享一些实用笔记https://mp.weixin.qq.com/s/d12PcS16VUeXfylvUlkD1g
🧠 一、系统整体结构与原理
💡 1.1 基本结构
假设系统 A 通过iframe标签嵌入系统 B
<!-- 系统 A 页面 -->
<iframe src="https://system-b.com/page.html" id="myFrame"></iframe>
此时浏览器中就有两个独立的页面：
- 外部父页面：系统 A
- 内嵌子页面：系统 B
这两个页面通常是**不同源（跨域）**的，浏览器会强制阻止它们直接互访 DOM 或脚本资源。
🔒 1.2 浏览器同源策略（SOP）
同源策略（Same-Origin Policy）限制：
- 如果两个页面协议、主机名、端口号任一不同，就被认为是不同源
- 不同源的 iframe 无法直接访问 document、window、cookie 等对象
⛔ 错误示例（会报错）
let iframe = document.getElementById("myFrame");
let doc = iframe.contentWindow.document; // ❌ 跨域会报错
📬 1.3 安全通信机制：window.postMessage
HTML5 引入了 window.postMessage()，允许跨源通信：
- 不需要同源
- 可用于 window、iframe、popup、worker 等之间通信
🛠️ 二、通信实现流程
✅ 2.1 iframe 向父页面发送数据
// system-b.com/page.html
window.parent.postMessage({type: "formSubmit",data: { name: "Alice", age: 30 }},"https://system-a.com" // 安全校验目标
);
✅ 2.2 父页面接收消息
// system-a.com/index.html
window.addEventListener("message", (event) => {// 校验来源（安全性）if (event.origin !== "https://system-b.com") return;// 处理消息const msg = event.data;if (msg.type === "formSubmit") {console.log("收到表单数据：", msg.data);}
});
🔐 三、安全机制详解
🔎 3.1 校验 event.origin
绝对不能省略，否则容易被其他恶意网站注入数据
if (event.origin !== "https://trusted.com") return;
🧱 3.2 指定 targetOrigin
当调用 postMessage 时，第二个参数一定不要写成 ‘*’，应指明目标源
window.parent.postMessage(data, "https://trusted-parent.com");
🔐 3.3 不直接执行任何收到的数据
避免 XSS 攻击，收到的数据不要拼接进 HTML 或使用 eval() 执行
🧩 四、典型应用场景
| 应用场景 | 示例 |
|---|---|
| 第三方支付组件嵌入 | 微信/支付宝嵌入支付页面，通过 iframe 回传支付结果 |
| 登录认证 | 子系统嵌入父系统并通过 postMessage 回传 token |
| 微前端架构通信 | 主应用与子应用之间传递状态、事件、消息 |
| 可视化平台组件传值 | 父系统向嵌入的地图组件传递筛选参数等 |
🧪 五、常见问题与解决方案
❓ 5.1 子页面 ready 但父页面未监听
确保父页面在 iframe 加载前就监听：
window.addEventListener("message", onMessage, false);
❓ 5.2 想等待子页面返回消息
可以封装为 Promise：
function waitForIframeMessage() {return new Promise((resolve) => {const listener = (event) => {if (event.origin !== "https://system-b.com") return;resolve(event.data);window.removeEventListener("message", listener);};window.addEventListener("message", listener);});
}// 使用
waitForIframeMessage().then((data) => {console.log("收到子页面消息：", data);
});
📌 六、总结对比
| 技术 | 是否支持跨域 | 优点 | 缺点 |
|---|---|---|---|
window.postMessage | ✅ 是 | 安全、灵活、被广泛支持 | 需要双端配合 |
iframe.contentWindow.document | ❌ 否 | 简单 | 跨域受限 |
window.name + 重定向 | ✅ 是 | 旧方案，少见 | 复杂、支持差 |
BroadcastChannel | 部分跨域 | 多窗口广播消息 | 跨域支持有限 |
🧱 七、实例Demo（单项通信）
7.1✅ 演示目标
- 父页面嵌入 iframe
- 子页面向父页面发送数据
- 父页面接收并处理数据
7.2 📁 项目结构（两个 HTML 文件）
/demo
├── parent.html // 系统 A
└── child.html // 系统 B
7.3 🧩 parent.html（系统 A：父页面）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>父页面 (System A)</title>
</head>
<body><h2>父页面 (System A)</h2><iframe id="childFrame" src="child.html" width="600" height="300"></iframe><p>收到的消息：<span id="msgDisplay">（等待中...）</span></p><script>// 监听来自 iframe 的消息window.addEventListener("message", function(event) {// 校验来源（本地 demo 用 *，实际项目请写明域名）if (event.origin !== window.origin && event.origin !== "null") {console.warn("不可信来源：", event.origin);return;}console.log("父页面收到消息：", event.data);document.getElementById("msgDisplay").innerText = JSON.stringify(event.data);});</script>
</body>
</html>
7.4 🧩 child.html（系统 B：iframe 子页面）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>子页面 (System B)</title>
</head>
<body><h2>子页面 (System B)</h2><button onclick="sendMessage()">向父页面发送消息</button><script>function sendMessage() {const message = {type: "greeting",data: { text: "你好，父页面！", time: new Date().toISOString() }};// 向父页面发送消息window.parent.postMessage(message, "*"); // 实际部署请替换 * 为具体域名}</script>
</body>
</html>
7.5 ✅ 效果说明
- 打开 parent.html 页面，自动加载 child.html。
- 点击子页面按钮后，子页面向父页面发送消息。
- 父页面成功接收到并展示消息内容。
🧱 八、实例Demo（双向通信）
8.1 🎯 新目标：父页面 ⇄ 子页面 双向通信
我们将实现以下功能：
| 操作方 | 行为 |
|---|---|
| ✅ 子页面 | 向父页面发送消息（按钮点击） |
| ✅ 父页面 | 接收子页面消息并展示 |
| ✅ 父页面 | 向子页面主动发送消息（按钮点击） |
| ✅ 子页面 | 接收父页面消息并在页面中展示 |
8.2 📁 文件结构（不变）
/demo
├── parent.html // 系统 A
└── child.html // 系统 B
8.3 🧩parent.html（双向通信实现）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>父页面 (System A)</title>
</head>
<body><h2>父页面 (System A)</h2><iframe id="childFrame" src="child.html" width="600" height="300"></iframe><p>收到来自子页面的消息：<span id="msgDisplay">（等待中...）</span></p><button onclick="sendToChild()">向子页面发送消息</button><script>const childFrame = document.getElementById("childFrame");// 监听来自 iframe 的消息window.addEventListener("message", function(event) {if (event.origin !== window.origin && event.origin !== "null") {console.warn("非法来源：", event.origin);return;}console.log("✅ 父页面收到消息：", event.data);document.getElementById("msgDisplay").innerText = JSON.stringify(event.data);});// 向子页面发送消息function sendToChild() {const message = {type: "parentToChild",data: { text: "你好，子页面！我是父页面。" }};childFrame.contentWindow.postMessage(message, "*"); // 实际部署时指定 origin}</script>
</body>
</html>
8.4 🧩child.html（接收父页面消息 + 回发）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>子页面 (System B)</title>
</head>
<body><h2>子页面 (System B)</h2><button onclick="sendToParent()">向父页面发送消息</button><p>收到来自父页面的消息：<span id="msgFromParent">（等待中...）</span></p><script>// 发送消息给父页面function sendToParent() {const message = {type: "childToParent",data: { text: "你好，父页面！我是子页面。" }};window.parent.postMessage(message, "*");}// 监听父页面的消息window.addEventListener("message", function(event) {if (event.origin !== window.origin && event.origin !== "null") {console.warn("非法来源：", event.origin);return;}console.log("✅ 子页面收到消息：", event.data);document.getElementById("msgFromParent").innerText = JSON.stringify(event.data);});</script>
</body>
</html>
8.5 ✅ 效果验证
- 1、打开 parent.html
- 2、点击「向子页面发送消息」按钮
- 子页面展示“你好，子页面！我是父页面。”
- 3、点击子页面中的按钮
- 4、父页面展示“你好，父页面！我是子页面。”