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

一個(gè)陽(yáng)光明媚的周末，透光的窗簾把我從睡夢(mèng)中叫醒，大腦說(shuō)今天是周六，可以慵懶個(gè)一上午，于是開(kāi)心地打開(kāi)我的 Mac 準(zhǔn)備看兩集 Rick and Morty 再起床洗漱。

我迫不及待打開(kāi)了對(duì)應(yīng)的網(wǎng)站，發(fā)現(xiàn)瀏覽器提示 No internet，這才發(fā)現(xiàn)因?yàn)槲业膭?dòng)作太過(guò)于行云流水，電腦還沒(méi)來(lái)得及連上 wifi  Fine，那就等 wifi 自己重連吧，等待的這段時(shí)間剛好回味一下 Chrome 自帶的這款小恐龍游戲。科普：Chrome 瀏覽器是 Google 家的官方瀏覽器，使用體驗(yàn)全世界南波萬(wàn)。當(dāng)用戶在無(wú)網(wǎng)絡(luò)時(shí)訪問(wèn)某一網(wǎng)址，瀏覽器會(huì)提示“無(wú)網(wǎng)絡(luò)鏈接”（也就是上面這張圖），按下空格鍵，就會(huì)喚醒一個(gè)小恐龍跑步刷分的游戲。如果在有網(wǎng)絡(luò)連接時(shí)也想玩的話，可以直接在地址欄輸入：chrome://dino

出于職業(yè)本身的敏感和好奇，我突然心生疑問(wèn)：這應(yīng)該是用 JS 做的吧？我順勢(shì)打開(kāi)控制臺(tái)，不如先看一下所有的全局變量？ 239 個(gè)...太多了，我可沒(méi)這個(gè)耐心 我停止了操作，開(kāi)始思考這一切的可行性：

1. 我在干什么？嘗試自定義這個(gè)游戲
2. 為什么要看全局變量？因?yàn)榧僭O(shè)關(guān)于游戲的對(duì)象被暴露在了全局
3. 如果沒(méi)暴露在全局？行，那我就放棄了（周末的早晨我可不想在 sources 里面扒源碼）

也就是說(shuō)，如果沒(méi)有在全局變量里找到那個(gè)對(duì)象，我就可以選擇性放棄了。

再看一下上面這張圖，不難發(fā)現(xiàn)，這 239 個(gè)全局變量，有很多都是老朋友了，name、history、location、onclick、onerror... 這些變量明顯和這只小恐龍沒(méi)啥關(guān)系，打印出來(lái)純粹是來(lái)充個(gè)數(shù)，還浪費(fèi)了我找目標(biāo)的時(shí)間，所以我遇到了第一個(gè)問(wèn)題：如何快速找到由開(kāi)發(fā)者自定義的全局變量？ 假如我有一個(gè)正常的 window...不對(duì)，不用假如，新開(kāi)一個(gè)空窗口不就得了  在新打開(kāi)窗口的控制臺(tái)，我得到了這樣的結(jié)果： 也就是說(shuō)，在這個(gè)恐龍快跑的小游戲里，Google 的前端工程師向 window 注入了 43 個(gè)全局變量（239-196）... 怎么把這 196 個(gè)原生的全局變量拿過(guò)來(lái)呢？復(fù)制粘貼就太 low 了，讓我想想... 在原有窗口的基礎(chǔ)上，再搞一個(gè)新窗口...這不就是 iframe 嗎！iframe 雖然沒(méi)有  window ，但是它有  contentWindow ，原則上來(lái)說(shuō)，屬性差別應(yīng)該不大。所以現(xiàn)在只需要?jiǎng)?chuàng)建一個(gè) iframe，拿它里面  contentWindow  的全局變量去過(guò)濾當(dāng)前  window  的全局變量，就可以篩選出那多余的 43 個(gè)嫌疑人了。于是我在控制臺(tái)敲出了下面這些代碼 回車！ 誒，怎么是 45 個(gè)？比預(yù)期的多了 2 個(gè)，難道  window  里面還包含哪些  contentWindow  里面沒(méi)有的變量嗎？于是我把相同的代碼拿去 url 為 about:blank 的窗口下執(zhí)行了一遍，發(fā)現(xiàn)了罪魁禍?zhǔn)祝?/span> 哦...原來(lái)是我給 Chrome 安裝的 React 開(kāi)發(fā)者工具干的好事...忽略！我打開(kāi)了先前檢索到的 45（43+2） 個(gè)多余全局變量，大致掃了一眼，很快就發(fā)現(xiàn)了一個(gè)很可疑的選手： Runner ，不就是這個(gè)一直在跑步的小恐龍嗎 看看它是個(gè)什么貨色，無(wú)腦  typeof  一下： emmm居然是函數(shù)，哦？函數(shù)，首字母還大寫，這熟悉的味道，這不就是個(gè)構(gòu)造函數(shù)嗎！正所謂，構(gòu)造函數(shù)的寶藏都在  prototype  里，在觀察了一遍這個(gè)寶藏之后，我發(fā)現(xiàn)了一個(gè)名為  gameOver  的方法， 這個(gè)函數(shù)名，難不成它就是那個(gè)讓小恐龍去死的方法？既然這樣，呵，我反手就把它用空函數(shù)覆蓋了。于是...真的是...
然后我又發(fā)現(xiàn)了另一個(gè)有趣的方法： 顧名思義，這是用來(lái)給小恐龍?jiān)O(shè)置奔跑速度的方法，但是怎么調(diào)用呢？由構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象，可通過(guò)原型鏈訪問(wèn)構(gòu)造函數(shù) prototype 上的變量和方法，也就是說(shuō)，如果能找到這個(gè)小恐龍對(duì)應(yīng)的實(shí)例，那么就能直接調(diào)用這個(gè)  setSpeed  方法了。既然 Google 的前端工程師已經(jīng)把這么多變量搞到全局了，那么...會(huì)不會(huì)也在全局存儲(chǔ)了這個(gè)小恐龍實(shí)例？我重新審視了一遍那 43 個(gè)多出來(lái)的全局變量，并沒(méi)有找到。我下意識(shí)地隨手輸入了一下這個(gè)  Runner  構(gòu)造函數(shù)，真是山重水復(fù)疑無(wú)路柳暗花明又一村吶： 我甚至都不需要看  Runner  函數(shù)的全部代碼，就知道原來(lái)實(shí)例被保存在一個(gè)名叫  instance_  的  Runner  自身屬性里，論起好變量名的重要性，行，那我就不客氣了，直接調(diào)用！ 于是...當(dāng)我凝視著這個(gè)飛奔的無(wú)敵小恐龍時(shí)，我突然覺(jué)得...一切變得...

支持

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

1. 點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）

2. 關(guān)注我的官網(wǎng) https://muyiy.cn，讓我們成為長(zhǎng)期關(guān)系

3. 關(guān)注公眾號(hào)「高級(jí)前端進(jìn)階」，公眾號(hào)后臺(tái)回復(fù)「面試題」 送你高級(jí)前端面試題，回復(fù)「加群」加入面試互助交流群

》》面試官都在用的題庫(kù)，快來(lái)看看《《