iframe Session 過期跳轉登入頁：防止父頁面刷新的跨域通訊方案

問題

iframe 內 Session 過期跳轉登入頁，導致父頁面也被跳轉或刷新，體驗差。

核心原則

**登入頁不應在 iframe 內載入**，應導向**頂層視窗**或**新視窗**完成登入，再通知 iframe 刷新。

方案一：頂層跳轉 (最簡單)

登入頁/Session 攔截器回傳：

<script>top.location.href = '/login?redirect=' + encodeURIComponent(top.location.href);</script>

父頁面直接跳轉登入，登入成功後 `top.location.href = redirectUrl` 返回原頁。

方案二：postMessage 跨域通訊 (保持 iframe 不跳轉)

1. iframe 內檢測 401/Session 過期 → `parent.postMessage({type:'session_expired'}, '*')`。
2. 父頁面監聽：

window.addEventListener('message', e => {
    if (e.data.type === 'session_expired') {
        // 彈出登入模態框或新視窗
        window.open('/login?iframe=1', 'loginWin', 'width=400,height=500');
    }
});

opener.postMessage({type:'login_success', token:'...'}, '*');
window.close();

方案三：無隱形 iframe 刷新 Token

定期請求 `/keepalive` 延長 Session，避免過期。

最佳實踐

• **避免在 iframe 做敏感操作**，將登入/支付等放頂層。
• 使用 **SameSite=Lax/None; Secure** Cookie 設定配合跨域。
• 後端 API 回傳 401 而非 302 重定向，前端統一處理。