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要素はまだ構築されていませんでした.しかし、気まずい点は、この2つのファイルが注入された後、フィードバックされたjsスクリプトの内容に、document.getElementsByTagName('body')[0].appendChild(l)というすぐに実行されるコードがあることです.body要素がない以上、appendが成功するはずがありません.
真相を究明する
この幽霊が何を注入したいのかを理解するために、とをbodyに いて、この が い りになるようにすることにしました.
の は のようになります.
このとき、ページは っていません.デバッグでは、 されたスクリプトがページ に い で す2つのscriptラベルを し、iframe( の )を していることがわかりました.これで が らかになった!
ソリューション
が しているソリューションは、httpリンクをhttpsに することです.
その の
「 される」ことによる であることが かったが, はまだ されていない.ネットで の「 」を べただけだ.しかし、このごろつきがどうやってやったのか からない. に、 る が えを けてくれることを って、 しています.