常時SSL化の対応手順

常時SSL化の対応手順について説明したページです。

常時SSL化によって、セキュリティ確保やサイトの安全性証明等が行えます。

常時SSL化とは?

 ブラウザからサイトを参照する際、アドレス欄でhttp://example.comのように入力すると、暗号化せずに通信を行います。この場合、サイトでパスワード等を入力すると、通信の途中で簡単に盗聴が出来てしまいます。

 アドレス欄でhttps://example.comのようにhttpにsを付けて入力すると、暗号化して通信を行います。この場合、パスワードを入力しても通信の途中で盗聴される可能性が低くなります。

httpとhttpsの違い

 httpsは、TLSというやりとりの中でhttpを暗号化して通信します。TLSの前身がSSLで、TLSを使っていてもSSLと呼ぶ事が多くあります。つまり、SSL化と言っていますが、言い換えればTLSを使ってhttpsで通信するという事です。

https通信の仕組み

 これまでは、重要な情報を入力する一部のページでhttpsを使う事もありましたが、全ページで常にhttpsを使うようにする事を常時SSL化と呼びます。

常時SSL化のメリット

 パスワード等の重要な情報を入力するページで暗号化しないと盗聴されてしまい、サイトを訪問した人が被害に遭う可能性があります。このようなページでは、httpsでの通信が必須です。

 又、httpsで通信するためにはサーバー証明書が必要です。これは、信頼出来る認証局が発行します。この認証局が発行したサーバー証明書であれば、信頼出来るサイトと判断出来ます。つまり、常時SSL化によって、信頼出来るサイトと証明する事が可能になります。

認証局とサーバー証明書

 因みに、httpsであればGoogleの検索順位が優位かというと、それ程ではありません。Googleでは、httpsであればhttpより若干検索順位を優位にすると説明していますが、目立った変動まではないようです。私は2サイト、httpからhttpsへ移行しましたが、検索順位への影響は殆どありませんでした。

 但し、Google Chromeではhttpで通信すると、アドレス欄の横に「保護されていません」と表示される事があります。

ブラウザで保護されていませんと表示される例

 このような表示があれば、サイトを訪問した人は不信に思うかもしれません。

 このような事から、httpでの通信は安全でないと判断される可能性があり、httpsでの通信は徐々に必須になっていくと思われます。つまり、常時SSL化はメリットというより、必要に迫られた対策と言えます。

 尚、常時SSL化するデメリットはあります。いいねボタン等のソーシャルボタンは、httpとhttpsを別のページとして認識するため、カウントが0に戻ります。カウント数が多いとかなり悩みますが、諦めた方が良さそうです。

 又、暗号化のために処理が遅くなりますが、httpでは使えないHTTP/2(httpのバージョンアップ版)が使えます。HTTP/2は通信を高速化出来るメリットがあり、httpとhttpsでどちらが速いとは一概に言えない状況です。

Let's Encrypt

 サーバー証明書は、サイバートラスト社等で購入出来ます。この場合、サイバートラスト社が認証局です。費用は、年間数万円から数十万円です。レンタルサーバーのロリポップやさくらインターネット等でも購入出来ます。有料なだけあって、ブラウザのアドレス欄に企業名を表示出来る等、付加価値がある証明書もあります。企業名を表示出来れば、より本物のサイトである事を証明出来ます。

 それなりの値段がするため、サーバー証明書を購入するのをためらう方もいると思いますが、無料で入手する事も可能です。Let's Encryptです。Let's Encryptは非営利団体のISRGが運営しており、https普及のために多くの企業がスポンサーとして支援しています。Let's Encryptは、ロリポップやさくらインターネット等のレンタルサーバーでも対応しており、無料で簡単に常時SSL化する事が出来ます。

 無料でサーバー証明書を入手出来るため、これからホームページを公開する場合、最初から常時SSL化していた方が良いと思います。

 尚、有料のサーバー証明書は期限が1年や2年等長いのに対し、Let's Encryptは3か月です。3か月単位に更新が必要ですが、通常は自動更新してくれます。

