施建樺 Wilson Shih

只能手點的網頁可分析的 API 軌跡

cdp-recorder

用 Chrome DevTools Protocol 被動錄下瀏覽器與後端之間的每一次往來,把「只有圖形介面的系統」變成可讀、可比對、可反推的對象。

技術
Node.js、Chrome DevTools Protocol、MIT 開源

問題

企業軟體常常只給你一個網頁。沒有 API 文件、沒有 CLI、沒有 SDK, 要做任何批次或自動化的事,都得有人坐在那裡點滑鼠。

但那個網頁自己是會講話的——它每一次點擊背後都在跟後端要資料。 只要把那段對話錄下來,就能知道這個系統真正的介面長什麼樣。

做法

接上 Chrome DevTools Protocol,在既有的登入工作階段裡被動觀測: 只記錄使用者自己操作時所產生的往來,不主動探測、不提權、不碰畫面上點不到的東西。

錄下來的軌跡經過去識別化之後,就是一份可以反推的介面清單: 哪個動作打哪個端點、要帶什麼、回什麼、順序有沒有相依。

踩坑

  • 錄到的不等於能重放。 很多請求帶了畫面狀態算出來的參數, 照抄會過不了後端驗證,得先弄清楚那個值是怎麼來的。
  • 敏感值必須在落地前就遮掉。 憑證與個資不能等到要分享時才處理, 遮蔽要發生在寫入檔案的那一刻,而且同一個值要對到同一個佔位符,除錯才有得追。

驗收

去識別化後開源在 GitHub,MIT 授權。 拿掉所有與特定平台相關的部分之後仍然可用——這是它有沒有做對的檢驗: 一個只對某一套系統有效的錄製器,不是工具,是腳本。

回到所有作品