WEBのこと

SSL化(HTTPS化)したのに特定のページだけ「保護された通信」と表示されない場合

結論から言うと、ブラウザ(今回はGoogle Chrome)のデベロッパーツールを使って原因を探ります。この方法は、

  • 過去にSSL化したのに、特定のページや一部分のみ非SSLになった
  • 今SSL化対応したのに、非SSLのまま
  • ある日を境に全ページが非SSLになった

などの症状に効きます。

SPONSORED LINK

サイトSSL化(HTTPS化)は常識

サイトSSL化、HTTPS化が標準となっている昨今。ホームページのURLが「https://~~」になっていると(sが付いている)、そのサイト自体が保護された通信下で運営されているという証明になり、Googleなどの検索エンジンに対する評価もいいのです。

だがしかし、

SSL化されていない時の表示(Google Chrome)

昨日気づいたんだけれど、トップページ以外に「保護されていない通信」が表示されている…。その文字をクリックすると、

サイトSSL化の時の表示

このサイトへの接続は完全には保護されていません」の表示。原因がさっぱり分からず、調べてみました。

デベロッパーツールを使う

※今回はGoogle Chromeを使っての説明となります。

SPONSORED LINK

デベロッパーツールを開く

Windowsの場合「F12」キー、Macの場合⌘command+option+iでデベロッパーツールが開きます。もし開かない場合は、こちらの手順で開いて下さい。

Google Chromeのデベロッパーツールの開き方

① Google Chromeの設定を開く。ブラウザ右上にある「」が縦に3つ並んだやつ。
② 「その他のツール」を選択。
③ 「デベロッパーツール」を選択。

原因を探る

Google Chromeデベロッパーツール画面

Console(赤枠)」が選択されているのを確認します。

Mixed Content(矢印)」という表示がありました。これはホームページ内にhttpアドレスの要素が残っているという意味。右の青枠を見たら、とある画像のURLが「http://~~」で始まっているのが分かります。何の画像かなと思っていたら…「数日前に入れたfeedlyのバナーだ!」と原因が判明。なんのこっちゃない。

画像URLをhttps://~~に変更

今回は、WordPressのウィジェットでサイドメニューに追加したfeedlyのバナーURLが原因だったので、管理画面に入って画像のURLを「https://~~」に変更。すると、

SSL化された時のURL

無事に、全ページSSL化に戻りました!鍵アイコンをクリックすると、

サイトSSL化の時の表示

この接続は保護されています」の表示。一安心。

まとめ

ご自分のホームページやブログをSSL化対応したとしても、あるタイミングで挿入した画像やプラグイン、外部URLにhttpアドレスが含まれていると非SSLのページとして認識されてしまいます。せっかくhttps://~~表示にしたのにもったいない!

定期的にページのURLチェックを行うことをおススメします。