つい先日、本ブログをホストしているはてなブログが独自ドメインのサイトに対してHTTPS対応したので本ブログをHTTPS化しました。
本ブログはこれまで241エントリ公開しており、そこまで数が多くないため、今回は全エントリを目視で確認してMixed Contentがあったエントリを手動で直す対応を取りました。
Mixed Contentとなったケースは殆ど
- 古いエントリの画像がHTTPのCDNを向いていた
- 一部oEmbedのリンクがHTTPになっていた
であり、単純にエントリを更新しなおすことで対応できたので作業自体は非常に楽でした。
HTTPS対応とは別に古いエントリのリンク切れなども修正できたのでブログの棚卸しにちょうど良かった感じです。
本エントリの動機
当座の対応としてはこれで良かったのですが、Mixed Contentをちゃんと全滅させたか確認したくなり、これは手動ではなく機械的に全エントリをチェックすべきだろうと思ったのが本エントリの動機になります。
Mixed Contentの確認方法
私は正直WEB系の知識には疎いのですが、ざっと調べた限りMixed Contentを機械的に確認するには「それ専用のサイトやツールを利用する」「ヘッドレスブラウザを使い警告やエラーを検知する」方法がある様で、今回は後者の方法を選びました。
基本的にはこちらのブログの方式に倣っています。
こちらはPHP + Selenium WebDriver + Chromeを使い、ブラウザコンソールログからMixed Contentの警告・エラーログを検出するものとなっています。
普段PHPを使う方はこちらのブログを参考にすると良いでしょう。
私はPowerShell使いですし、ブログのネタとしても美味しいのでPowerShell + Selenium WebDriver + Chromeで同様のことをやってみることにします。
【補足】他ツール
他に
というツールも見つけました。
Nodeを使っている方であればこのツール単体でMixed Contentをチェックできます。
(実装を見る限り同じ方式を採っています。内部でpuppeteerを使っているのでサイズはそこそこ大きい様です。)
前準備
事前に以下のソフトウェアを用意しておく必要があります。
Google Chrome
最新バージョンをインストールしておけば良いでしょう。
最低限バージョン60以降であれば全プラットフォームにおいてヘッドレスで動作させることができる様です。
今回はバージョン66を使っています。
Selenium WebDriver (C#)
こちらのダウンロードページからC#のSelenium Client & WebDriver Language Bindingsをダウンロードするか、Nugetから手動でnupkgをダウンロードしてください。
.nupkgはただのZipファイルですので、解凍して中にあるWebDriver.dllを後述するフォルダに配置します。
実行環境がWindows PowerShellの場合は、net45フォルダにあるWebDriver.dllを、PowerShell Core 6.0の場合はnetstandard2.0フォルダにあるWebDriver.dllを使います。
現時点での最新バージョンはVer.3.12です。
ChromeDriver - WebDriver for Chrome
から最新バージョンのChromeDriverをダウンロードし、Zipファイルの中にあるchromedriver.exeを後述するフォルダに配置します。
現時点での最新バージョンはVer.2.40です。
PowerShellとSelenium WebDriver(Chrome)を使ってMixed Contentをチェックする
ここから本題に入ります。
今回使用するスクリプトをGistに上げました。
このスクリプトを任意のフォルダに保存し、同じフォルダにWebDriver.dll、chromedriver.exeを配置します。
図にするとこんな感じです。
動作確認
今回はPowerShell Core 6.0(6.0.2)で動作確認してみます。
スクリプトに記載してある
はGoogleによるMixed Contentの確認用サンプルサイトです。
Chromeでアクセスすると下図の様になり、開発者ツールからコンソールログを確認するとMixed Content等の警告・エラーログが出力されていることが分かります。
PowerShell Coreを起動し、このスクリプトを実行してみると下図の様にブラウザのコンソールログからMixed Contentに関するものを出力してくれます。
また、接続先を変えてMixed Contentが無いサイトの場合だとこの様になります。
手元の環境で試した限りではいい感じにログを出力してくれています。
ただ、ブラウザ上で見るコンソールログとSelenium WebDriverから取得するログが完全に一致しないケースがある様です。
原因は解明できていないのですが、ブラウザ上で重複してるログがSelenium WebDriverではフィルタされて取得されない様に見受けられます。
とりあえず今回の用途には問題ないだろうとの判断をしていますが、厳密なログの検証などが必要な場合は注意が要りそうです。
最後に
Selenium WebDriverのおかげで思ってた以上にお手軽にMixed Contentのチェックができました。
本エントリの例は単一のURLに対するチェックですが、スクリプトを改造して複数URLに対応するのは簡単です。
例えばはてなブログであればAtomPub APIやsitemap.xmlからエントリの一覧を取得できますので、これらを組み合わせてやるとブログ全体をチェックするスクリプトも比較的容易に作成することができます。
