SSLの問題を修正する方法

下の記事では、 SSL 対応が正しく行えているか動作確認する方法を開設しました。

問題があった場合、どのように問題を解決していけばよいのでしょうか。
ここでは、SSLの問題を修正する方法について解説します。

SSLの問題を修正する方法

ここでは Chrome ブラウザを使って問題を修正していきます。

復習になりますが、SSL 対応が正しく行えていない場合、ブラウザの URLバーに鍵マークがつきません。

正常にSSL対応に問題があるChromeの例

問題のあるウェブサイトの適当な位置で、右クリックメニューから [検証] を選択します。
すると、開発者ツールが開きます。

開発者ツール

開発者ツールで × や ! のアイコンが表示されていて、問題が発生していることがわかります。

開発者ツールの警告アイコン

× や ! のアイコン左の[Console]タブを開きます。
すると、現在のページで起きているエラーの内容を確認できます。

開発者ツールの警告

SSL の問題は “Mixed Content:” から始まるエラーです。
SSL 化するには https:// でのアクセスが必要ですが、http:// のままになっているコンテンツがあるため、エラーとなっています。

http:// のままになっているのは “but requested …” の後に書かれている URL です。

開発者ツールの警告

この例では、Google Material Icon のスタイルシートへのリンクと、画像へのリンクが http:// になっています。

Google Material Icon のスタイルシートへのリンクは、<HEAD>セクションに書かれるようにプラグインで設定しているので、修正します。

画像へのリンクは、投稿記事内に書いているので、投稿の編集ページで修正します。

修正すると、エラーの表示はなくなり、 ブラウザの URLバーにも鍵マークがつきます。

開発者ツールの警告なし

正常にSSL対応できているChromeの例