從存取 React 內部狀態看反爬蟲技術的進化與潛在挑戰
當你準備在 ChatGPT 輸入指令時，是否曾遇到輸入框被鎖定、突然無法打字的情況？根據 ChatGPT Won’t Let You Type Until Cloudflare Reads Your React State. I Decrypted the Program That Does It. ，這篇作者 Buchodi 對相關程式碼的研究發現，這種短暫的延遲並不是 ChatGPT 當掉了，而是 Cloudflare 的防護機制在深入檢查網頁的 React 狀態，以確保使用者是真人。
逆向工程解密驗證指令碼
作者 Buchodi 透過對 Cloudflare 混淆過的 orchestrator.js 進行解密，發現這套系統會先進行基礎的環境檢查。這包括偵測瀏覽器是否由自動化工具控制，例如檢查是否存在 webdriver、cdc_ 或是 __driver_evaluate 等特徵。
然而，這只是第一步。為了對抗更高級、能完全模擬瀏覽器特徵的自動化程式，Cloudflare 採取了更激進的手段，直接存取網頁的 React 狀態。
遍歷 DOM 節點尋找 React 內部屬性
當指令碼在網頁上運作時，它會遍歷 DOM 樹，尋找名稱中包含 __reactFiber$ 或 __reactContainer$ 等字串的屬性。這些是 React 框架在運作時，附加在 DOM 節點上的內部物件，裡面包含了該組件的所有狀態與屬性。
透過存取這些 Fiber 節點，Cloudflare 可以讀取到 memoizedState 或 pendingProps。也因此，這種防護系統可以清楚了解目前的組件層級，看看網頁目前的結構是否與官方版本一致 ? 同時也能夠檢視內部狀態，例如 isTyping 狀態、輸入框的內容長度，或是特定組件的隱藏變數。而事件處理器則會確認點擊事件是否真的綁定在預期的 React 函數上，而非被惡意指令碼攔截或模擬。
這種檢查方式很精確，極難被駭客偽造蒙混通關，因為自動化腳本雖然可以模擬滑鼠點擊，但很難在不影響網頁功能的情況下，去同步修改 React 內部的虛擬 DOM 狀態。
社群反應與技術觀點
在 Hacker News 等技術社群中，這項發現引起了熱烈討論。許多開發者對於 Cloudflare 能夠精準抓取 React 內部資料感到驚訝。部分網友則認為這種做法其實就是將瀏覽器變成了一個透明的測試環境。
社群中也有成員擔心，這種深度的狀態檢查可能會觸及個人隱私邊界。然而，多數技術人員也承認，面對大規模的 AI 模型抓取壓力，OpenAI 必須採取極端手段來保護資源。社群中的意見普遍認為，這是反爬蟲技術與自動化工具之間持續演變的矛與盾技術軍備競賽。
CyberQ 觀點
從網路安全與使用者體驗的平衡來看，Cloudflare 的這種做法展現了資訊安全防護的全新層次。過去採用輸入驗證碼的方式需要依賴使用者主動互動，而現在的趨勢則是朝向無感驗證來發展。透過檢查 React 狀態，可以在不干擾使用者的情況下，完成高強度的安全檢查。
然而，CyberQ 認為，這種技術也帶來了潛在的挑戰。當網站框架更新或 React 結構變動時，防護機制是否會誤判真人為機器人？這對於前端工程師來說，在進行效能最佳化或版本遷移時，可能需要額外考量安全腳本的相容性。
未來，隨著 AI 爬蟲技術更趨成熟，類似這種深植於應用層架構的防護手段，將會成為網路產業的新標準作業之一。
首圖由 Nano Banana AI 生成
