Webサイトの常時SSL化に失敗しないエラーチェックと対応方法

本記事には古い情報が含まれている可能性があります。
2019年9月以降、各ブラウザのEV証明書のアドレスバー表示は変更されており、
本記事に掲載されている表示とは異なっている場合がありますので、ご注意ください。

［目次］

Webサイトの制作過程では通常、リンクや画像の表示確認など、公開前にさまざまな確認を実施すると思います。
さらに、Webサイトの常時SSL化の際には、正しくHTTPSに対応できているかを追加でチェックする必要があります。

ここでは、常時SSL化の際に必ず確認していただきたいポイントや、エラーの特定方法などまとめてみました。

公開後に失敗した！と気づくことにならないように、事前に必ず実施しておきましょう。

HTTPSに対応したテスト用環境を準備しよう

Webサイトの制作から公開までの一連の作業を自社内で行われていれば、公開前のWebサイトを確認するためのテスト用環境を自社内で用意されているケースが多いかと思います。

意外に忘れがちですが、このテスト用環境もHTTPSでの通信に対応しましょう。

HTMLやCSSのソースコードを編集後、HTTPSに対応したテスト用環境で事前に確認することで、本番公開前に対応漏れなどを発見するのに役立ちます。

テスト用環境のHTTPS対応は、昔に比べるとかなりハードルが下がっていると思います。

一般的なレンタルサーバーでは、テスト用のドメイン名や、それをコモンネームとするSSLサーバー証明書があらかじめ提供されているケースが多くなっています。

お客様独自のドメイン名で構築されたテスト用環境でも、Zenlogicのように無料のSSLサーバー証明書を利用して、HTTPSに対応することも可能です。

また、XamppやMampなどでローカルPC上にテスト用環境を構築されている場合でも、HTTPSに対応する設定が用意されています。
詳細は提供元のマニュアルなどをご参照ください。

失敗しそうなポイントを未然に検知するためにも、テスト用環境のHTTPS対応は必ず実施しましょう。

『常時SSL化に必要なHTMLソースコード編集のコツ』でご紹介したような作業がひと通り完了したら、HTTPSに対応したテスト用環境にアップロードして、Webブラウザでアクセスしてみましょう。

常時SSL化のための作業が正しく実施されたかは、WebブラウザのURL欄を確認すれば一目瞭然です。

HTTPSのページの中にHTTPで読み込むもの(画像やCSS、Javascriptなど)が混入していると、そのHTTPを盗聴/改ざんされて利用者が危険に晒される恐れがある、という理由からWebブラウザのURL欄に緑色の鍵マークではなく警告が表示されます。

警告の表示方法はWebブラウザによって異なります。
例えば、Google Chromeの場合は、以下のように表示されます。

また、Google MapやYouTubeの動画など、Webサイト上に直接表示する外部リソースがHTTPの記述になっていると、その部分は表示されずに真っ白になる場合もあります。

このようにHTTPとHTTPSの要素が混在する状態を「Mixed Content」といいます。
「Mixed Content」の状態では、Webサイトの常時SSL化が完成したとはいえません。

HTTPとHTTPSの要素が混在する状態である「Mixed Content」は、1つ1つ順番に解決していくしかありません。
すべてのエラーが無くなるまで、修正してテスト用環境で確認、を繰り返しましょう。

エラーの特定は、目視では骨が折れますので、Webブラウザの開発系ツールなどを利用すると便利です。

例えば、Google Chromeの場合は、デベロッパーツールを起動すると、右上に「!」マークで警告が表示されます。
これをダブルクリックすると、エラーの内容が表示されます。

「! Mixed Content: The page at～」の部分に、原因となる箇所がメッセージなどで表示されます。
その内容をもとにHTMLなどの修正を実施し、再度テスト用環境で確認しましょう。

テスト用環境でエラーが出なくなれば、対応が完了したHTTPS用のデータを、本番環境のサーバーにアップロードしましょう。

本番環境でも同様のエラーの確認を行い、必要に応じて修正を実施します。

※ テスト用環境では問題なくても、本番環境にアップロードすると、ドメイン名が変わったことなどに起因してエラーになるケースがまれにあります。
※ テスト中のWebページなどを第三者に見られたくない場合は、Basic認証や「.htaccess」ファイルなどで適宜アクセス制限を設定してください。