常時SSL化の準備

 サイトを常時SSL化する時の注意点は、一部の通信がhttpで行われると、ブラウザのアドレス欄横の鍵マーク上に以下のような「!」表示がされたりする事です。

ブラウザの鍵マーク上で「!」が表示される例

 ブラウザによっては、鍵マークの色が薄くなったり、鍵マーク自体が表示されない場合があります。正常であれば、以下のように鍵マークだけが表示されます。

ブラウザ上の正常な鍵マーク例

 つまり、httpsへの対応が中途半端だと、逆に不信なサイトと思われる可能性があります。又、動画等が表示されなかったり、レイアウトが崩れる可能性もあります。

 このような事から、事前準備は必須です。以下は、httpsに対応する前に行っておく作業の例です。

  1. 内部リンクのURL修正
  2.  内部リンクがhttpで記述されている場合、全てhttpsに書き換えます。但し、httpsに対応した後に書き換えないと、通信出来ないページにリンクする事になります。このため、<a href="https://example.com/test.html">ではなく、<a href="test.html">のように相対パスで記述すれば、httpでもhttpsでも対応可能になります。スタイルシート等の指定も同様です。

  3. 画像や動画のURL修正
  4.  画像や動画のURLがhttpで記述されている場合、httpsに書き換えます。内部リンクと同じように、<img src="images/test.png" alt="テスト" />というように相対パスで記述すれば、httpでもhttpsでも対応可能になります。

     外部サイトの画像や動画を表示している場合も対応が必要です。例えば、かなり以前にYouTubeの動画を表示するようにしていた場合、httpでリンクされている可能性があります。このような場合、再度URLを取得し直します。外部サイトがhttpsに対応していない場合、諦めるしかありません。

  5. ソーシャルボタン
  6.  いいねボタン等のソーシャルボタンは、かなり以前に作成したものは、httpsに対応していない可能性があります。対応していない場合、最新のコードを取得し直す必要があります。本サイトでご紹介している以下のソーシャルボタンは、最新のコードではhttpsに対応済です。

    ・いいねボタン

    ・Google+1ボタン

    ・ツイートボタン

    ・はてなブックマークボタン

  7. Googleカスタム検索
  8.  Googleカスタム検索も、かなり以前に作成したものは、httpsに対応していない可能性があります。対応していない場合、最新のコードを取得し直す必要があります。又、検索結果を別ページで表示している場合、httpsに対応した後でコントロールパネルの設定を変更する必要があります。例えば、検索結果のページをhttp://example.com/result.htmlと設定していた場合、https://example.com/result.htmlに設定し直します。詳細は、「Googleカスタム検索の設置」をご参照下さい。

  9. アフィリエイト
  10.  アフィリエイトのコードも、かなり以前に作成したものは、httpsに対応していない可能性があります。対応していない場合、最新のコードを取得し直す必要があります。本サイトでご紹介している以下のアフィリエイトは、最新のコードではhttpsに対応済です。

    ・バリューコマース

    ・A8.net

    ・リンクシェア

    ・TGアフィリエイト

    ・Google Adsense

    ・忍者AdMax

 上記は、httpsに対応する前に書き換えて大丈夫です。httpのページに、httpsに対応したコードがあっても問題ありません。

 この他にもWordPress等を使っている場合、プラグインがhttpsに対応しているか確認が必要です。

 又、httpのままでも大丈夫なものもあります。以下は、例です。

  • HTMLの最初に記述する
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • OGPを利用する時に使う
    prefix="og: http://ogp.me/ns#"
  • パンくずリストで使う
    itemtype="http://data-vocabulary.org/Breadcrumb"
  • 外部サイトへのテキストリンク
    例:<a href="http://example.com/test.html">外部サイトへのリンク</a>

 これらは、記述がhttpのままでもブラウザで正常な鍵マークが表示されます。

 尚、OGPの詳細は「「いいね!」ボタン設置とOGP」、パンくずリストの詳細は「パンくずリストの設置」をご参照下さい。

