Web全般

SSL化したのに「保護された通信」にならない時の対処法

WordPressで、SSL化したのにアドレスバーに「このサイトへの接続は完全には保護されていません」と表示される時の対処法についてまとめました。

おじさんの場合、原因は2つあったのですが、ブログカードと画像のURLが原因でした。

 

症状

アドレスバーに表示されるステータスには大きく分けて3つあります。

SSL化したのに「保護された通信」にならない時の対処法-1

保護された通信」だとサイトはSSL化されhttps://で始まるURLになっているので安全ですよ、ということです。

情報、または保護されていない通信」はさらに細かく分けられるようです。

  • 「この接続ではプライバシーが保護されません」
  • 「このサイトへの接続は完全には保護されていません」

などがそうです。

保護されていない通信、または危険」は明らかに危険な場合です。フィッシング詐欺のサイトとかはこれですね。

 

SSL化したのに「保護された通信」にならない時の対処法-2

今回おじさんが遭遇したのは「このサイトへの接続は完全には保護されていません」という警告です。以下で、この状態から「保護された通信」にする方法を解説します。

 

「保護された通信」のメリット

対処法を解説する前に「保護された通信」にするメリットについて説明しておきます。おじさん的にはメリットは以下の2つだと思います。

  • Googleからの評価が上がる
  • サイト訪問者が安心する

 

Googleは2015年からhttpsのページを優先的にインデックスするようになっています。

 

HTTPS ページが優先的にインデックスに登録されるようになります

Google では常にユーザーのセキュリティを最優先に考え、長年にわたってウェブの安全性の向上やブラウジング体験の改善に取り組んできました。GmailGoogle 検索、YouTube では以前からセキュアな接続を実現しており、昨年は、検索結果での HTTPS URL の掲載順位を若干引き上げる取り組みにも着手しました。ウェブのブラウジングはウェブサイトとユーザーとの間の私的な体験となるべきであり、傍受中間者攻撃、データ改ざんの対象となってはいけません。Google が「HTTPS everywhere」の推進に取り組んできたのはこのためです。

 

 

ということで、httpsの方が検索順位が上がる、逆に言えばhttpは検索順位が下がるということです。

ユーザーもアドレスバーを見て緑色の表示になっていれば安心して閲覧できます。

 

原因1:ブログカード

おじさんの場合、「このサイトへの接続は完全には保護されていません」となっていた原因の1つはブログカードでした。

ブログカードというのはこんな感じで記事内にリンクを貼るとそれがカードのように表示される機能です。

SSL化したのに「保護された通信」にならない時の対処法-3

 

当ブログはこの記事を書いている時点ではLuxeritasというテーマを使っていますLuxeritasはブログカードが使えるようになっています。見栄えがいいのでおじさんも使ってたんですがまさかこれが原因だとは。

 

原因の特定方法

どうやってブログカードが原因であることを特定したかというと、「Googleデベロッパーツール」です。

デベロッパーツールの参考:Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

 

デベロッパーツールの機能を使って調べたところ、以下の画像のような警告を発見しました。

SSL化したのに「保護された通信」にならない時の対処法-4 SSL化したのに「保護された通信」にならない時の対処法-5

2枚目の画像の赤枠のところに「blogcard」と書かれていることから、原因がブログカードにあることがわかりました。

また、アドレスバーの「完全に保護されていません」の情報には「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります」と書かれていることから、ブログカードで使われている画像が悪さをしていることがわかりました。

さらに、デベロッパーツールの画面(上記1枚目)を見ると「requested an insecure image」と表示されているので、ブログカードの画像のsrc属性がhttpであることが原因であることがわかりました。

 

原因1の対処法

どうやらブログカードの画像のsrc属性のhttpをhttpsに変えてやれば良さそうですが、方法は色々ありそうです。

ブログカードを表示するコードはLuxeritasのphpに書かれているので、それを変更することも考えましたが、コードの場所の特定がめんどくさいし、コードをうまく修正できるかどうか怪しかったのでこの方法はあきらめました。

参考1:WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法
参考2:HTTPで稼働しているWordPressサイトを常時SSL、HTTP/2化する方法(実践編)

 

もう1つ思いついたのはブログカードの機能をオフにすることです。

試しにwordpress(Luxeritas)でブログカードの機能を「ブログカード有効化」と「直書きのURLをブログカード化する」の両方ともチェックをはずしてみたところ、いくつかのページではデベロッパーツールの警告も消え、アドレスバーも「保護された通信」になりました。

ところが、「完全に保護されていません」と表示されるページがいくつか残ってしまいました。

 

原因2:削除した画像の挿入コードが残ってる

「完全に保護されていません」と表示されたままだったので、再びデベロッパーツールを開いてチェックして見ると以下の画像のように、先ほどと同じ警告が表示されていました。

SSL化したのに「保護された通信」にならない時の対処法-6

とりあえず、wordpressで該当箇所を見てみると警告されているはずの画像が表示されていないことに気がつきました。

SSL化したのに「保護された通信」にならない時の対処法-7

 

怪しいと思ったのでエディタを「テキスト」に変えて見たところ以下の画像のようになっていました。

SSL化したのに「保護された通信」にならない時の対処法-8

 

画像は表示されていないのに、画像を挿入するコードだけ生き残ってました。これがもう1つの原因でした。

おそらく、画像を挿入したもののいらないと思ってあとで消したために、挿入コードだけ残ったんだと思います。

 

原因2の対処法

ということで、画像は表示されていないのに残っていたコードを消去したら、ちゃんと「保護された通信」と表示されるようになりました。

 

まとめ

  • httpsにした方がSEO的に良い
  • 「このサイトへの接続は完全には保護されていません」の原因はブログカードかも
  • もう一つの原因は残された画像挿入コードかも

 

SSL化については以下の記事も参考になるかもしれません。

ロリポップ!でURLを独自SSL化(無料)するときの手順

「このサイトへの接続は完全には保護されていません」の対処法