浏览器强制隔离iframe与父页的sessionStorage和localStorage，同源或跨域均不可直接访问，必须通过postMessage等显式通信机制安全传递数据。
iframe 无法直接读取父页面的 sessionStorage 或 localStorage，这是浏览器强制实施的安全限制，不是兼容性问题，而是同源策略的硬性拦截。跨域 iframe 连 contentWindow 都拿不到，更别说存储对象；即使同源，也必须通过显式通信机制传递数据，不能绕过。
为什么不能直接访问 parent.sessionStorage
浏览器在初始化 iframe 的执行环境时，就将它的 sessionStorage 和 localStorage 与父页面完全隔离——哪怕同域、同协议、同端口。这不是“读不到”，而是根本不存在共享实例。尝试执行 parent.sessionStorage.getItem('token') 会直接抛出 SecurityError，控制台显示类似：
Uncaught SecurityError: Blocked a frame with origin "https://a.example.com" from accessing a cross-origin frame.
注意：这个错误在同源 iframe 中**同样会出现**，因为 sessionStorage 本身不具备跨 window 共享能力（和 window.name 不同）。
同源场景下推荐用 postMessage 主动传值
如果父页和 iframe 页面同源（协议+域名+端口完全一致），最稳妥的做法是父页在 iframe 加载完成后，把需要的数据主动发过去：
立即学习“前端免费学习笔记（深入）”；
- 父页确保 iframe 已加载完成：
iframe.onload触发后再调用postMessage - 父页发送前校验
iframe.contentWindow是否存在，避免Cannot read property 'postMessage' of null - 父页代码示例（发送 session 数据）：
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage({
type: 'SESSION_DATA',
data: {
token: sessionStorage.getItem('token'),
userId: sessionStorage.getItem('userId')
}
}, 'https://child.example.com'); // 必须写明确 origin，不能用 '*'
}
};
子页监听并校验来源：
window.addEventListener('message', (e) => {
if (e.origin !== 'https://parent.example.com') return; // 必须严格比对
if (e.data.type === 'SESSION_DATA') {
const { token, userId } = e.data.data;
// 存入子页自己的 sessionStorage，后续可直接用
sessionStorage.setItem('token', token);
}
});
跨域 iframe 只能靠 postMessage + 后端配合
跨域时，父页无法直接读取自身 sessionStorage 并发给子页？不，它能读，但子页收消息后仍需信任该数据来源。关键风险点在于：父页发的数据是否被篡改、是否来自真实父页。
- 必须用
postMessage，没有替代方案；window.name不可靠（易被覆盖、无类型、无事件通知） - 父页发送敏感字段（如 token）前，应附加签名或时间戳，由子页校验有效性（例如后端签发 JWT，子页验证 signature）
- 若 token 有效期短，建议子页收到后立即用它向自己所属域的接口发起一次验证请求（如
/api/validate-token），避免父页传错或过期数据 - 不要在 URL 参数里传 token（会留痕、上 log、被 referer 泄露）
容易忽略的时序和调试陷阱
很多问题不是逻辑错，而是时机没卡准：
-
iframe.contentWindow在onload前为null，用setTimeout猜测加载时间不可靠 - 子页的
message监听器必须在<script>标签顶部注册，不能等某个按钮点击才绑定，否则首条消息必然丢失 - 父页发消息后，子页可能还没开始监听 —— 没有“重发”机制，必须靠设计补偿（比如子页主动发
READY消息，父页收到再发数据） - Chrome DevTools 的 Application → Storage 面板里，iframe 的
sessionStorage是独立显示的，别误以为能看到父页内容
真正麻烦的从来不是“怎么传”，而是“怎么确认对方收到了、没被中间人替换、且还在有效期内”。所有简化处理（比如写死 targetOrigin = "*"、跳过 origin 校验、不验 token 签名）都会在灰度或外网暴露时变成线上事故。
