https化したサイトなのに安全なサイトとならない場合

kunimiyasoftのアイテム紹介サイト「kunimiyasoftアイテムセンター」をブラウザで見ると、安全ではないサイトの表示になっています。作った時は大丈夫だったはずだけど、いつ駄目になったのでしょう。

このままでは良くないので、復旧作業を行いました。(ブラウザはchromeを使いました)

1.安全ではないサイトの表示とは

上の図を見ると、URLの左側が「丸の中にビックリマーク」の表示になり、安全なサイトではないという警告が出ています。

本来であれば、「鍵マーク」になり保護された通信となります。また、危険なサイトの場合は、「三角の中にビックリマーク」の表示になり、そのようなサイトはアクセスするべきではありません。

証明書は有効になっているので、SSLの設定には問題がなさそうです。

それでは、原因を探ります。

2.検証のウインドウを表示する

ブラウザの画面上で「マウスの右ボタン」をクリックし、「検証」を選択します。すると、HTMLの情報が右側に表示されます。ホームページを作成する人であれば、開発に欠かせない画面です。

3.エラーの情報を確認する

HTMLやCSSなどのコードが表示されていますが、下にエラーの表示があります。今回のエラーは

Mixed Content: The page at ‘https://kunimiyasoft.sakura.ne.jp/wp3/’ was loaded over HTTPS, but requested an insecure image ‘http://kunimiyasoft.sakura.ne.jp/wp3/wp-content/uploads/2019/03/kunimiyasoft.png’. This content should also be served over HTTPS.

となっており、「kunimiyasoft.png」のURLがhttpのままであるため、安全性に問題が発生していました。この画像のURLをhttpsに変更する必要があります。

ちなみにエラーはもう一つあり、ファビコンの画像がないと指摘されていますが、これはそのままにします。

4.ウイジェットの修正

少し前でサイドバーに「kunimiyasoftオフィシャル」へのリンクを追加したのですが、この時に使った画像がhttpだったのが今回の警告の原因でした。kunimiyasoftオフィシャルへのリンクはWordPressのウィジェットにあるので、修正します。

5.まとめ

今回は、画像のURLをhttpsにしなかったという初歩的なミスで起きてしまいました。https化してもページ内にhttpのリンクがあると、安全ではないページと認識される場合があります。httpのURLがあっても大丈夫な場合がありますが、できるだけhttpsのリンクを使うようにしましょう。