SSL化したのに「保護されていない通信」 原因確認と解決方法

No Tags | システムデザイン

SSL化したのに「保護されていない通信」と表示されてしまう・・・。

先日こんなご相談を頂きました。

SSL(暗号化通信)に対応したホームページで、ブラウザからURLを拾ってもhttps://…となっているのに「保護されていない通信」と表示され鍵マークが表示されないとのことです。

近年のGoogleの仕様変更によりクロームブラウザではSSL対応していないサイトは「保護されていない通信」と表示されてしまっています。
何かフォーム内で入力しようとするとその文字が赤く変わったりと訪問者の心象にもあまりよくないですし、SEOの評価指標でもあるのでSSL対応されているサイトも多いかと思いますが、不十分なSSL化で同じような悩みを抱えている方もいるかと思うので原因と解決策のご紹介です。

特定のケースでの解決策になります。ケースバイケースなのでお困りの方は一度ご相談下さい。

弊社へのお問い合わせ・ご依頼

こんな方におススメの記事です

・SSL化したのにクロームで「保護されていない通信」と表示される
・鍵マーク(SSL対応)のページと「保護されていない通信」が混在している
・「保護されていない通信」の原因を探りたい
・ワードプレスのテーマでLightningを使用している

何故保護されていない通信と表示されるか

色々な原因が考えられますが、原因の一つにhttpsではなくhttpとなっている画像やページがサイト内に混じっていることがあります。
今回のご相談はこれで解決できたので詳細ご紹介します。

問題の確認方法セルフチェック

1、グーグルクロームで該当ホームページを開いてキーボードのF12を押します。

2、Consoleタブをクリック

3、Mixed Contentの部分で「http://」からはじまるリンクが表示されたらそこが引っかかっている可能性が高いので修正確認します。

「保護されていない通信」修正方法

今回はヘッダー画像に使っている画像がhttpとなっていました。

よくよく話を聞いてみると構築当初はSSL化しておらず途中からSSL化したとのことで、その前にカスタマイズ画面からアップされたヘッダー画像が引っかかっていたようです。

以下はワードプレスのテーマでLightningを使っている場合のケースです。

1、ダッシュボード>外観>カスタマイズ>トップページスライドショーで再度ヘッダー画像をアップし直します。

2、サイトをページ再読み込み(ctrl+F5)後再確認

3、これで解決!、、と思ったらトップページは鍵マークがついたけれど他のページでは付きません。再度確認してみるとページ上部のタイトル部分の画像も変更前の画像を使っていることが判明。

4、先ほどのカスタマイズからページヘッダー設定を新しい画像に変更

5、反映確認して終了!

プラグイン導入も方法

ホームページの作成当初からSSL化した状態で構築していたら問題ないですが、今回のように初めはSSL化しておらずhttpで構築し、その後どこかのタイミングでSSL化した場合は要注意です。
ワードプレスには豊富なプラグイン(追加機能)があります。
アップデート等により不具合の原因にもなるので基本的にはあまりプラグインはおススメしていませんが、「Really Simple SSL」というプラグインで解決することもあるのでご参考下さい。