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

[目次]

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

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

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

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

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

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

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

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

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

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

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

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

テスト用環境でWebサイトの表示を確認しよう

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

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

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

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

(図1)Google Chromeでのエラー表示

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

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

「Mixed Content」のエラーを解決しよう

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

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

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

(図2)Mixed Contentの表示

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

本番環境にアップロードしよう

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

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

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

この記事のポイント

  • エラーを事前に発見するためにもテスト用環境のHTTPS対応は必須。
  • テスト用環境で「Mixed Content」のエラーがなくなるまで修正を実施しましょう。
  • エラーの確認には、Webブラウザの開発系ツールなどが便利。