独自SSL化のチェック！安全な接続の確認とエラーを修正する方法

サイトやブログを安全かつ効率的に運用するには、独自SSLの取得が必要になるかと思います。

安全な接続マークが表示されていれば、その表示がないブログに比べてセキュリティ的に安心ですよね。なので、設置が済んでいないということなら、SSLの取得をおすすめします。

SSLのサービスは、まだまだ有料になっているところが一般的です。でもエックスサーバーなら、独自SSLを無料しかも無制限で使うことができます。

ここではSSLエラーの解決法を説明していますが、これからSSLを設置するという方は、下の記事を参考にしてみて下さい。エックスサーバーでhttpのブログをhttpsに変更する全行程を紹介しています。

エックスサーバーでサイトのSSL化｜httpをhttpsにするための全行程

ただSSL化した場合でも、安全に接続されていなかったり、ブラウザによってうまく反映されていないこともあるんです。

また、普段使用していないブラウザの場合、反映されていないことに気付かない！ということが起こっているかもしれません。

もしSSL化されていないとしたら、アクセスを伸ばすチャンスを逃すことになってしまいます。ユーザーによって使用しているブラウザは違いますから、ブラウザ別にエラーが出ていないか確認が必要です。

どこからの流入が多いのかを調べるには、アナリティクスを使ってみて下さい。アナリティクスの管理画面から「ユーザー」⇒「テクノロジー」⇒「ブラウザとOS」の順にクリックするとユーザーが利用しているブラウザを知ることが出来ます。

前置きが若干長くなりましたが、今回は安全な接続の確認とエラーを修正する方法を紹介します。

ブログのセキュリティをブラウザ別にチェックする

まずは、ブラウザでブログが安全な接続になっているか確認します。主に使われているブラウザは下の5つになるかと思います。普段使用しているブラウザにURLを入力してみて下さい。

• Google Chrome（グーグルクローム）
• Firefox（ファイヤーフォックス）
• Safari（サファリ）
• Microsoft Edge（マイクロソフト エッジ）
• Internet Explorer（インターネットエクスプローラー）

話が本筋からそれてしまいますが、エラーチェックという目的だけでなく、主要ブラウザの表示確認は時々したほうがいいです。というのは、ブラウザを変えるとフレームが崩れているということがあるからです。

利用者の多いブラウザを含め、ブラウザには20種類くらいあります。なので、利用者がほとんどいないブラウザまで確認する必要はないかと思います。

でも、利用者が多いブラウザで表示が崩れていたりすれば、アクセスは伸びていきませんから主要のブラウザは定期的にチェックしていきましょう。

ということで、この記事の本筋に戻ります。エラーをチェックする場合、ドメイン名のみで確認するのではなく、ページ別の確認が必要になってきます。

少し面倒ですがブログ全体をSSL化した場合でも、ページによってエラー表示になっていることがあります。それから、安全な接続表示にならないときの方が、もしかすると多いかもしれません。

これはコンテンツに埋め込んでいる外部リンクがssl化されていなかったり、安全ではないサイトの画像やスクリプトを読み込んでしまっているため起こっています。

たとえば、外部リンクを貼り付けていてそのリンクのURLがhttpになっていたりすると、安全な接続にはなりません。

sslを設置してもグリーンの鍵マークが表示されない場合は、ページ内のコンテンツの一部がhttpになっている確率が高いです。そこで、ページ内にhttpとhttpsの状態が混在していないかチェックします。

安全性が確認されているかチェックする

まずは普段利用しているブラウザのアドレスバーにURLを入力して、安全性が確認されているかチェックしてみて下さい。Chromeでチェックした場合、安全な接続になっていると下のように表示されます。

でもエラーになっているとこのように表示されてしまいます。

ちなみに、httpsを付けずに入力した場合は下のように表示されます。

301リダイレクトの設定がされていれば、httpやhttpsの有無にかかわらず下のようにグリーンの鍵マークが表示されるのですが、エラーになる場合は次の方法を試してみて下さい。

まずはデベロッパーツールでエラーになっている画像リンクなどがないか修正箇所を探します。

デベロッパーツールの紹介

SSL化の設定をしたアドレスでエラーが表示されたら、デベロッパーツールを使います。ChromeかFirefoxのツールを使用すれば、アドレスの混雑を簡単にチェックすることができます。

また、ブラウザについているデベロッパーツールと同じように便利なのがhttpsチェッカールーツです。こちらも使い勝手がとても良いので紹介します。

Google Chromeの開発者ツールの使い方

