サイトを常時SSL化にする方法 〜 Google chromeでSSL警告がでて悩んでる方へ 〜

今回は、前回のサイトSSL化の続きになります。
まだ、サイトにSSL証明書を取得していない、またはそもそも「SSLって何?」という方は前回の記事をぜひ、読んでみてくださいね!
さて、前回SSL証明書を導入したのに、Google chromeで見ると、以下のように警告が出てしまうという問題点をあげて終わりました。今回は、その解決方法をお知らせいたします。
ちなみに完全にSSL化されたサイトでは、以下のように鍵マークに「保護された通信」と表示されます。
3つのチェックポイント
それでは早速、SSL証明書を取得したにも関わらず、警告が出た場合にチェックするポイントをお伝えします。ここからは多少、HTMLなどの知識を有しますので、ご了承ください。
1.HTMLのリンクパスをチェック
HTMLのソースコードに、「http」から始まるパスが入っていると、セキュリティ保護化から外れてしまします。
そこで、「http」で書かれているパスを全て「https」に変更します。
1 |
<img src="http://orangewalker.net/images....."> |
↓ 修正後
1 |
<img src="https://orangewalker.net/images....."> |
よくある修正箇所は、画像パス、cssパス, Javascriptパスなどが「http」から、始まっている場合が多いので注意してみてください。
2.CSSに書かれている画像パスをチェック
次にチェックする箇所としては、CSSファイルになります。こちらは、うっかり見落としがちなので、必ずチェックしてください。
よくあるケースとしては、以下のように背景画像を指定した際に「http」から始まるパスが入っている場合があります。
こちらも、HTMLの場合と同様に「http」から「https」に書き換えます。
1 2 3 |
.keyvisual{ background-image:url(http://orangewalker.net/images/.....); } |
↓ 修正後
1 2 3 |
.keyvisual{ background-image:url(https://orangewalker.net/images/.....); } |
3.Javascriptのパスをチェック
最後にチェックする場所としては、Javascriptファイルです。
こちらも、先と同様ですが背景画像を変更するスクリプトが入っている場合、「http」から始まるパスで書かれていることがあるので念のためにチェックしてみてください。
1 2 3 4 5 |
$(function() { $('.box').css({ backgroundImage: 'url("http://orangewalker.net/img02.jpg")' }); }); |
↓ 修正後
1 2 3 4 5 |
$(function() { $('.box').css({ backgroundImage: 'url("https://orangewalker.net/img02.jpg")' }); }); |
WordPressを使っている場合は、ここもチェック
最後ですが、「Wordpress」を使っているサイトも多いと思いますので、2点ほどお伝えします。
簡単にパスを置換える方法
WordPressで「http」から「https」を全て書き換えるのは、投稿数が多ければ多いほど1ページづつ対応しなければならなく、かなり骨の折れる作業だと思います。そこで、一括で変換できる便利なプラグイン「Search Regex」があるので、ぜひ利用していきましょう。
Search Regexプラグインを使用すると、WordPressサイト内の文字列を一括で変換することができます。以下、手順で設定してください。
1.「Search Regex」インストール
まずは、左メニューの「プラグイン」から「新規追加」をクリックして、追加画面から「Search Regex」を検索してインストールしてください。
インストール後、「有効」ボタンを押すとプラグインを利用することができます。
2.「Search Regex」の編集画面に移動
次に左メニューのツールから「Search Regex」をクリックしてください。
編集画面が表示されます。
3.編集画面から、「https」に文字列を置換え
編集画面が表示されますので、各設定を以下のように設定して「Replace」をクリックしてください。
- Source:Post content(デフォルト)
- Limit to:No limit(デフォルト)
- Order By:Ascending(デフォルト)
- Search pattern:http://○○○.com(SSL化する前のご自身のURL)
- Replace pattern:https://○○○.com(SSL化後のご自身のURL)
- Regex:選択不要
4.置換え結果を確認して完了
置換え結果が表示されますので、確認してください。
薄緑箇所が置換え前のパスで、黄色が置換え後のパスとなります。また、赤字箇所は置換えした該当箇所となりますのでよく、ご確認ください。ちなみに、この時点ではまだ実際のソースには反映されていません。これから置換えする箇所の表示のみとなります。
最後に、問題がなければ「Replace&save」をクリックしてください。
置換え箇所が反映されます。
以上で、Wordpress内の「http」のパスを一括で変換する方法となります。
サイトURLの変更
WordPressの場合、もう一つだけ変更箇所が発生します。
管理画面で登録されているURLも「http」から「https」に変更する必要があります。
こちらも以下、手順で行ってください。
1.編集画面に入る
WordPress管理画面から「設定」から「一般」をクリックして編集画面に入る。
2.「一般設定」にある以下の項目を変更
- WordPressアドレス(URL)
- サイトアドレス(URL)
それぞれのURLの「http」部分を「https」に変更すれば、完了となります。
以上、パスの置換えとサイトURLの変換ができればWordpressの対応は完了となりますが、それでも利用しているWordpressのテーマによっては、先ほどお伝えしたCSSやJavascriptの中身まで変更されていない場合があるので、その場合は、逐一ファイルを開いて修正してください。
表示確認
さて、ここまで各プログラムソースを変更できれば実際にアップして表示確認してみます。
Google chromeで「https」のURLでアクセスし、以下のように「保護された通信」と表示されれば問題ありません。
まだ、「保護されていない通信」と出る場合は、再度「http」が残っていないかを確認してみてください。
HTTPドメインを強制変更
SSL化が完全に実装されたのを確認できましたが、もう一点だけ問題があります。
問題点としては、今までアクセスしていた「http」ドメインでも、未だにアクセスできるということです。
このままだと、せっかくSSL化にしても「http」からアクセスされてしまった場合、また不信サイトと勘違いされるかもしれません。そうならないために、常時「https」のURLが表示されるようにしなければなりません。
解決方法は簡単です。
解決方法は、「http」にアクセスしても「https」に強制的にアクセスが変わるように転送設定を加えてあげるだけです。
こちらもやや専門的になりますが、htaccessというファイルを使って修正をしていきます。
-
FTPから「.htaccess」ファイルをダウンロードする。
- 以下、3行をコピーしてテキストエディタなどに貼り付ける
※編集前にバックアップコピーして置いてください。重要なファイルになるので、変更前に戻せるようにバックアップします。123RewriteEngine onRewriteCond %{HTTPS} offRewriteRule ^(.*)$ https://orangewalker.net/$1 [R=301,L] // URL部分はご自身のURLに変更してください - ファイル名を「.htaccess」として保存
- WEBサーバーのホームページのindexファイルが置いてある同じ階層の場所にアップロード
※ダウンロードした時と、同じ階層に置いてください。 - 動作確認
「http」からアクセスして、「https」のURLに転送されれば、無事終了となります。
まとめ
以上、一通りSSL化の方法をご案内しましたが、やはり面倒くさいですね(笑)
最後のまとめとして、SSL化のメリット・デメリットをあげてみます。デメリットもあるので対応しないという選択もあると思いますが、GoogleのSSL強化は待った無しの対応になりますので、ぜひ対応しておくことをお勧めします!
メリット
- サイトのセキュリティ強化
- HTTP/2対応ブラウザで表示が早くなる
- SEOでほんの少しだけ有利になる
- サイトの信頼性をアピールできる、ユーザーに安心感を与えることができる
デメリット
- 導入に費用がかかる場合がある
※無料サービス「Let’s Encrypt」もあるので検討ください - 使っているサーバが、常時SSL化に対応しづらい場合がある
- ソーシャル系ボタンのカウントがリセットされる
- Google Search Consoleに再登録が必要
※Search Consoleでは、HTTPとHTTPSは別のサイトとして登録する必要があります。
-
前の記事
【注意】2018年7月から始まるGoogleのSSL強化への対応 2018.07.16
-
次の記事
小顔ローラーの効果的な使い方 2018.07.19