JavaScript操作iframe的核心是同域直接DOM访问、跨域必须用postMessage通信；安全关键在于origin校验、数据最小化解析及服务端二次鉴权。
JavaScript 操作 iframe 的核心在于明确控制权归属：同域下可直接访问 DOM；跨域时必须绕过浏览器同源策略，使用 postMessage 进行受控通
信。安全的关键不是“绕过”，而是“约定 + 验证”。
同域 iframe：直接操作 DOM
当父页面与 iframe 页面同源（协议、域名、端口完全一致）时，可通过 iframe 元素的 contentWindow 或 contentDocument 直接读写内容。
- 获取 iframe 文档对象：
iframeEl.contentDocument或iframeEl.contentWindow.document - 执行脚本：
iframeEl.contentWindow.eval("alert('hello')")（不推荐，优先用函数调用） - 监听 iframe 加载完成：
iframeEl.onload = () => { /* 可安全操作 */ }; - 注意：需确保 iframe 已加载完毕再访问，否则
contentDocument为null
跨域 iframe：必须用 postMessage
跨域时浏览器禁止直接访问 iframe 的 window 或 document。唯一标准、安全的通信方式是 window.postMessage()，它允许不同源窗口间发送结构化消息，并要求显式指定目标源。
- 发送方（如父页）：
iframeEl.contentWindow.postMessage(data, "https://example.com") - 接收方（如 iframe 内脚本）需监听
message事件：window.addEventListener("message", handler) -
必须验证
event.origin，拒绝非预期来源的消息：if (event.origin !== "https://example.com") return; - 建议同时校验
event.source（如需回传），避免被其他窗口冒充
双向通信与响应机制
postMessage 本身是单向的，但可通过携带唯一 ID、回调标识或使用 event.source.postMessage() 实现请求-响应模式。
- 父页发消息时附带
id: Date.now() + Math.random() - iframe 收到后处理，再用
event.source.postMessage({ id, result }, event.origin)回传 - 父页用 Map 缓存待响应的 Promise，通过 id 匹配 resolve/reject
- 避免在 message 处理器中直接调用不可信的函数名（如
event.data.fn），应查白名单
安全实践要点
即使用了 postMessage，疏忽仍会导致 XSS、CSRF 或信息泄露。
-
永远不要省略 origin 校验 —— 使用通配符
"*"等同于放弃安全边界 - 对收到的数据做最小化解析：仅取所需字段，不
eval、不innerHTML插入未转义内容 - 敏感操作（如支付、删除）必须服务端二次鉴权，前端通信仅作触发信号
- iframe 的
sandbox属性可进一步限制能力（如禁用脚本、表单提交）：
