WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ウェブデザイン技能検定2級学科試験対策、過去問題(平成28年第1回)解説その3
HOME
次の記事:サイトマップをGoogle Search Consoleに登録【WordPress編】

WebサイトのSSL化(HTTPS化)について

Web知識

 

サイトのSSL化とは

 

SSL(Secure Sockets Layer)やTLS(Transport Layer Security)は、インターネット通信を暗号化する技術です(特に深い理由はありませんが以降TLSの言葉は省いて説明します)。

SSLにはサーバ証明書を使い、サーバ側の成り済ましを防ぐ仕組みもあります。SSL化されていないサイトの通信は、盗聴、改竄される恐れがあるので、個人情報の入力を促すページなどがあればサイトのSSL化が必須となります。

一般のブログでもコメント欄やSNS連携でデータをやり取りする機会は多いので、導入する意味がないという事はありません。Webサイトの常時SSL化はGoogleも推しすすめており、SSL化はSEOにも僅かながら優位に働きます。

SSL化されたサイトのアドレスはhttpsから始まり、ブラウザのアドレスバーに鍵マークが表示されるなどします。

アドレスバー鍵マークあり

 

 

サーバ証明書の取得

 

SSL化にはそのサイトが信頼出来るサイトである事を伝える電子証明書が必要です。この証明書をサーバ証明書といいます。

サーバ証明書は種類によって信頼性の強さが変わり、主に3つに分類されます。サーバ証明書の発行、更新に掛かる料金は、基本的に審査が厳しいものほど割高となります。

 

  • ドメイン認証SSL証明書… 安価で、最低限のサイト所有権の確認しか行いません。
  • 企業実在(組織)認証SSL証明書… 一般企業向けです。実在する企業であるかの確認があります。
  • 強化認証(EV)SSL証明書… 銀行など強いセキュリティを必要とするサイト用の証明書です。発行までに厳格な審査があります。

 

強化認証(EV)SSL証明書が信頼性としては一番強くなります。こちらの証明書を使用したサイトを閲覧する時、ブラウザのアドレスバーが緑色になります(ブラウザ毎に違いがあります、図はIE)。

アドレスバー緑色

 

信頼性の強さとはあくまでサーバ証明書そのものについての話であり、暗号化通信の強度に違いはありません。また、詐欺目的といった悪意のあるサイトでもサーバ証明書を用意してSSL化する事は難しくなく、SSL化しているサイト=安全なサイトではないので注意してください。

 

一通り説明が終わったところで、私のサイトもSSL化してみようと思います。

私は今後ユーザー入力を受け付けるアプリケーションなどもサイトで公開する予定なのでSSL化しますが、よく分からなければ現状無理にサイトをSSL化する必要はないと思います。後述しますが、ある程度の理解が無ければサイトをSSL化しても意味のないものとなってしまうので。

 

 

SSLの基本設定

 

まずはサーバ証明書を取得・・・という流れになるはずでしたが、私の契約しているXserverでサーバ証明書取得からSSL化対応までを代行してくれるサービスがありました。サーバ証明書の取得も含めて一切の料金が掛かりませんでした(更新料も無し)。勉強にはなりませんが、こんなお得なサービスが利用出来るのであれば使わない手はありません。

※調べてみるとサーバ証明書発行元のLet’s Encryptという団体が、無償でサーバ証明書を発行しているとの事でした。

 

自力でSSLの設定を行う場合はこちらのサイトの説明が参考になりそうです。

参考リンク: 【簡単5ステップ!SSL導入】Rapid SSLの導入・設定してみた!

 

 

htaccessファイルでリダイレクト設定

 

※WordPressはインストール時点でhtaccessファイルが生成されています。既にある内容を上書きしてしまわないように注意しましょう。※編集、アップロードする際は、必ずバックアップを取ってから行ってください。

Xserverの代行サービスに手続きを任せ、しばらく時間が経つとhttpsアドレス入力でサイトが表示されるようになりました。

しかし、この状態だとhttpアドレスでもhttpsアドレスでもサイトにアクセス出来てしまいます。サイトが二つに分かれた状態といってもいいでしょう。そこで、httpアドレスにアクセスがあった時、httpsアドレスのサイトへリダイレクト(転移)するようhtaccessファイルの設定を行います。なお、サーバ管理者がhtaccessファイルを使用出来ない設定にしている場合、この方法は実現出来ません。

htaccessファイルとはApacheの設定ファイルの一つです。

 

Apacheとは?

Webサーバを運用するにもソフトウェアが必要になるわけですが、Apacheは世界規模で普及しているサーバ側で処理を行うソフトウェアです。故に、Apacheでないソフトウェアを導入しているサーバに対しては別の設定が必要になります。

