どうもタスです。
当サイトは、サーバーがロリポップを使用しており、数記事書いた程度のところで無料の独自SSLを適用しました。
しかし、実際にはサイトのSSL化は完了しておらず、非SSL状態だったのです。
これに気付き、奮闘した内容をまとめたいと思います。
タスLifeにCSSが適用されていない
今日、いつものように、chromeでサイトを確認してみると、、、
あれ…？CSSが有効になっていない。。。
Chromeで見るとCSSが適用されていない状態で表示された
SSL化されていない問題の調査
よくよく見ると、ブラウザーのアドレスバーに赤い「×」マークが。。。
「×」マークをクリックし、「？」ボタンをクリックすると、Google Chromeのヘルプページが表示されました。
内容を確認すると、、、
このページは承認されていないソースからのスクリプトを読み込もうとしています: アクセスしようとしているサイトは安全ではありません。
という理由のようです。。。えっ？安全でない？httpsだけど？
また、「安全ではありません」と判断されたことにより、Googleは以下の対応を取っているようです。
Chrome で安全でないサイトにアクセスした場合、そのページ上の安全でないと判断されたコンテンツは表示されません。
ん～、どうしよう。
ロリポップの独自SSL（無料）を適用しただけなんだけどなぁ、あとは、xeoryをカスタマイズするために、CSSとPHPを少しいじっただけ。。。
「安全でないスクリプトを読み込む」リンクが表示されているため、それをクリックしてみると…
chromeのアドレスバーに表示されたコンテンツブロックマーク
ページ右上に表示されるはずのRSSのリンクがおかしな表示になってしまいました（FireFoxもIEも同様）。
非SSL化のサイトをchromeで表示した状態
非SSL化のサイトをfirefoxで表示した状態
非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化の対応
先程の「寝ログ」さんの記事を見ると、まだ設定した方が良いポイントがいくつかあったので、参考にさせて頂いてその設定も行いました。
行ったのは、
- .htaccessにリダイレクト用のコードを追記する
- Google Analyticsの設定変更
です。特に、1.はhttpからhttpsにリダイレクトを行うことで、もうhttpのサイトを見に行かれることはありません。
大変勉強になりました。
SSL化が完了したサイトをchromeで表示
SSL化が完了したサイトをFireFoxで表示
SSL化が完了したサイトをIEで表示
これで全てのSSL化作業が完了しました！
まとめ
サイト開設以降にSSL化を行うと、僕のようにSSLが不十分で警告が出るケースは多いようですね。
同様の事例があった際は、この記事を参考に解決されたら嬉しい限りです。