まずは画面右上のドットが3つ並んでいるボタンをクリックして「その他のツール」に進み「デべロッパ―ツール」をクリックします。

「Console」をクリックします。

画面左端の▶マークをクリックします。

エラーマークをクリックします。

下はgoogleデベロッパーからのサンプルです。もしもwarningsやエラーがある場合、このような表示になります。

warningsをクリックした場合

エラーをクリックした場合

どちらも「http」になっているところを「https」置き換える必要があります。

Mixed Content: The page at ‘https://www.buzzclub.site/downloads/’ was loaded over HTTPS, but requested an insecure image ‘http://www.buzzclub.site/wp-content/uploads/2018/08/04-123.png’. This content should also be served over HTTPS

ただし、＜a＞タグのURLの場合はブラウザを新しいページに移動させるため、通常修正を加える必要はありません。でも、画像ギャラリーのスクリプトの中には、＜a＞タグの機能をオーバーライド（上書き）して、href属性で指定されているhttpリソースを読み込んでいることがあります。

たとえば、下はgoogleデベロッパーのサンプルですが、このようなケースでは修正が必要です。

Firefoxの開発者ツールの使い方

chromeのデベロッパーツールと使い方はほぼ同じです。

まずは画面右上の３つの縦ボッチから「ウェブ開発」をクリックします。

ウェブコンソールをクリックします。

すると「エラー」や「警告」といった問題点が表示されるので、この中に「Mixed Content」がないか確認します。下には「Mixed Content」という表記がないので、分かりにくいかと思いますが、すべてhttpのリンクが含まれているためのエラーです。

Httpsチェッカーツールの使い方

デベロッパーツールの場合、ページを一つひとつ確認していかなければなりません。しかし、ページを大量に保有しているとなれば、かなり手間がかかります。

そこで便利なのが、HTTPS Checkerです。これなら、SSL化を一括でチェックすることが出来ます。

まずは上のリンクからアプリをダウンロードします。

HTTPS CheckerをインストールするとRegistrationの画面が表示されるので情報を入力します。

「I accept the Software Licence Agreement」にチェックマークを入れてから「Register」をクリックします。

アドレスを入力してから「Mode:」の表示を「Mixed Content Only」に変更して「Run」をクリックします。

ページ数が多い場合は少し時間がかかりますが、これならすべてのページを一括で確認することが出来るので効率的です。

すると23個の「Passive Mixed/Insecure Content Found(+1Duplicates)が発見されました。

「Reveal」をクリックすると下のように問題のリンクが表示されるので「http」になっているリンクを「https」に変更します。

修正後、もう一度URLを入力して再確認をします。

結果を見てみると、かなり修正されています。HTTPS Checkerを使ったほうがより確実にSSL化されていない部分を見つけることができるかと思います。

ただ、HTTPS Checkerは万能ではないので、Mixed Contentを検出できないときもあります。なので、定期的にチェックしてページにエラーがないか確認してみて下さい。

英語版ですが使い方を動画でも確認することができます。

主要のブラウザで確認する

最後にエラーの修正をしたら、主要のブラウザで確認してみてください。一つのブラウザではO.Kになっていても、ブラウザを変えるとエラーになることもあります。下のように安全なURLの表示が確認できれば、SSL化の完了です。

Firefoxで安全性が確認されている場合

ただし、Firefoxの場合は安全な接続になっていてもウェブサイトの識別情報を見ると「検証され信頼できる運営者情報はありません」と表示されることがあります。

このブログで使っているエックスサーバーに問い合わせをしたところ、これはEVタイプ以外の証明書が導入されているサイトにSSL接続をした場合、上記のように表示される仕様になっているからということです。

Safariで安全性が確認されている場合

Microsoft Edgeで安全性が確認されている場合

Internet Exploreで安全性が確認されている場合

まとめ

今回は、sslのエラーの確認方法と修正の仕方について紹介しました。ネット環境はものすごいスピードで発展しているので、その都度ブログの設定に変更を加えなければなりません。

ブラウザの数が多いことや、各ブラウザによって仕様が異なるためSSL化されていないページの確認には時間がかかります。でも、セキュリティの強化ということで今後も重要性は増していくと思います。

サイトをSSL化したら、アナリティクスやサーチコンソールの設定も変更する必要があります。こちらにhttpsの登録をしておかないと確認が出来ないサイトということになり、サイトの解析といったデータを得ることが出来なくなってしまいます。

そこで、GoogleアナリティクスとサーチコンソールでhttpsのURLをデフォルトに設定する方法を紹介します。

アナリティクスとGRCでhttpのURLをhttpsに変更する方法