ホーム > 技術資料 > SSLセキュリティー警告をつぶす

SSLセキュリティー警告をつぶす

2011 年 6 月 9 日 コメントをどうぞ コメント

ブログを運営するのにSSL は必要ではないと思いますが、個人情報を扱うサイトでは、SSL で暗号化は今やあたりまえの話。でも、SSL に通したのはいいけれどセキュリティー警告のあめあられ、一体何が悪いのか皆目見当が付かないという方のためにちょっとしたコツを紹介します。

まずはSSL が正常かを確認

正常にSSLページにアクセスできている

今からお話しする事は、SSL 証明書が正常にインストールされている事が前提となりますので、まずは正常にhttps:// でアクセスできるかを確認しましょう。WordPress は動的CMS で、プラグインも多く利用されており、一旦不具合が起こると、どこに問題があるのかを特定するのは結構難しいものです。そこで、WordPress とは切り離して、ルートにダミーページ（test.html など） を置いて、直接アクセスしてみてください。ダミーページを作成する場合は、「SSLテスト」などシンプルなテキストのみにしてください。適当に他のページのソースをコピーしてしまうと、そのソース自体に問題がある可能性も有ります。確実に正常な事を確認しましょう。
Chrome でアクセスした場合、正常ですと右の様な表示になります。

ブラウザーによる警告の違い

IE はアラートが表示される

警告の出方はブラウザーによって異なります。Chrome などはとても控えめで警告が出ている事に気が付かない場合も有りますが、かといって安心はできません。IE ではこの様に表示され、なんだかすごく悪い印象を閲覧者に与えてしまいます。どのブラウザを使っても構いませんが警告を見逃さないよう気をつけましょう。JavaScript とSSL はIE でテストするのが良いかもしれませんね。

Chrome はこんな表示

ここで一つ注意。
Chrome でSSL のテストをする場合は要注意です。Chrome では一旦SSL の警告マークが出ると、その後正常になっても警告マークが取れません。ブラウザを起動しなおすと正常な表示になります。Chrome でSSL のテストはやめた方が良さそうです。

FireFox は右下に表示

FireFox はブラウザ右下に申し訳なさそうにびっくりマークが出ています。

Safari は異常が分からない

Safari は正常なときと若干表示が違いますが、こうなるともう異常であることすら分かりません。
問題は、IEで閲覧している人に対して、とても深刻そうなアラートが出ているということです。自分だけ気が付かなかったなんてことのない様に、IEでもチェックしてみましょう。（ここではIE7を使用しています。）


警告が出る原因は？

ほとんどの場合この警告は、SSL を通らないコンテンツを表示しようとしていますよと訴えています。「SSL を通らないコンテンツ」とはそのページで表示する画像や、スタイルシートやJavaScript などの外部ファイルです。これらのコンテンツが安全であると証明できなければ、現在のページは安全だと保障できないと言うわけです。これはAPI の様に外のサイトから取得してくる場合も例外ではありません。つまり、そのページで表示する画像、取り込まれるソース全てがSSL を通っていないといけないわけです。余計なお世話だと言いたい所ですが（笑）、これはサイトのオーナーを守るものではなく閲覧者を守る為のものなので仕方がありません。制作者は責任を持ってセキュリティー警告をつぶしていかなくてはいけないのです。

対処法

やらなければいけないことは意外と単純です。
ブラウザのソースを確認して、以下の部分をSSLのURLに変更してやるだけです。

パターン1（スタイルシートのリンク）　****href="http://********/****.css****
パターン2（画像やスクリプトなどのリンク） ****src="http://********

修正後はこちら

パターン1（スタイルシートのリンク）　****href="https://********/****.css****
パターン2（画像やスクリプトなどのリンク） ****src="https://********

共有SSL を利用している場合はドメインなども変りますので注意が必要です。また、クオートがシングルだったりスペースが入っていたりするとパターンは増える事になります。


しかし、これはブラウザのソースで確認できるものであって、WordPress がどこでこのURLを出力しているのかを知るのは大変です。また知った所で制御できるのかどうかも分かりません。

という訳で、やっと本題にやって参りました。

こちらのコードは、WordPress がせっせと作り上げたソースを、出力の一歩手前で書き換えてしまおうというものです。

add_action('init', 'ssl_ob_start');
function ssl_ob_start(){
	if( !is_admin() )
		ob_start('ssl_ob_callback');
}
function ssl_ob_callback($buffer){
	$pattern = array(
		'|(<[^<]*)href=\"'.get_option('home').'([^>]*)\.css([^>]*>)|',
		'|(<[^<]*)href=\''.get_option('home').'([^>]*)\.css([^>]*>)|',
		'|(<[^<]*)src=\"'.get_option('home').'([^>]*>)|',
		'|(<[^<]*)src=\''.get_option('home').'([^>]*>)|'
	);
	$replacement = array(
		'${1}href="https://SSLのトップページのパス${2}.css${3}',
		'${1}href=\'https://SSLのトップページのパス${2}.css${3}',
		'${1}src="https://SSLのトップページのパス${2}',
		'${1}src=\'https://SSLのトップページのパス${2}'
	);
	$buffer = preg_replace($pattern, $replacement, $buffer);
	return $buffer;
}

コードを適用したページ

このコードはシングルとダブル両方のクオートに対応してみました。このコードをテーマ内のfunctions.php にペーストして、トップページを確認してみてください（ファイルの保存はUTF8にて）。スタイルが効かなくなり、画像も一切表示されていないはずです。もし画像が表示されてるとしたら、そのURLはパターンからもれている事になります。ソースを確認してみてください。

外部サイトのリソースを読み込んでいる場合もパターンから漏れます。このような場合は、外部サイトのリンクをそのままパターンとしてコードに追加してやることでｈｔｔｐｓ：// に書き換えてしまえばOKです。ただし、そのAPI がSSLに対応していなければいけません。ｈｔｔｐｓ：// にして表示できなくなってしまうサービスはSSL ページには利用できないということです。

グラバターのリソースを表示している


まとめ

今回ご紹介したコードは、管理パネル以外、つまりフロント全てのページを対象にしていますが、3行目の !is_admin() の条件を変更すれば、好きなページに対して書き換えを行う事ができます。また、パターンを変える事でSSLの対応以外にもいろんな事ができますよね。なんだか禁断の香りがしてきますが、決して悪用はしないでくださいね。

ネットショップ構築プラグイン「Welcart」の専用テーマには、既にこのコードはfunctions.php に入っており、SSLの必要なページのみで書き換えが行なわれています。（プラグイン内部で処理しているものも有ります。）もちろん、子テーマで書き換えパターンを操作する事も可能です。

これであなたのサイトからもSSL警告が消える！・・かも

注意

このコードを使用してデータが壊れてしまう事はありませんが、表示がおかしくなる場合は直ちに使用をやめてください。また、保管はお子様の手の届かない所にてお願いいたします。

カテゴリー: 技術資料 タグ:
関連記事


8 − 二 =