サイトのSSL化が不十分でブラウザに警告された場合の解決方法

どうもタスです。

当サイトは、サーバーがロリポップを使用しており、数記事書いた程度のところで無料の独自SSLを適用しました。

しかし、実際にはサイトのSSL化は完了しておらず、非SSL状態だったのです。

これに気付き、奮闘した内容をまとめたいと思います。

 

タスLifeにCSSが適用されていない

今日、いつものように、chromeでサイトを確認してみると、、、

あれ…?CSSが有効になっていない。。。

cssが適用されていない状態

Chromeで見るとCSSが適用されていない状態で表示された

 

SSL化されていない問題の調査

よくよく見ると、ブラウザーのアドレスバーに赤い「×」マークが。。。

×」マークをクリックし、「?」ボタンをクリックすると、Google Chromeのヘルプページが表示されました。

内容を確認すると、、、

このページは承認されていないソースからのスクリプトを読み込もうとしています: アクセスしようとしているサイトは安全ではありません。

という理由のようです。。。えっ?安全でない?httpsだけど?

 

また、「安全ではありません」と判断されたことにより、Googleは以下の対応を取っているようです。

Chrome で安全でないサイトにアクセスした場合、そのページ上の安全でないと判断されたコンテンツは表示されません。

ん~、どうしよう。

ロリポップの独自SSL(無料)を適用しただけなんだけどなぁ、あとは、xeoryをカスタマイズするために、CSSとPHPを少しいじっただけ。。。

「安全でないスクリプトを読み込む」リンクが表示されているため、それをクリックしてみると…

安全でないスクリプトを読み込む

chromeのアドレスバーに表示されたコンテンツブロックマーク

 

ページ右上に表示されるはずのRSSのリンクがおかしな表示になってしまいました(FireFoxもIEも同様)。

 

 

非SSL化をchromeで表示

非SSL化のサイトをchromeで表示した状態

非SSL化をFFで表示

非SSL化のサイトをfirefoxで表示した状態

非SSL化をIEで表示

非SSL化のサイトをIEで表示した状態

 

また、「https」は赤文字になって取消線が引かれており、SSLが無効化されている感じです。

保護されていません

アドレスバーの左側にあるアイコンが「保護されていない通信、または危険」の状態

「保護されていません」の赤文字をクリックし、詳細内容にある「詳しく見る」リンクをクリックすると、再度、Google Chromeのヘルプページに飛びました。

このページでは個人情報や機密情報を入力しないようにしてください。できれば、サイト自体、利用しないことをおすすめします。

え~~~、利用しないって…

Googleに信用されていない今、解決しないと誰も見てくれないサイトになる…

ただ、ヘルプページの下部に、

ウェブサイトのサーバーはchromeなどのブラウザに対し、証明書を使って本物のサイトであることを証明します。

との記載があるので、これは、証明書に何か不備がある?と思い、ロリポップのサポートページのカテゴリーが独自SSLについてを確認すると…

ふむふむ…、これか!

 

解決策の発見

独自SSLを利用していますが、ブラウザバーに鍵マークが表示されなかったり、「保護されていない通信」と表示されたりします。

という質問がありました。

まさに…

それに対する回答は、

ソース内(HTMLのタグなど)に「http://」から参照するアドレスが含まれる場合、そのように表示されるとのこと。

おぉ、、、これは情報処理安全確保支援士の資格勉強で学んだ内容だ…

サイト内にhttp通信とhttps通信が混在しているので、結局セキュアなサイトでないと判断されている状態のことか。。。

勉強したのに、活かされてね~。。

また、

「セキュリティで保護されたWebページコンテンツのみを表示しますか?」と表示されます。

という質問があり、それに対する回答は、

非SSL「http」経由で参照されると、「https」での表示ができない場合がある。

とのこと。

間違いなくこれだ…

 

SSL化のための対応

ということで、早速、「http→https(SSL化)」対応の開始。

当サイトは、まだ10記事しか投稿していないため、対応は1記事ずつコードを追うこととしました。

※記事数が多すぎる場合は、「寝ログ」さんの「WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境):内部リンクをSearch Regexで全て置換する」を参考にされるといいと思います。

wordpressにログインし、投稿→投稿一覧→編集対象の記事の編集リンクをクリック→エディタをテキストモードにして、「http://tasulife」を片っ端から検索し、発見したら「http→https」に修正する。ということを全ての記事に対して行いました。

※検索する際は、「Ctrl + F」のショートカットキーを使用すると効率よく行えます。

そうすると…、直った!良かった。無事、SSL化が完了しました。

 

その他、SSL化の対応

先程の「寝ログ」さんの記事を見ると、まだ設定した方が良いポイントがいくつかあったので、参考にさせて頂いてその設定も行いました。

行ったのは、

  1. .htaccessにリダイレクト用のコードを追記する
  2. Google Analyticsの設定変更

です。特に、1.はhttpからhttpsにリダイレクトを行うことで、もうhttpのサイトを見に行かれることはありません。

大変勉強になりました。

SSL化が完了したサイトをchromeで表示

SSL化が完了したサイトをchromeで表示

SSL化が完了したサイトをFFで表示

SSL化が完了したサイトをFireFoxで表示

SSL化が完了したサイトをIEで表示

SSL化が完了したサイトをIEで表示

 

これで全てのSSL化作業が完了しました!

 

まとめ

サイト開設以降にSSL化を行うと、僕のようにSSLが不十分で警告が出るケースは多いようですね。

同様の事例があった際は、この記事を参考に解決されたら嬉しい限りです。

 

スポンサーリンク


Pocket


SNSでもご購読できます。

コメントを残す

*

タスlife