Chrome 的小恐龍遊戲,被我破解了...

kyrieliu發表於2020-11-09

一個陽光明媚的週末,透光的窗簾把我從睡夢中叫醒,大腦說今天是週六,可以慵懶個一上午,於是開心地開啟我的 Mac 準備看兩集 Rick and Morty 再起床洗漱。

我迫不及待開啟了對應的網站,發現瀏覽器提示 No internet,這才發現因為我的動作太過於行雲流水,電腦還沒來得及連上 wifi

image

於是我決定重溫一下這款經典的遊戲。

https://www.qq.com/video/q315...

科普:Chrome 瀏覽器是 Google 家的官方瀏覽器,使用體驗全世界南波萬。當使用者在無網路時訪問某一網址,瀏覽器會提示“無網路連結”(也就是上面這張圖),按下空格鍵,就會喚醒一個小恐龍跑步刷分的遊戲。
如果在有網路連線時也想玩的話,可以直接在位址列輸入:chrome://dino

出於職業本身的敏感和好奇,我突然心生疑問:這應該是用 JS 做的吧?

我順勢開啟控制檯,不如先看一下所有的全域性變數?

image

太多了,我可沒這個耐心...

我停止了操作,開始思考這一切的可行性:

  1. 我在幹什麼?嘗試自定義這個遊戲
  2. 為什麼要看全域性變數?因為假設關於遊戲的物件被暴露在了全域性
  3. 如果沒暴露在全域性?行,那我就放棄了(週末的早晨我可不想在 sources 裡面扒原始碼)

也就是說,如果沒有在全域性變數裡找到那個物件,我就可以選擇性放棄了。

再看一下上面這張圖,不難發現,這 251 個全域性變數,有很多都是老朋友了,name、history、location、onclick、onerror... 這些變數明顯和這隻小恐龍沒啥關係,列印出來純粹是來充個數,還浪費了我找目標的時間,所以我遇到了第一個問題:如何快速找到由開發者自定義的全域性變數?

image

假如我有一個正常的 window...不對,不用假如,新開一個空視窗不就得了!

在新開啟視窗的控制檯,我得到了這樣的結果:

image

也就是說,在這個恐龍快跑的小遊戲裡,Google 的前端工程師向 window 注入了 最多 55 個全域性變數(251-196)...

為什麼說最多 55 個?因為 Chrome 的版本以及安裝的 Chrome 外掛都會影響全域性變數的個數,比如 React 開發者工具就會向 window 中注入兩個全域性變數。

image

於是問題來到了:怎麼把這 55 個被注入的全域性變數拿過來呢?複製貼上之後再一個一個比對?太 low 了,讓我想想...

在原有視窗的基礎上,再搞一個新視窗...這不就是 iframe 嗎!iframe 雖然沒有 window,但是它有 contentWindow,原則上來說,屬性差別應該不大。所以現在只需要建立一個 iframe,拿它裡面 contentWindow 的全域性變數去過濾當前 window 的全域性變數,就可以篩選出那多餘的 55 個“嫌疑人”了

思路有了,寫程式碼也就容易多了:

image

在控制檯輸入這些程式碼後會車,我得到了這樣的結果:

image

這下篩選出了 45 個全域性變數。

45 個總比 200 多個好找一些,開啟這個陣列,我發現了一個命名很可疑的傢伙:

image

Runner,不就是那個“奔跑著的小恐龍”嗎(壞笑)?

那就看看它到底是個什麼貨色!

image

emmm居然是函式,哦?函式,首字母還大寫,這熟悉的味道,這不就是個建構函式嗎!正所謂,建構函式的寶藏都在 prototype 裡,在觀察了一遍這個寶藏之後,我發現了一個名為 gameOver 的方法,

image

這個函式名,難不成它就是那個讓小恐龍去死的方法?既然這樣,呵,我反手就把它用空函式覆蓋了。於是...

https://www.qq.com/video/n315...

真的是...

image

然後我又發現了另一個有趣的方法:

image

顧名思義,這是用來給小恐龍設定奔跑速度的方法,但是怎麼呼叫呢?由建構函式建立的例項物件,可通過原型鏈訪問建構函式 prototype 上的變數和方法,也就是說,如果能找到這個小恐龍對應的例項,那麼就能直接呼叫這個 setSpeed 方法了。既然 Google 的前端工程師已經把這麼多變數搞到全域性了,那麼...會不會也在全域性儲存了這個小恐龍例項?我重新審視了一遍那 43 個多出來的全域性變數,並沒有找到。我下意識地隨手輸入了一下這個 Runner 建構函式,真是山重水複疑無路柳暗花明又一村吶:

image

我甚至都不需要看 Runner 函式的全部程式碼,就知道原來例項被儲存在一個名叫 instance_ 的 Runner 自身屬性裡,論起好變數名的重要性,行,那我就不客氣了,直接呼叫!

image

於是乎...

https://www.qq.com/video/f315...

當我凝視著這個飛奔的無敵小恐龍時,我突然覺得...一切變得...

image

最後

如果想要獲得原版更騷氣的閱讀體驗歡迎點選這個傳送門(獲取更加完整的閱讀體驗)。

  1. 如果喜歡我的文風和內容,歡迎“點贊收藏關注”三連~
  2. 關注我的個人公眾號:劉凱里,獲得更多好玩又實用的姿勢,順便防走丟。

image

相關文章