HTTPSサイトに混在コンテンツが無いかを調べるWEBサービスを作ってみた

サイトに混在コンテンツ (Mixed Content) が無いかを調べるWEBサービスを作ってみたのでこのブログで公開しました。

クローラーを作るためにScrapyを覚える事にしましたが、どうせなら何かに使えそうな物を勉強がてら作ろうという事で混在コンテンツチェッカーを作りました。

サイトをSSL化した後って混在コンテンツの確認が大変ですし、SSL化後もうっかり混在コンテンツを表示していたという事もあるかと思います。

最大1,000ページまでですが無料でチェックできるので試してみてください。

使い方

上記のページにも書いてあるのですがここではもう少し丁寧に解説します。

STEP1: サイトを登録する

サービスページの中ほどに登録フォームがあるので「URLとサイトマップURL」を入力し必要に応じてクローラーに使わせたいユーザーエージェントを指定します。利用できるユーザーエージェントはクローラー情報を確認してください。

モバイルファーストの時代なのでデフォルトではスマートフォン用のユーザーエージェントを使いクローラーが巡回します。PC、スマートフォンでそれぞれ表示するコンテンツが違う場合は、ユーザーエージェントを切り替えてそれぞれチェックする事を推奨します。

また、指定したユーザーエージェントはコンテンツページの取得時しか利用しません。XMLサイトマップ等のそれ以外の通信ではPC用のユーザーエージェントを固定で使いますのでご注意ください。

XMLサイトマップはWordPressであればGoogle XML Sitemapsのプラグインを使うのがおすすめです。

全て入力が終わったら「登録」ボタンを押します。

STEP2: サイトを認証する

登録に不備が無ければ認証用ファイル「sslchecker_verify.html」のダウンロードリンクが表示されます。

こちらをダウンロードしてFTPでサイトのドキュメントルート (WordPressだったら wp-config.php があるディレクトリ) にアップロードして、「認証する」ボタンを押します。

認証用ファイルが確認できたらクローラーのキューにサイトを登録します。

この認証が終われば認証用ファイルは削除しても問題ありませんが、中に処理結果を確認するためのIDが記載されているので結果が出るまではメモしておいてください。

STEP3: 巡回を待つ

①のフォームに発行されたIDを入力して「処理状況を確認」ボタンを押すとクローラーの状態が確認できます。

クローラーが待機していれば即時処理が実行され、他の処理をしていれば順番待ちになります。1,000ページだと1時間はかかると思うのでこのページを閉じて暫く経ってから確認してみてください。

Cookieで管理していないので、IDはメモを取るか認証用ファイルに同じものが記載されているので処理が終わるまでは保管しておいてください。

STEP4: 結果を確認する

処理が完了したあとは混在コンテンツチェックの結果を確認できます。

混在コンテンツが無ければ「データ削除」しておしまいですが、見つかった場合は結果を保存するなりしてコンテンツを修正します。

もう一度チェックしたい場合はサービスページをリロードしてもう一度、STEP1から実行してください。

全て完了したら「データ削除」を押して結果データを消去してください。

ヘルプ

その他の使い方、既知の問題等をここに書いています。

1000ページ以上チェックしたい

1000ページ以上チェックしたい場合はサイトマップで分けて登録してください。

このブログを例にした場合はこのように指定できます。

全体：ttps://worklog.be/sitemap.xml

2019年3月のみ：https://worklog.be/sitemap-pt-post-2019-03.xml

また、WordPressの場合はカテゴリーや日付等のアーカイブページが自動で作成されるので、把握している以上にページ数が多くなる場合があります。これらを除外したい場合はプラグインで設定してください。

処理が一向に完了しない

「処理状況を確認」ボタンを押した時に「サイトを巡回中です。(クロール数: ***ページ)」と表示され、クロール数が一向に増えない場合はクローラーがハングアップしている可能性があります。

その場合はお手数ですが問い合わせフォームよりご連絡ください。

プログラム内容について

最後に、SSL Mixed Content Chekerのプログラム内容について簡単に書き残しておきたいと思います。

構成

このサービスはこのような構成で動いています。

Scrapy、Flaskあたりは初めて使いましたがフレームワークってやっぱり便利ですね。また、今更ながらmongodbを初めて使いましたが、カラムを気にせずにデータを格納できるって素晴らしいですね。

自由気ままにプログラムを書いていたので柔軟性のあるmongodbには非常に助けられました。

クローラーの処理について

クローラーはこのような流れで混在コンテンツを探します。

Scrapyだけで混在コンテンツを探そうとした場合、要素をスクレイピングしてリソースのURLスキームを確認する方法がありますが、混在コンテンツになりうる要素 (img, javascript, video等のタグ) が全部わからなかったで、Chromeのブラウザログを使う方法を採用しました。

正直、Seleniumだけでも今回のようなサービスは作れたのですが、お題はScrapyだったので使うようにしました。

使ってみた感想としてはScrapyd (名前がややこしい) を併用すればクローラーの制御が簡単になるし、クローラーのデバックもしやすいのでScrapyを軸にして良かったです。

一点、微妙な点としてはSelenium (Chrome) でアクセス解析を無効化する方法としてbrowsermob-proxyを使っている点で、ここを起点としたエラーがたまに起きてしまう事があります。

browsermob-proxy以外の選択肢としてはSquidやprivoxyというプロキシサーバを使う方法があります。privoxyはこの辺が強力で、最初からGoogle AnalyticsやGoogle AdSenseをはじめユーザー情報を取得しようとする外部サービスを弾いてくれます。Torも噛ませる事ができるのでクローラー自体の情報も守りたい時にはオススメです。

ただ、デフォルトでどこまで弾いているのかを調べきれなかったので一番シンプルなbrowsermob-proxyを採用しました。

フレームワークって覚えるまでが大変ですが一回わかってしまえばどんどんクローラーを作れるのでScrapyはもう手放させないですね。

今回、SSL Mixed Content Chekerを作ってみてだいぶScrapyには慣れたので、勉強はこの辺にして仕事に取りかかりたいと思います！