iframe.src加载跨域登录页可触发后端认证（如写cookie、建session），但因同源策略限制，前端无法读取内容或响应状态；仅适用于无需反馈的“副作用驱动”场景，如传递预签名token由目标域自主完成登录。
iframe.src 加载跨域登录页会触发认证，但不返回结果
直接给 iframe.src 赋一个跨域的登录地址（比如 "https://app2.com/login?token=xxx"），浏览器会发起请求并执行后端逻辑（如写 cookie、创建 session），但前端无法读取 iframe 内容或响应状态——这是同源策略的硬性限制。常见错误是试图用 iframe.contentDocument 或 iframe.onload 拿返回数据，结果一律报错或为空。
这种方案只适用于「副作用驱动」场景：你不需要反馈，只要确保目标域收到了凭证并完成了本地登录动作即可。典型用法是向目标系统发送预签名 token 或 session_id，由它自己完成后续会话建立。
- 必须确保目标域名后端能接收并处理该 URL 参数（如
/login?session_id=abc123） - URL 中敏感参数（如密码）需避免明文传输，建议用短期有效的 token 替代
- IE 下需用
attachEvent("onload", ...)，现代浏览器用onload即可 - iframe 创建后应插入 DOM（如
document.body.appendChild(iframe)），否则部分浏览器不触发加载
postMessage 配合子域 localstorage.html 是主流可控方案
当你要把同一个 token 同步写入多个不同域名的 localStorage，且需要确认写入成功，就得靠 postMessage + 专用中转页。核心是每个目标域下都部署一个同名的 localstorage.html（内容极简，只监听 message 并存 token）。
主站登录成功后，动态创建多个 iframe，分别指向 https://app1.com/localstorage.html、https://app2.com/localstorage.html 等，再用 iframe.contentWindow.postMessage(token, "https://app1.com") 发送。
-
localstorage.html必须存在且可访问，否则 iframe 加载失败，postMessage无处投递 - 目标页的
window.addEventListener("message", ...)必须在页面加载完成前就注册，推荐放在<script></script>标签最顶部 - 发送方要加
setTimeout延迟（如 400–1000ms），确保 iframe 完成初始化再发消息 - 目标页收到后应校验
event.origin，只接受白名单域名（如if (event.origin !== "https://main-app.com") return）
二级域名可用 document.domain + 共享 cookie，但主域名不行
如果所有系统都在同一主域下（如 app1.example.com、app2.example.com），最简单的方式是登录时后端 set-cookie 的 domain=.example.com，前端 JS 就能自然读写。此时根本不需要 iframe —— 直接用 document.cookie 或 js-cookie 库操作即可。
但注意：document.domain = "example.com" 只对二级域名有效，且现代浏览器（Chrome 120+、Firefox 115+）已废弃该 API，仅部分旧 IE 支持；对 a.com 和 b.com 这类完全不同的主域名，这条路彻底走不通。
- cookie 的
Secure和HttpOnly属性会影响前端读取能力，调试时建议先关掉HttpOnly - 若用 fetch 登录后手动设 cookie，需服务端配合返回
Set-Cookie头，并确保响应头含Access-Control-Allow-Credentials: true - 移动端 WebView 对 cookie 共享支持不稳定，优先考虑 token + localStorage 方案
iframe 加载失败或 onload 不触发的几个关键检查点
很多问题卡在 iframe 根本没加载成功，导致后续所有逻辑失效。不是代码写错了，而是环境或配置挡住了。
- 目标页返回了
X-Frame-Options: DENY或Content-Security-Policy: frame-ancestors 'none'，浏览器直接拒绝渲染 —— 查看 DevTools 的 Network 面板，看该 iframe 请求是否返回 200，还是被拦截 - 目标页用了 HTTPS，而主站是 HTTP（或反之），混合内容被现代浏览器阻止 —— 确保全站统一协议
- iframe src 是纯路径（如
/login）而非完整 URL，导致相对路径解析错误 —— 必须写成"https://target.com/login?..." - 某些安全插件或企业内网代理会主动过滤 iframe 请求，可在无插件隐身窗口复现验证
真正难的不是写几行 postMessage，而是每个目标域都要配好中转页、CSP 规则、CORS 响应头，且不能漏掉任意一个环节。少一个 localstorage.html，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
