こんにちは、エンジニアのえんとんです。今日はPhantomJSを使ってリダイレクトのエミュレーションをした時のことについて書き残しておこうと思います。

PhantomJSって?

そもそもPhantomJSってなんぞ?ってお話ですが、簡単にいえばブラウザの挙動をブラウザを使うこと無くエミュレートできるシロモノです。ヘッドレスブラウザってやつの一種ですね。内部では一般的なWebブラウザのレンダリングエンジンと同じWebKitが動いているので、普通のブラウザでできることはたいていできちゃいます。例えば、テストの自動化やスクリーンショット保存などができる優れものです。

PhantomJSのインストール

とりあえず、さくっと使ってみましょう!まずはインストールから、今回はMac上で動かすのでbrewで入れちゃいます。

あっさり入りました。

スクリーンショットを撮ってみる

PhantomJS入れたら是非とも試してみたいのがスクリーンショットです。折角なので弊社のサービスApplivのSSを撮ってみましょう

こいつをscreenshot.jsという名前で保存して・・・

と実行すると、これだけでSSが取れました!

applivのスクリーンショット

どうやら、サイズ指定してやらないとすべての領域をSS化しちゃうみたいですね(クリックすると全体が見れます)。しかしとてもお手軽にSSを撮ることができるので、cronで回して定期的にパシャパシャとっとくのとかも面白そうです。

PhantomJSでのリダイレクトのエミュレーション

さて、PhantomJSの特徴はSSだけではありません。PhantomJSの最大の特徴は、JavaScriptの挙動をエミュレートできる点です。今回はその特徴を使って、「リダイレクトのエミュレーション」に挑戦したいと思います。

リダイレクトには様々な方法があります。その中でも特にJavaScriptを用いたリダイレクトはサーバーサイドスクリプトではどうしても検出することもできません。そこでPhantomJSを使い、それらのリダイレクトも検出して経路を調査しようというのが今回の目的です。(前置き長くってすみません)

ちなみに調査ターゲットにはモバイル端末でのアクセス時の挙動も含まれるので、UserAgent偽装も組み込みます。

PhantomJS 1.9.7 以前+MacOSX 10.9.1環境だとエラーが出るみたいですので、もしエラーが出た場合には最新のPhantomJSを使ってください!

ページロード後にJSの実行時間を設けるため、リダイレクトのトレースを終了するまでディレイを設けています。この時間は実行環境や回線状況に左右されるため、setExitを呼ぶ時のディレイは適宜調整してください。

こいつをredirectTrace.jsという名前で保存して実行します。SSLのエラーを無視できるよう、オプションを付けて実行しましょう。チェックしたいURLは引数で渡します。

特にハマった点は、navigator.userAgentの上書きでした。直接上書きすることはできないのですが、こちらを参考にしてwindow.navigatorごとごっそり置き換えてやると無事上書きできました。これで、JS上でUserAgentを参照しているところも偽装できます。

 

これで、通常のリダイレクト+JSを使ったリダイレクトも含む経路を取得することが出来ました。

今回初めてヘッドレスブラウザに触れたのですが、普段ブラウザで行っている作業をJS使ってゴリゴリ自動化できるのはいろいろ便利だと思います。

ただ、現状のPhantomJSはデバッグがすごくしづらい(例外が帰ってこない、エラーがでてもスクリプトの実行が自動で止まらない等々)ので、それだけは今後のアップデートで修正されるといいなぁという感じです。

今回は単体でPhantomJSを使いましたが、CasperJSというライブラリを使えばもっと複雑な操作も簡単にこなせるようです。ボタン操作などが伴うエミュレーションをしたい場合には、このCasperJSを併用した方がよさそうですね。