WordPressで、SSL化したのにアドレスバーに「このサイトへの接続は完全には保護されていません」と表示される時の対処法についてまとめました。
おじさんの場合、原因は２つあったのですが、ブログカードと画像のURLが原因でした。
症状
アドレスバーに表示されるステータスには大きく分けて３つあります。
「保護された通信」だとサイトはSSL化されhttps://で始まるURLになっているので安全ですよ、ということです。
「情報、または保護されていない通信」はさらに細かく分けられるようです。
- 「この接続ではプライバシーが保護されません」
- 「このサイトへの接続は完全には保護されていません」
などがそうです。
「保護されていない通信、または危険」は明らかに危険な場合です。フィッシング詐欺のサイトとかはこれですね。
今回おじさんが遭遇したのは「このサイトへの接続は完全には保護されていません」という警告です。以下で、この状態から「保護された通信」にする方法を解説します。
「保護された通信」のメリット
対処法を解説する前に「保護された通信」にするメリットについて説明しておきます。おじさん的にはメリットは以下の２つだと思います。
- Googleからの評価が上がる
- サイト訪問者が安心する
Googleは２０１５年からhttpsのページを優先的にインデックスするようになっています。
HTTPS ページが優先的にインデックスに登録されるようになります
Google では常にユーザーのセキュリティを最優先に考え、長年にわたってウェブの安全性の向上やブラウジング体験の改善に取り組んできました。Gmail、Google 検索、YouTube では以前からセキュアな接続を実現しており、昨年は、検索結果での HTTPS URL の掲載順位を若干引き上げる取り組みにも着手しました。ウェブのブラウジングはウェブサイトとユーザーとの間の私的な体験となるべきであり、傍受、中間者攻撃、データ改ざんの対象となってはいけません。Google が「HTTPS everywhere」の推進に取り組んできたのはこのためです。
ということで、httpsの方が検索順位が上がる、逆に言えばhttpは検索順位が下がるということです。
ユーザーもアドレスバーを見て緑色の表示になっていれば安心して閲覧できます。
原因１：ブログカード
おじさんの場合、「このサイトへの接続は完全には保護されていません」となっていた原因の１つはブログカードでした。
ブログカードというのはこんな感じで記事内にリンクを貼るとそれがカードのように表示される機能です。
当ブログはこの記事を書いている時点ではLuxeritasというテーマを使っていますLuxeritasはブログカードが使えるようになっています。見栄えがいいのでおじさんも使ってたんですがまさかこれが原因だとは。
原因の特定方法
どうやってブログカードが原因であることを特定したかというと、「Googleデベロッパーツール」です。
デベロッパーツールの参考：Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
デベロッパーツールの機能を使って調べたところ、以下の画像のような警告を発見しました。
２枚目の画像の赤枠のところに「blogcard」と書かれていることから、原因がブログカードにあることがわかりました。
また、アドレスバーの「完全に保護されていません」の情報には「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります」と書かれていることから、ブログカードで使われている画像が悪さをしていることがわかりました。
さらに、デベロッパーツールの画面（上記１枚目）を見ると「requested an insecure image」と表示されているので、ブログカードの画像のsrc属性がhttpであることが原因であることがわかりました。
原因１の対処法
どうやらブログカードの画像のsrc属性のhttpをhttpsに変えてやれば良さそうですが、方法は色々ありそうです。
ブログカードを表示するコードはLuxeritasのphpに書かれているので、それを変更することも考えましたが、コードの場所の特定がめんどくさいし、コードをうまく修正できるかどうか怪しかったのでこの方法はあきらめました。
参考１：WordPressサイトの内部リンクSSL対応（HTTPS化）をコードコピペでちょっと楽にする方法
参考２：HTTPで稼働しているWordPressサイトを常時SSL、HTTP/2化する方法（実践編）
もう１つ思いついたのはブログカードの機能をオフにすることです。
試しにwordpress（Luxeritas）でブログカードの機能を「ブログカード有効化」と「直書きのURLをブログカード化する」の両方ともチェックをはずしてみたところ、いくつかのページではデベロッパーツールの警告も消え、アドレスバーも「保護された通信」になりました。
ところが、「完全に保護されていません」と表示されるページがいくつか残ってしまいました。
原因２：削除した画像の挿入コードが残ってる
「完全に保護されていません」と表示されたままだったので、再びデベロッパーツールを開いてチェックして見ると以下の画像のように、先ほどと同じ警告が表示されていました。
とりあえず、wordpressで該当箇所を見てみると警告されているはずの画像が表示されていないことに気がつきました。
怪しいと思ったのでエディタを「テキスト」に変えて見たところ以下の画像のようになっていました。
画像は表示されていないのに、画像を挿入するコードだけ生き残ってました。これがもう１つの原因でした。
おそらく、画像を挿入したもののいらないと思ってあとで消したために、挿入コードだけ残ったんだと思います。
原因２の対処法
ということで、画像は表示されていないのに残っていたコードを消去したら、ちゃんと「保護された通信」と表示されるようになりました。
まとめ
- httpsにした方がSEO的に良い
- 「このサイトへの接続は完全には保護されていません」の原因はブログカードかも
- もう一つの原因は残された画像挿入コードかも
SSL化については以下の記事も参考になるかもしれません。