しかし現状ほとんどのサーバがApacheを採用しており、私の利用しているXserverでもApacheが使われているので、別のサーバソフトウェアのリダイレクト設定については割愛させていただきます。

 

htaccessファイルのファイル名は拡張子だけにします。→ .htaccess

文字コードはUTF-8のBOM無し(ファイル内容の先頭に空白文字を付けない)UTF-8Nを選択。改行コードは利用しているサーバのOSに適したものを選択します。Xserverで使われているLinuxであればLFを選択します。

ファイル内容の最後に改行を入れないと動作しない事があるらしいので、以下のコードを記述した後に改行を入れて.htaccessを作成します。

 

 

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://rarecard.jp/$1 [R=301,L]
</IfModule>

ApacheでリダイレクトやURLの書き換えを行う機能がmod_rewriteです。サーバの設定によってはmod_rewriteが使用出来ない事もあります。

<IfModule mod_rewrite.c></IfModule>で囲ってある内容は、mod_rewriteが使用出来る場合に処理されます。

 

RewriteEngine on

mod_rewriteを有効にする記述です。

 

RewriteCond %{HTTPS} off

【RewriteCond %{変数名} オプション】の記述でRewiteRule適用の条件を設定します。

HTTPSはApacheが用意した変数の一つで、オプションでoffを設定すると【HTTPS(SSL)ではない時】という条件になります。

 

RewriteRule ^(.*)$ https://rarecard.jp/$1 [R=301,L]

リダイレクトする場合、【RewriteRule (置き換え対象URL) (置き換え後URL) [R]】の形で記述します。rarecard.jpは私のドメインなので、この部分をご自身のドメインに書き換えてください。

置き換え対象URLは正規表現を使い、 ^(行の先頭)から$(行末)まで.(改行コード以外の文字)が*(繰り返される)としており、つまり「あらゆるURL」を対象にしています。正規表現で検索対象になるのはhtaccessファイルが置かれたディレクトリ(今回はルートディレクトリに上げたのでrarecard.jp/)から先のURLです。

$1にはカッコで括られた正規表現にマッチした文字列が代入されます。つまり、https://rarecard.jp/アクセスのあったファイルのパスを置き換え後URLとして設定しています。

リダイレクト命令には301ステータスコードを設定しています。httpアドレスとhttpsアドレスは別サイト扱いとなりますが、この設定はhttpアドレスが恒久的に移動した事をクローラに伝え、サイト評価をhttpsアドレスのサイトに反映させる事が出来ます。長くhttpアドレスで続けたブログをSSL化するといった時には特に必要な設定です。

Lは処理の終了を意味します。

 

RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

検索では先の記述方法が多くヒットしましたが、同様の処理を行うものとしてこのような記述もあります。

 

 

準備が出来たら.htaccessをファイル転送ソフトでサーバにアップロードします(Xserverであればブラウザ上からhtaccessファイルの書き換えが出来ますが)。

.htaccessをルートディレクトリに置けば、サーバ内の全てのファイルのアクセスに対してhttpsアドレスへのリダイレクトが行われます。

しかし、WordPressをサブディレクトリに置いて運用している場合(私はWordPressをrarecard.jp/blog/にインストールしていますが、/blog/部分がサブディレクトリです)、既にあるWordPressのhtaccessファイルにリダイレクト設定の記述がないので、このブログにはhttpアドレスでアクセス出来てしまいます。

 

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://rarecard.jp/blog/$1 [R=301,L]
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>

# END WordPress

 

元からあった記述の上に、先ほどのコードを記述して.htaccessを保存します。※サブディレクトリにアップロードする.htaccessなので、RewriteRuleの置き換え後URLにサブディレクトリの記述を追加しています。このファイルをサブディレクトリにアップロード(上書き)して完了です。

このあと今までのブックマークからログイン出来なくなる可能性があります。そのようになった場合は、https://ドメイン名/wp-login.phpがあなたのブログのログイン画面となるので、アクセスし直してみましょう。

https://ドメイン名/wp/wp-login.phpのように、フォルダの下にログイン制御ファイルが置かれている可能性もあります。

 

 

ブラウザに安全なサイトである事を認識させる

 

Firefox注意マークあり

SSL化の設定を終え、httpsアドレスでサイトにアクセスしても、ブラウザのアドレスバーに鍵マークが表示されなかったり、鍵マークと一緒に注意マークが表示される事があります(図はFirefox)。これはサイト内の読み取りファイルにhttpアドレスのリンクが存在している事で、ブラウザが安全な通信を保障出来ないと判断している為です。

 

リンク表記はスキーム名を省略

スキーム名とはサイトアドレスのhttp:やhttps:部分です。スキーム名を省略してリンクを貼っても、アクセスの際SSLに対応していればhttpsアドレス、していなければhttpアドレスといった感じで振り分けが行われます。

 

<a href="//rarecard.jp/blog">レアカードのWebデザイン日記<a>

