Logo 點第二次跑到 reCAPTCHA 管理頁

整理日期：2026-05-01

狀況

首頁左上角 Logo 出現很怪的點擊行為。

滑過 Logo 時，瀏覽器狀態列顯示的不是首頁網址，而是 Google reCAPTCHA 的管理頁。

第一次點 Logo 可能正常，第二次點就跑到 reCAPTCHA 相關頁面。

同時還發現 Logo 圖片看起來很大，但實際可點擊範圍只有中間一小條。

先拆成幾層看

我會先拆成幾層：

• Logo 的 <a> href 是否真的被改掉。
• 是整張圖都異常，還是只有某些座標異常。
• Logo 上方是否有透明 iframe 或 popup 元素。
• 頁面有沒有全站載入的 popup。
• popup 裡是否放了表單、reCAPTCHA、Turnstile 或其他第三方 iframe。
• Logo 的 <a> 實際 hit area 是否跟圖片大小一致。

這類問題如果只看原始 HTML，常常找不到。因為有些內容是在第三方 iframe 裡，server HTML 和一般 DOM dump 不一定看得到。

最後發現

首頁載入了一個全站 popup。

popup 裡放了表單，表單使用 reCAPTCHA v2。即使 popup 看起來沒有開，表單仍然初始化，reCAPTCHA iframe 也會被插入頁面。

Google 在 reCAPTCHA widget 裡放了遷移提醒連結。這個連結在 cross-origin iframe 裡，所以直接 grep 主頁 HTML 找不到。

再加上 popup 的 click handler 和 Logo 點擊範圍異常，最後讓部分 Logo 點擊被導到 reCAPTCHA 相關連結。

Logo 點擊範圍小，則是另一個 CSS 問題。custom-logo-link 是 inline 元素，line-height 讓 <a> 高度比圖片小，圖片視覺上溢出，但實際可點擊區域沒有跟著變大。

修正方式

主問題的方向是把表單驗證從 reCAPTCHA v2 換成 Cloudflare Turnstile。

如果網站本來就走 Cloudflare，Turnstile 通常比較乾淨，也比較不會出現這種 Google widget 內部連結干擾。

Logo 點擊範圍則用 CSS 修：

.custom-logo-link {
  display: inline-block;
  line-height: 0;
}

.custom-logo-link .custom-logo {
  display: block;
}

這樣 <a> 的高度會跟 Logo 圖片一致，整張 Logo 都能點。

不建議先做的事

不要只改 Logo href。

如果 href 本身沒錯，但 click 被 iframe 或 popup handler 干擾，改 href 不會解決根本問題。

也不要只用 curl 或原始碼搜尋。遇到第三方 iframe，要用瀏覽器 devtools 或 headless browser 去看 frame。

下次遇到可以先整理什麼

• Logo hover 時狀態列顯示哪個網址。
• 點擊哪個座標會異常。
• Logo <a> 實際尺寸和圖片尺寸。
• 首頁是否載入全站 popup。
• popup 內是否有表單和驗證碼。
• 驗證碼是 reCAPTCHA、Turnstile 還是 hCaptcha。
• 問題是否只在特定瀏覽器出現。

只要是「滑過某個正常連結，卻看到奇怪網址」，我會先查上方覆蓋元素和 iframe，而不是先改那個連結本身。

標籤

• reCAPTCHA
• Cloudflare Turnstile
• Popup
• Gravity Forms
• Logo
• iframe