一個陽光明媚的週末,透光的窗簾把我從睡夢中叫醒,大腦說今天是週六,可以慵懶個一上午,於是開心地開啟我的 Mac 準備看兩集 Rick and Morty 再起床洗漱。
我迫不及待開啟了對應的網站,發現瀏覽器提示 No internet,這才發現因為我的動作太過於行雲流水,電腦還沒來得及連上 wifi
於是我決定重溫一下這款經典的遊戲。
https://www.qq.com/video/q315...
科普:Chrome 瀏覽器是 Google 家的官方瀏覽器,使用體驗全世界南波萬。當使用者在無網路時訪問某一網址,瀏覽器會提示“無網路連結”(也就是上面這張圖),按下空格鍵,就會喚醒一個小恐龍跑步刷分的遊戲。
如果在有網路連線時也想玩的話,可以直接在位址列輸入:chrome://dino
出於職業本身的敏感和好奇,我突然心生疑問:這應該是用 JS 做的吧?
我順勢開啟控制檯,不如先看一下所有的全域性變數?
太多了,我可沒這個耐心...
我停止了操作,開始思考這一切的可行性:
- 我在幹什麼?嘗試自定義這個遊戲
- 為什麼要看全域性變數?因為假設關於遊戲的物件被暴露在了全域性
- 如果沒暴露在全域性?行,那我就放棄了(週末的早晨我可不想在 sources 裡面扒原始碼)
也就是說,如果沒有在全域性變數裡找到那個物件,我就可以選擇性放棄了。
再看一下上面這張圖,不難發現,這 251 個全域性變數,有很多都是老朋友了,name、history、location、onclick、onerror... 這些變數明顯和這隻小恐龍沒啥關係,列印出來純粹是來充個數,還浪費了我找目標的時間,所以我遇到了第一個問題:如何快速找到由開發者自定義的全域性變數?
假如我有一個正常的 window...不對,不用假如,新開一個空視窗不就得了!
在新開啟視窗的控制檯,我得到了這樣的結果:
也就是說,在這個恐龍快跑的小遊戲裡,Google 的前端工程師向 window 注入了 最多 55 個全域性變數(251-196)...
為什麼說最多 55 個?因為 Chrome 的版本以及安裝的 Chrome 外掛都會影響全域性變數的個數,比如 React 開發者工具就會向 window 中注入兩個全域性變數。
於是問題來到了:怎麼把這 55 個被注入的全域性變數拿過來呢?複製貼上之後再一個一個比對?太 low 了,讓我想想...
在原有視窗的基礎上,再搞一個新視窗...這不就是 iframe 嗎!iframe 雖然沒有 window,但是它有 contentWindow,原則上來說,屬性差別應該不大。所以現在只需要建立一個 iframe,拿它裡面 contentWindow 的全域性變數去過濾當前 window 的全域性變數,就可以篩選出那多餘的 55 個“嫌疑人”了。
思路有了,寫程式碼也就容易多了:
在控制檯輸入這些程式碼後會車,我得到了這樣的結果:
這下篩選出了 45 個全域性變數。
45 個總比 200 多個好找一些,開啟這個陣列,我發現了一個命名很可疑的傢伙:
Runner,不就是那個“奔跑著的小恐龍”嗎(壞笑)?
那就看看它到底是個什麼貨色!
emmm居然是函式,哦?函式,首字母還大寫,這熟悉的味道,這不就是個建構函式嗎!正所謂,建構函式的寶藏都在 prototype 裡,在觀察了一遍這個寶藏之後,我發現了一個名為 gameOver 的方法,
這個函式名,難不成它就是那個讓小恐龍去死的方法?既然這樣,呵,我反手就把它用空函式覆蓋了。於是...
https://www.qq.com/video/n315...
真的是...
然後我又發現了另一個有趣的方法:
顧名思義,這是用來給小恐龍設定奔跑速度的方法,但是怎麼呼叫呢?由建構函式建立的例項物件,可通過原型鏈訪問建構函式 prototype 上的變數和方法,也就是說,如果能找到這個小恐龍對應的例項,那麼就能直接呼叫這個 setSpeed 方法了。既然 Google 的前端工程師已經把這麼多變數搞到全域性了,那麼...會不會也在全域性儲存了這個小恐龍例項?我重新審視了一遍那 43 個多出來的全域性變數,並沒有找到。我下意識地隨手輸入了一下這個 Runner 建構函式,真是山重水複疑無路柳暗花明又一村吶:
我甚至都不需要看 Runner 函式的全部程式碼,就知道原來例項被儲存在一個名叫 instance_ 的 Runner 自身屬性裡,論起好變數名的重要性,行,那我就不客氣了,直接呼叫!
於是乎...
https://www.qq.com/video/f315...
當我凝視著這個飛奔的無敵小恐龍時,我突然覺得...一切變得...
最後
如果想要獲得原版更騷氣的閱讀體驗,歡迎點選這個傳送門(獲取更加完整的閱讀體驗)。
- 如果喜歡我的文風和內容,歡迎“點贊收藏關注”三連~
- 關注我的個人公眾號:劉凱里,獲得更多好玩又實用的姿勢,順便防走丟。