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

文章轉載自公衆號劉凱里

一個陽光明媚的週末，透光的窗簾把我從睡夢中叫醒，大腦說今天是週六，能夠慵懶個一上午，因而開心地打開個人 Mac 準備看兩集 Rick and Morty 再起牀洗漱。

我火燒眉毛打開了對應的網站，發現瀏覽器提示 No internet，這才發現由於個人動做太過於行雲流水，電腦還沒來得及連上 wifi

Fine，那就等 wifi 本身重連吧，等待的這段時間恰好回味一下 Chrome 自帶的這款小恐龍遊戲。

科普：Chrome 瀏覽器是 Google 家的官方瀏覽器，使用體驗全世界南波萬。當用戶在無網絡時訪問某一網址，瀏覽器會提示「無網絡連接」（也就是上面這張圖），按下空格鍵，就會喚醒一個小恐龍跑步刷分的遊戲。 若是在有網絡鏈接時也想玩的話，能夠直接在地址欄輸入：chrome://dino

出於職業自己的敏感和好奇，我忽然心生疑問：這應該是用 JS 作的吧？ 我順勢打開控制檯，不如先看一下全部的全局變量？

239 個...太多了，我可沒這個耐心 我中止了操做，開始思考這一切的可行性：

• 我在幹什麼？嘗試自定義這個遊戲
• 爲何要看全局變量？由於假設關於遊戲的對象被暴露在了全局
• 若是沒暴露在全局？行，那我就放棄了（週末的早晨我可不想在 sources 裏面扒源碼） 也就是說，若是沒有在全局變量裏找到那個對象，我就能夠選擇性放棄了。

再看一下上面這張圖，不難發現，這 239 個全局變量，有不少都是老朋友了，name、history、location、onclick、onerror... 這些變量明顯和這隻小恐龍沒啥關係，打印出來純粹是來充個數，還浪費了我找目標的時間，因此我遇到了第一個問題：如何快速找到由開發者自定義的全局變量？

假如我有一個正常的 window...不對，不用假如，新開一個空窗口不就得了 在新打開窗口的控制檯，我獲得了這樣的結果：

也就是說，在這個恐龍快跑的小遊戲裏， Google 的前端工程師向 window 注入了 43 個全局變量（239-196）...

怎麼把這 196 個原生的全局變量拿過來呢？複製粘貼就太 low 了，讓我想一想...

在原有窗口的基礎上，再搞一個新窗口...這不就是 iframe 嗎！iframe 雖然沒有 window ，可是它有 contentWindow ，原則上來講，屬性差異應該不大。因此如今只須要建立一個 iframe，拿它裏面 contentWindow 的全局變量去過濾當前 window 的全局變量，就能夠篩選出那多餘的 43 個嫌疑人了。 因而我在控制檯敲出了下面這些代碼

回車！

誒，怎麼是** 45 **個？比預期的多了 2 個，難道 window 裏面還包含哪些 contentWindow 裏面沒有的變量嗎？因而我把相同的代碼拿去 url 爲 about:blank 的窗口下執行了一遍，發現了罪魁禍首：

哦...原來是我給 Chrome 安裝的 React 開發者工具乾的好事...忽略！ 我打開了先前檢索到的 45（43+2） 個多餘全局變量，大體掃了一眼，很快就發現了一個很可疑的選手：

Runner ，不就是這個一直在跑步的小恐龍嗎 看看它是個什麼貨色，無腦 typeof 一下：

emmm竟然是函數，哦？函數，首字母還大寫，這熟悉的味道，這不就是個構造函數嗎！正所謂，構造函數的寶藏都在 prototype 裏，在觀察了一遍這個寶藏以後，我發現了一個名爲 gameOver 的方法，

這個函數名，難不成它就是那個讓小恐龍去死的方法？既然這樣，呵，我反手就把它用空函數覆蓋了。因而...

真的是...

而後我又發現了另外一個有趣的方法：

顧名思義，這是用來給 小恐龍設置奔跑速度的方法，可是怎麼調用呢？ 由構造函數建立的實例對象，可經過原型鏈訪問構造函數 prototype 上的變量和方法，也就是說，若是能找到這個小恐龍對應的實例，那麼就能直接調用這個 setSpeed 方法了。既然 Google 的前端工程師已經把這麼多變量搞到全局了，那麼...會不會也在全局存儲了這個小恐龍實例？我從新審視了一遍那 43 個多出來的全局變量，並無找到。我下意識地隨手輸入了一下這個 Runner 構造函數，真是山重水複疑無路柳暗花明又一村吶：

我甚至都不須要看 Runner 函數的所有代碼，就知道原來實例被保存在一個名叫 instance_ 的 Runner 自身屬性裏，論起好變量名的重要性，行，那我就不客氣了，直接調用！

因而...

當我凝視着這個飛奔的無敵小恐龍時，我忽然以爲...一切變得...