CloudFlareのRocket Loaderが原因で突然Javascriptが動かなくなった
目次
まさか CloudFlare が原因だったとは…。WEBページのJSが急に動かなくなって困ったのですが解決できたのでメモ。
Javascriptが動かなくなる不具合は突然に
このブログを書く昨日まで普通に表示されていたページが今日になって突然おかしなことになりました。
おかしいというのは IE で表示したページは自体はレイアウトを保った状態で表示はされるのですが、 Javascript を使って表示される部分だけが表示されないんです。
表示されなくなったもの
- Facebook、Twitter、はてな、Pocket、LINEなどのSNSボタン
- Google AdSenseのバナー
- jQuery.jsを使ったアコーディオン
- Echo.js（画像を遅延表示させるLazyRoadみたいなやつ）
- LightBox.js
- SyntaxHighlighter（PREタグのソースを装飾するやつ）
などが全部動かなくなりました。
IEでは動いていないけどChromeでは一部動いている
Internet Explorer 11 では全ての Javascript が動いていないのに対して、Chrome では AdSenseの広告だけは表示されました。
ソースを見ると異常あり
おかしいな～なんで急に動かなくなるかな～とブラウザでページのソースを見ると以下のように
<script type="text/javascript"～
でないといけないところが、 <script>タグ全部 が
<script type="15304f88fc0274cd53c9f980-text/javascript"～
になっていました。
15304f88fc0274cd53c9f980- の部分はページを表示する度にランダムで値が変化しました。
FTPにあるファイルは正常、怪しいファイルもなし
どうなってんだこりゃ～改ざんか！？とサーバにあるHTMLファイルを開いてみると、ソースは <script type="text/javascript"～ で正常でした。
もしかして、なんらかの脆弱性をついて不正にアクセスされ、ページを表示する際に<script>タグ を書き換えるような PHP や JS がサーバーにあるんじゃないか？と、見慣れないファイルがないか探しましたが怪しいファイルはパッと見で見当たりませんでした。
CloudFlareのRocket Loaderが怪しい
サーバーに置いてあるファイルは正常で、ブラウザで表示する際にソースが書き換わっているというこで、怪しいファイルがなくて、他にサーバーとブラウザ間でソースの置換ができるものとしたら CloudFlare しかないけどまさかね～なんて考えながらも CloudFlare を疑ってみました。
現時点では、ページの表示スピードを高速化させるために無料で使えるCDNサービスの CloudFlare を使用しています。 CloudFlare ではページ内の Javascript を高速化させるための 「ロケットローダー」 という機能があります。この機能を ON（Automatic） にすると自動的に </body>タグ の直前に以下のように rocket-loader.js を呼び出すソースが組み込まれます。
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/dba9ecf7/cloudflare-static/rocket-loader.min.js" data-cf-once=!1bf743e9df871d84cecbddbe-" defer=""></script>
ここがなんだか怪しいぞ、といことで CloudFlare の管理画面から Rocket Loader を OFF にしてみました。[Speed] ページの中間に [Rocket Loader BETA] という部分にあります。設定変更したら即座に反映されます。
ページが正常に表示された！
やっぱり原因は CloudFlare のRocket Loaderでした。OFF にした直後にページの表示を更新したら正常になりました。なんかCDNのサービスを無料で提供しているし、 Rocket Loader は BETA版 だからってテストもせずにリリースするものなんですかね？以下のページのように、過去にも同じようなことがあったようです。CloudFlare には気を付けないといけないですね。やれやれ...。