httpsへの対応

 httpsに対応するためには、サーバー証明書の取得が必要で審査があります。Let's Encryptの場合、審査は自動で行われるため数分程度で終わります。手順も簡単です。以下は、ロリポップとさくらインターネットの手順へのリンクです。

 ・ロリポップ 独自SSL(無料)のお申込み・設定方法

 ・さくらインターネット 【無料SSL】サーバコントロールパネルからの導入手順

 設定後は、数分程度でhttpsによる通信が可能になるため、正常に動作しているか確認しておきます。例えば、ブラウザのアドレス欄で今まではexample.com等と入力していた所を、https://example.com等と入力してページが表示されるか確認します。

 又、以下の観点でもチェックが必要です。

  1. スタイルシート毎のチェック
  2.  異なるスタイルシートが適用されているページがあれば、デザインが崩れていないか確認します。

  3. 画像や動画のチェック
  4.  画像や動画等が正常に表示されるか確認します。

  5. その他
  6.  アフィリエイト、ソーシャルボタン、Googleカスタム検索等が正常に表示されているか確認します。

 全てのページを確認するのが難しい場合、気になるページ(特に他と違うデザインやコンテンツがあるページ)だけでもチェックをお薦めします。

 又、OGP利用のため<meta property="og:image" content="http://example.com/images/ogp.png" />等の記述をしている場合、httpsに対応した時点で赤字部分をhttpsに書き換えておきます。

httpsへのリダイレクト

 httpsに対応しただけでは、すぐにはhttpsでアクセスされません。

 このため、httpでアクセスしてきた時に、httpsへリダイレクト(転送)するように.htaccessを作成します。このリダイレクトによって、Googleの検索結果でもhttpsで表示されるようになります。

【.htaccessを利用したhttpsへのリダイレクト】
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

 1行目は、リダイレクト等の処理を有効にする記述です。

 2行目は、httpsであれば処理しない事を示しています。httpで通信があると3行目の処理が行われます。

 3行目は、httpsにリダイレクトする事を意味しています。$1があるため、サブフォルダも含めて全てのページがリダイレクトされます。赤字部分は、自身のドメインに合わせて修正して下さい。

 上記をファイル名「.htaccess」で保存し、レンタルサーバーのトップフォルダにアップします。

 尚、URLの統一、エラーページへの転送等も行っている場合、既に.htaccessが存在し、複数の処理を記述していると思います。このような場合の追記例です。

【.htaccessを利用した複数処理記述例】
RewriteEngine On

RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ https://example.com/$1 [R=301,L]

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

ErrorDocument 403 https://example.com/error/403.html
ErrorDocument 404 https://example.com/error/404.html
ErrorDocument 500 https://example.com/error/500.html
ErrorDocument 503 https://example.com/error/503.html

 青字部分は、例えばexample.com/index.htmlでアクセスがあると、https://example.comにリダイレクトする記述です。詳細は、「.htaccessリダイレクトによるURLの統一」をご参照下さい。

 赤字部分が、今回追記する部分です。緑字部分は、エラーページへの転送です。詳細は、「.htaccessによるエラーページの作成」をご参照下さい。

 尚、青字部分も緑字部分も今までhttp://で指定していた場合、上記のようにhttps://での指定に変更する必要があります。

