WEBサイトのSSL対応は証明書の設定よりもコツコツ作業が手間だった
Chromeのウェブアドレスの左側にあるアイコンで、サイトの安全性に関する情報の表示が変更になり、通信が保護されていないとアイコンがだめだめなバッテン表示に変わってしまうので、無料のSSLサーバ証明書を設定することにしました。
多くのサイトでhttps対応が進んでいて、無償のサーバ証明書が登場した背景については以下のサイトが判りやすいです。
SSL/TLSサーバ証明書として利用したのは「Let's Encrypt」です。
さいわい利用しているレンタルサーバが「Let's Encrypt」に対応していたため、設定ページでチェックを入れて数秒で完了してしまいました。
もっと複雑なものかと思っていたのであっけにとられてしまいました。
⇒「Let's Encrypt」の詳細や導入方法については上記のポータルサイトを参照ください。
これが作業の本命「既存コンテンツのhttps対応」
数分待ってサーバ側の設定が更新されると、ブラウザのアドレスにサイトURLのプロトコル部分を「http」から「https」に変えて入力すれば保護された通信でサイトを表示できるようになります。
ここでサイト内に保護されていないコンテンツへの参照（http）が存在するとサイト情報欄（アドレスの左側）に注意喚起の表示がでます。
安全な通信と安全でない通信が混在していると怒られてしまうわけです。
混合コンテンツの参照についてのエラーはChromeのデベロッパーツールのコンソールに表示されるエラーメッセージで確認できます。
混合コンテンツには2つあり、1つはパッシブな混合コンテンツと呼ばれるものでサイトに埋め込まれた画像や動画の呼び出しに「http」通信が使われているというもの。（上記エラーメッセージ画像の黄色背景部分）
同一ドメイン内（同じサイト）にあるコンテンツであればhttps対応は先程完了しているので、リンクURLの先頭を「https」に変更します。HTMLのソースコードをエディタで置換してアップロードすればOKです。
もう1つはアクティブな混合コンテンツと呼ばれるもので、サイト内で呼び出されているjavascriptやCSSのリンクです。（上記エラーメッセージ画像の赤色背景部分）
同一ドメインのファイルの参照であれば先程同様プロトコル部分をhttpsに書き換えてあげればOKです。
外部サイトのファイルが呼び出されている場合は、それらのサーバがhttpsに対応している必要があります。GoogleやYAHOOはhttpsに対応しているのでリンクURLを変更するだけ済みます。
これらの修正作業について、リンクが相対パスで書かれている場合はそのままで大丈夫です。
またサイトが静的HTMLで記述されている場合は単純にテキストの置換で済みますが、PHPなど動的にページが生成されている場合はrequireで読み込んでいる別ファイルやユーザ関数内に記述されていたりする部分を追いかけてURLをコツコツと変更していきます。
自分で書いたコードであっても時間が経つと構造を忘れてしまっていることが普通なので骨が折れます。規模の大きいサイトではこれが結構な手間になります。
無事修正が完了するとサイト情報欄の表示が「保護された通信」に変わり、鍵マークをクリックするとサイトの情報が確認できるようになります。
まとめ
・無料SSLサーバ証明書「Let's Encrypt」でhttps対応
・httpとhttpsのリンクが含まれる混合コンテンツというエラー
・デベロッパーツールのコンソールで混合コンテンツの確認
・ページで呼び出しているファイルのデバッグ
この記事が気に入ったらサポートをしてみませんか？