サイトのSSL化が不十分でブラウザに警告された場合の解決方法

どうもタスです。

当サイトは、サーバーがロリポップを使用しており、数記事書いた程度のところで無料の独自SSLを適用しました。

しかし、実際にはサイトのSSL化は完了しておらず、非SSL状態だったのです。

これに気付き、奮闘した内容をまとめたいと思います。

タスLifeにCSSが適用されていない

今日、いつものように、chromeでサイトを確認してみると、、、

あれ…？CSSが有効になっていない。。。

Chromeで見るとCSSが適用されていない状態で表示された

SSL化されていない問題の調査

よくよく見ると、ブラウザーのアドレスバーに赤い「×」マークが。。。

「×」マークをクリックし、「？」ボタンをクリックすると、Google Chromeのヘルプページが表示されました。

内容を確認すると、、、

このページは承認されていないソースからのスクリプトを読み込もうとしています: アクセスしようとしているサイトは安全ではありません。

という理由のようです。。。えっ？安全でない？httpsだけど？

また、「安全ではありません」と判断されたことにより、Googleは以下の対応を取っているようです。

Chrome で安全でないサイトにアクセスした場合、そのページ上の安全でないと判断されたコンテンツは表示されません。

ん～、どうしよう。

ロリポップの独自SSL（無料）を適用しただけなんだけどなぁ、あとは、xeoryをカスタマイズするために、CSSとPHPを少しいじっただけ。。。

「安全でないスクリプトを読み込む」リンクが表示されているため、それをクリックしてみると…

chromeのアドレスバーに表示されたコンテンツブロックマーク

ページ右上に表示されるはずのRSSのリンクがおかしな表示になってしまいました（FireFoxもIEも同様）。

非SSL化のサイトをchromeで表示した状態

非SSL化のサイトをfirefoxで表示した状態

非SSL化のサイトをIEで表示した状態

また、「https」は赤文字になって取消線が引かれており、SSLが無効化されている感じです。

アドレスバーの左側にあるアイコンが「保護されていない通信、または危険」の状態

「保護されていません」の赤文字をクリックし、詳細内容にある「詳しく見る」リンクをクリックすると、再度、Google Chromeのヘルプページに飛びました。

このページでは個人情報や機密情報を入力しないようにしてください。できれば、サイト自体、利用しないことをおすすめします。

え～～～、利用しないって…

Googleに信用されていない今、解決しないと誰も見てくれないサイトになる…

ただ、ヘルプページの下部に、

ウェブサイトのサーバーはchromeなどのブラウザに対し、証明書を使って本物のサイトであることを証明します。

との記載があるので、これは、証明書に何か不備がある？と思い、ロリポップのサポートページのカテゴリーが独自SSLについてを確認すると…

ふむふむ…、これか！

解決策の発見

独自SSLを利用していますが、ブラウザバーに鍵マークが表示されなかったり、「保護されていない通信」と表示されたりします。

という質問がありました。

まさに…

それに対する回答は、

ソース内（HTMLのタグなど）に「http://」から参照するアドレスが含まれる場合、そのように表示されるとのこと。

おぉ、、、これは情報処理安全確保支援士の資格勉強で学んだ内容だ…

サイト内にhttp通信とhttps通信が混在しているので、結局セキュアなサイトでないと判断されている状態のことか。。。

勉強したのに、活かされてね～。。

また、

「セキュリティで保護されたWebページコンテンツのみを表示しますか？」と表示されます。

という質問があり、それに対する回答は、

非SSL「http」経由で参照されると、「https」での表示ができない場合がある。

とのこと。

間違いなくこれだ…

SSL化のための対応

ということで、早速、「http→https（SSL化）」対応の開始。

当サイトは、まだ10記事しか投稿していないため、対応は1記事ずつコードを追うこととしました。

※記事数が多すぎる場合は、「寝ログ」さんの「WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）：内部リンクをSearch Regexで全て置換する」を参考にされるといいと思います。

wordpressにログインし、投稿→投稿一覧→編集対象の記事の編集リンクをクリック→エディタをテキストモードにして、「http://tasulife」を片っ端から検索し、発見したら「http→https」に修正する。ということを全ての記事に対して行いました。

※検索する際は、「Ctrl + F」のショートカットキーを使用すると効率よく行えます。

そうすると…、直った！良かった。無事、SSL化が完了しました。

その他、SSL化の対応

先程の「寝ログ」さんの記事を見ると、まだ設定した方が良いポイントがいくつかあったので、参考にさせて頂いてその設定も行いました。

行ったのは、

1. .htaccessにリダイレクト用のコードを追記する
2. Google Analyticsの設定変更

です。特に、1.はhttpからhttpsにリダイレクトを行うことで、もうhttpのサイトを見に行かれることはありません。

大変勉強になりました。

SSL化が完了したサイトをchromeで表示

SSL化が完了したサイトをFireFoxで表示

SSL化が完了したサイトをIEで表示

これで全てのSSL化作業が完了しました！

まとめ

サイト開設以降にSSL化を行うと、僕のようにSSLが不十分で警告が出るケースは多いようですね。

同様の事例があった際は、この記事を参考に解決されたら嬉しい限りです。