画像のパス指定なども同様にスキーム名を省略して記述します。違和感があるかもしれませんが、この記述はGoogleが推奨しているコーディングルールの一つです。※注意点があります。作業前にこの項を最後までしっかりお読みください。

 

サイト内のリンクを地道に手作業で修正する方法もありますが、可能なら記事が格納されているデータベースで記述の置き換え処理を行ってもいいですし、WordPressであれば記述の置き換えを行うプラグインを利用する手もあります。※この手のプラグインを利用する場合は実行前に必ずバックアップをとっておきましょう。

参考リンク: 記事が格納されているデータベースで記述の置き換え処理

WordPressプラグイン: Search Regex

 

 

WordPress一般設定

SSL化したWordPressでは、ダッシュボード/設定/一般から、サイトアドレスをhttpsのものに変更します。こちらを設定しないと読み取られる各ファイルのパスがhttpアドレスのものになってしまいます。

 

 

Firefoxアドレスバー注意マークなし

修正作業を終えるとアドレスバーから注意マークが消え、しっかり鍵マークだけが表示されるようになりました。

 

修正作業を終えても注意マークが消えない場合、ブラウザがSSL化前のJavaScriptファイルやCSSファイルをキャッシュしてそれを参照している可能性があります。ブラウザでページのソースを確認して、httpアドレスのリンクがないか確認してみましょう。

 

重要

実際にSSLを導入してから分かった事ですが、SSL化した自分のサイトから、スキームを省略してリンクを貼った非SSLのサイトに遷移する際、どのブラウザでも遷移前に「このサイトは安全ではない」と表示されるようになりました。

Opera注意文

このようなメッセージが表示されて、【取りあえず続行する】ボタンを押すユーザーは居ないでしょう。

検証すると、ブラウザに警告が出るのは自分のサイトで呼び出すファイルにhttpアドレスが含まれていた場合で、外部サイトのリンクはhttpアドレスを設定しても警告は出ませんでした。外部サイトの説明がないと成り立たない記事などでは、httpアドレスを指定したリンクを残しておいた方がいいと思います。私はスキームを省略していた非SSLサイトのリンクをhttpアドレスに貼り直しました。

 

 

サイトのSSL化を終えたらやるべき事

 

アクセス解析サービスなどを利用している場合、サービスに登録されているURLをhttpアドレスからhttpsアドレスに変更する必要があります。

検索サイトへ提供するサイトマップもhttpsアドレスで登録し直す必要があります(サイトマップ登録はまた別の機会に記事にします)。

アプリなどでCookieを使う場合は、Secure属性を設定して暗号化通信に適したものにします。

 

 

SSL化によるページ表示速度の変化

 

暗号化通信なので、SSL化する前と後とではページの表示速度に差は出ます。しかし通信が大きく遅延するような事は現環境ではほぼ起こらず、その差は微々たるものという認識でいいようです。SSLに対応した通信法で有能なものがあり、環境によっては遅れるどころかページの表示速度が向上するとの事でした。

このブログをSSL化する前と後とで、ページの表示速度にどれだけ違いがあるかを検証しました。

利用サイト: PageSpeed Insights

 

  • パソコン71 → 70
  • モバイル69 → 65

 

パソコンは問題ないようですが、モバイルの数字の落ち方が少し気になりますね。実機によってまた違ってくるのでしょうけど。画像サイズをもっと落とした方がいいという評価が並んでいたので、とりあえずはそうしていきたいと思います。

 

 

SSL化のメリット・デメリットまとめ

 

メリット

  • サイトの信頼性が上がる
  • 比較的安全に通信が行える
  • SEOに若干有利

 

デメリット

  • 基本的に費用が掛かる
  • 各設定が面倒、サーバによっては設定出来ない事もある
  • SSL化サイトから非SSLサイトにアセクスする際リファラ(リンク元情報)が渡されない(※1)
  • SSLに対応していないツールや広告が非表示になる(ブログ収益の減少)
  • SNSボタンのカウントがリセットされる(※2)

※1… 逆アクセスランキングの構成によってはアクセスポイントが入らないといった事が起こる可能性。
※2… それ専用のプラグインで元に戻せる事もあるようです。あるいは自身の手でSNSボタン関連のプラグインの中身をいじるか。

 

素人目で見ると、現状趣味のサイトがSSL化するのはデメリットの方が大きい気がします。しかし、「数年後にはほとんどのサイトがSSL化している」というのがトップエンジニアの見解です。

既存のサイトがSSL化を先送りにするのはいいとして、これからサイト立ち上げを考えている、もしくはサイトを立ち上げたばかりという方は、あとで後悔しないようにSSL化するか否か存分に悩んで決めた方がいいと思います。

 

||

0件のコメント

コメント

カテゴリ

月別アーカイブ