微信內置瀏覽器中 window.location.href 跳轉失效的原因與替代方案

現象

桌面/手機瀏覽器正常，放入微信公眾號後 window.location.href = 'https://other.com' 無反應，且前置代碼用了 window.opener 獲取信息。

根本原因

1. 微信 JSBridge 攔截：微信內置瀏覽器（X5/WKWebView）對 location.href 跨域跳轉有白名單限制，非業務域名會被攔截。
2. window.opener 為 null：微信頁面通過 JSBridge 打開，非標準 window.open，因此無 opener 引用。
3. iframe 同源策略：嘗試用 iframe 載入第三方頁面會受 CSP/X-Frame-Options 限制。

替代方案

方案一：微信 JSSDK wx.openLocation（僅地理位置）

不適用於一般網頁跳轉。

方案二：服務端 302 重定向（推薦）

// 前端跳轉到自家後端
window.location.href = 'https://myapi.com/redirect?target=' + encodeURIComponent(targetUrl);

// 後端 Controller
@GetMapping("/redirect")
public void redirect(@RequestParam String target, HttpServletResponse resp) throws IOException {
    // 校驗 target 域名白名單，防開放重定向漏洞
    if (isAllowedDomain(target)) {
        resp.sendRedirect(target);
    } else {
        resp.sendError(400, "非法跳轉目標");
    }
}

優點：繞過微信前端攔截，可攜帶參數，安全可控。

方案三：微信網頁授權獲取用戶信息

若原意是獲取用戶身份，應使用標準 OAuth2 流程：

1. 引導用戶進入授權頁：https://open.weixin.qq.com/connect/oauth2/authorize?appid=...&redirect_uri=...&scope=snsapi_userinfo
2. 授權後回調帶 code，換取 access_token + openid
3. 拉取用戶信息

方案四：小程序/web-view 組件（若在小程序中）

<web-view src="https://other.com" bindmessage="onMessage"></web-view>
// 小程序端可通過 postMessage 與網頁通信

總結建議

• 放棄 window.opener 獲取父頁面數據，改用 URL 參數或 Session 傳遞。
• 所有跨域跳轉走自家後端 302，配置微信公眾號「業務域名」白名單。
• 若需嵌入第三方頁面，確認對方支持 X-Frame-Options: ALLOW-FROM 且在微信白名單內。