記一次 JS 偶發性加載失敗的經歷

問題描述

前段時間，偶爾會有同事反映某頁面會崩潰。概率極低，且毫無規律！
我本身嘗試了一下，果真！沒有任何問題！
問題沒法重現，也就沒當回事。

直到有一天，我在測試時，也遇到了頁面崩潰的狀況。

頁面是用 vue 實現的，崩潰後，vue 模板代碼所有暴露出來了！
奇怪的是，刷新一下，頁面就會恢復正常。

真讓人頭疼。

問題定位

一開始，不會用PC調試移動端頁面（本人並無開發移動端的經驗），後來查了一下相關資料，使用 USB+Chrome 就能夠在 PC 上調試移動端（Android）的頁面了。
這樣問題就簡單了。

首先，打開該頁面，看一下具體的異常輸出，如圖：

調試時，發現 chrome 中，network 部分，我請求的 axios+vue 文件，反饋回來的並不是是預料內的內容，而是一堆其餘代碼：

提取出來，並格式化後：

根據這段代碼，我明白了爲何會有 圖 3 中的異常：Uncaught TypeError: Cannot read property 'appendChild' of undefined

首先，個人 axios + vue 文件的 script 是放在 head 標籤內的，瀏覽器加載這個標籤的時候，尚未構造出 body 元素！但尷尬點在於，這兩個文件被注入後，反饋回來的js腳本內容中有這麼一句當即執行的代碼 document.getElementsByTagName('body')[0].appendChild(l)，既然沒有 body 元素，又怎麼可能 append 成功呢！

查明真相

爲了搞明白，這個鬼東西到底想注入什麼內容，我決定把 <script src="/assets/js/axios.min.js"></script> 和 <script src="/assets/js/vue.min.js"></script> 寫到 body 裏，讓這個鬼東西如願以償。

修改後的效果如圖：

此時，頁面已經不會報錯了，調試發現，注入進來的腳本在頁面內添加了藍色箭頭所指的兩個 script 標籤，而且注入了一個 iframe（紅框內的內容）。
至此，真相大白！

解決方案

我所使用的解決方案就是把咱們的 http 連接換成 https。

其餘疑惑

雖然知道了是「被注入」引發的問題，但目前還沒能肯定注入源。只是網上查了一下注入內容中的「站長統計」。但不清楚這個流氓東西是怎麼作到的。特此，望知情者能幫助解答，感激涕零！