リダイレクト有効後の対応

 httpsへのリダイレクトを有効にした後は、以下の対応が必要です。

  1. Google Search Console
  2.  GoogleのSearch Consoleを利用している場合、httpsでのアクセスはhttpとは別に扱われます。このため、プロパティで新規登録が必要です。つまり、httpとhttpsで2つのサイトとして管理する事になります。暫くしてアクセスがなくなったら、httpの方は削除して大丈夫です。

  3. Googleアナリティクス
  4.  Googleアナリティクスを利用している場合、「管理」→「プロパティ設定」の画面で「デフォルトのURL」をhttpsで指定し直します。

  5. 外部からのリンク
  6.  自身の他サイトからリンクをしている場合、httpsにリンクを修正します。

  7. 告知
  8.  サイト等でhttpsに切り替わった事をアナウンスします。リンクしてくれている人がいれば、httpsに修正して貰う為です。

  9. 検索結果がhttpsで表示される事の確認
  10.  すぐには反映されませんが、数日してGoogle等の検索結果でもhttps側が表示されているか確認します。

 4番目の外部からのリンクは自身で修正出来ませんが、検索順位への影響は殆どありません。.htaccessによるリダイレクトにより被リンクが引き継がれているためです。

サーバー証明書の有効期限確認

 サーバー証明書は、各ブラウザの鍵マークをクリックして表示される「証明書の表示」等で詳細を確認出来ます。そこには、有効期限も表示されるため、いつまで有効か確認出来ます。

サーバー証明書の有効期間確認方法

 サーバー証明書は一般的に自動更新されますが、初回更新時は期限が近付いたら延長されているか、念のため確認した方が良いかもしれません。証明書が失効すると、ページが表示される前にブラウザで警告が表示されます。

HTMLの一括置換

 常時SSL化する際、大量のHTMLファイル書き換えが必要な場合があります。これはかなり面倒ですし、間違う可能性もあります。このような時、一括置換出来ると便利です。

 この対策として、フリーソフトの「TextSS.net」をご紹介します。

 TextSS.netは、フォルダを指定して検索文字列と置換後の文字列を入力すると、一括で置換してくれます。サブフォルダも含めて一括置換する事も出来ますし、サブフォルダを含めない事も出来ます。又、複数行を置換する事も出来ます。

 使い方は、以下です。

  1. TextSS.net.exeをクリックして起動。初期画面でサブフォルダも置換対象に含めるか選択出来ます。
  2. 「フォルダを追加」で置換するフォルダを指定。
  3. フォルダ内のファイルが表示されるため、「次へ」をクリック。
  4. 「検索する文字列」に、置換前の文字列を入力。その下にある「改行コードを置換するファイルに合わせる」にチェックを入れる。
  5. 「置換する文字列」に、置換後の文字列を入力。その下にある「改行コードを置換するファイルに合わせる」にチェックを入れる。
  6. 「次へ」をクリックした後、置換を開始する画面で置換が実行出来ます。

 置換を開始する画面では、1つ1つ確認しながら置換する事も、確認なしで全て置換する事も出来ます。「開始」をクリックすると、置換を行います。

 置換後はファイル単位で結果が表示されるため、1つしか置換しないはずなのに複数個所が置換されている、全く置換されていない等、チェックも出来ます。置換する前にバックアップもしているため、意図しない結果になった場合は、「復元」をクリックして元に戻す事も可能です。

正常な鍵マークが表示されない時の対応

 https対応した後、ブラウザで「!」マークが表示される等、正常な鍵マークが表示されない時は、一部の通信がhttpで行われている可能性があります。HTMLファイルで確認しても分からない場合、ブラウザのコンソールが役に立ちます。

 Microsoft EdgeでもFireFoxでも、Google Chromeでも、F12キーを押してコンソールを選択すると、httpの通信が行われている部分を「混在表示コンテンツ」等と表示してくれます。以下は、FireFoxでの例です。

FireFoxコンソールでの混在コンテンツ表示例

 上記画面の右に、表示しようとしているURL、HTMLの行数等も表示されるため、該当箇所を修正します。

 又、JavaScriptで画像等を表示する際、httpで指定している事もありますが、そのJavaScriptのファイル名も表示してくれます。

  • このエントリーをはてなブックマークに追加