イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Python + PhantomJSで「mixed content チェッカー」を作ってみた

もうすっかり秋ですね〜
どうも中村です。

今回はHTTPS化対応を行った時に発生する「mixed contentエラー」をチェックしてくれるツールを作成してみたのでご紹介します。

mixed contentとは?

「混在コンテンツ」とも言われたりしますが、要するにHTTPS接続でアクセスしているにも関わらずHTTPで通信するコンテンツが存在している状態のことを言います。

この状態では一部のコンテンツがセキュアな状態となっていないだけでなく、ユーザーに警告が表示されるためにとても不信感を与えてしまい、サイトの離脱率が非常に高まってしまう恐れがあります。

良かれと思ってHTTPS化したのにも関わらず裏目に出てしまう感じとなってしまうので、一番避けたい状態です。。。

弊社サービスでもまだ全ページHTTPS化できていないものもあるので、これを機にチェックツールを作成してみることにしました!

どうやってチェックするか

mixed contentエラーが発生しているかチェックするには、どうしたらいいでしょうか。
自分なりに検討したところ、以下の手法を考えてみました。

①ソースコード内から「http://」で始まるコードを抽出
②Google Chromeなどで出力されるmixed contentエラーを抽出

まずHTTPS化を行う際に対応するであろう「http://」で始まるコードを抽出する①の手法を考えてみました。しかし、CSS内の記述なども含めると意外と実装が難しそうなことと、抜け漏れなく対応できる気がしなかったので却下。

次は本命である②の手法。今回のブログについて検討している際にはこちらで実装する気でいました。

ヘッドレスブラウザなどでページにアクセス
↓
Javascriptエラーを検知
↓
mixed contentエラーであれば出力

しかし、mixed contentエラーはJavascriptエラーではないんですね(笑)
気がついてから必死にブラウザで検知しているエラー情報と同じものを抽出できる方法を調べてみたんですが、結局見つかりませんでした。

色々悩んだ結果、以下のような手法で実装することにしました。

③対象ページから発生しているリクエストのURLから「http://」で始まるものを抽出

これなら①と違って抜け漏れなくチェックができそうです。
それでは実際に作成手順をご紹介していきます。

mixed contentエラーを検出する部分

こちらはPhantomJSで作成していきます。
コードはこんな感じ。

phantomjs code.png

ポイントとしては、「onResourceRequested」で対象ページから発生しているリクエストに対して処理しているところでしょうか。

こんなに短いコードで記述できて感動です。。。

※実行イメージ

phantomjs result.png

サイト全体のページに対してチェックさせる

ページに対してmixed contentエラーの検出は完成しましたが、サイト全ページのURLを用意してコマンドを打つのは非効率です。

今回はどのサイトにも設置しているであろう「sitemap.xml」を使ってサイト全体をクローリングさせることにしました。

Pythonを使えばxmlのパースが簡単なため、そちらを利用して作成しました。
コードはこんな感じ。

python code.png

説明はほぼコメントを見ていただければ十分かなと思いますが、全体の流れだけ軽く説明をしておくと

①コマンドの引数として対象サイトのsitemap.xml URLを指定
↓
②sitemap.xmlをパースし、記載されているURLのみ取得
↓
③対象URLを指定してPhantomJSで作成したチェッカーを実行
↓
④結果に[mixed content]の文字が入っていたら対象URLをNGとし、エラー箇所を出力
↓
⑤ ③、④を全URL分実行

※実行イメージ

python result.png

感想

まずは完成できて良かった!

最初検討していたものとは結構違うアプローチでエラー検出を行うことになってしまったのですが、PhantomJSのドキュメントなどを読む良いきっかけになったかなと思います。

ただ残念な点が2つ。

①Pythonを使ってsitemap.xmlパースさせたけど、本当はScrapyを使いたかった。けどそうするとSeleniumを使わなければならず、SeleniumではPhantomJSの「onResourceRequested」と同様のメソッドが見当たらない、せっかくPhantomJSで作成したのにもったいない、Scrapyはフレームワークで結構ドキュメント読み込まないといけなそうだし。。。で断念!

②mixed contentエラーの検出手法の②「Google Chromeなどで出力されるmixed contentエラーを抽出」は今回断念してしまいましたが、やっぱりこの方法で本当はやりたかった!各ブラウザでも挙動が異なる可能性もあるので、それが抽出できるような仕組みが作れたら色々と捗るのにな。。。

他の機会にまた色々試してみます。
こちらからは以上です!