サイトをSSL化しました

2018年11月 9日(金) 22:59 | 日記

今回の日記は、当サイト「フォーキー☆カーニバル」をSSL化した話です。

SSL化とは、ひとことで言えば通信の暗号化です。当サイトにはコメント欄や検索フォームがありますが、そこに入力した内容が、たとえ第三者に通信を傍受されたとしても知られにくくなります。
SSLに対応しているサイトは、アドレスが「http://」ではなく「https://」で始まります。多くのブラウザーでは、アドレスの前に錠前のアイコンが表示され、クリックすると「安全な接続」というメッセージが表示されます。

もともとSSLは、クレジットカード情報など他人に知られたらまずいIDやパスワードを送信する画面で使われていたのですが、近年ではウェブサイト全体をSSL化することが推奨されています。ブラウザーもその流れを後押ししていて、たとえばChromeでは、SSL化されていないサイトにアクセスすると、アドレスバーに「保護されていない通信」と表示されるようになりました。

下記のサイトにSSL化に関する詳細が載っています。

常時SSL化とは?Webサイトの常時SSL化の効果と注意点 | さくらのナレッジ

SSL化する前の当サイトのトップページにFirefoxでアクセスすると、アドレスバーには錠前に赤い打ち消し線が入ったアイコンが表示され、いかにも「危険ですよ」的なメッセージを発していたのですが、今はきちんと緑色の錠前のアイコンが表示されています。今後は当サイトを安心してにご覧いただけます。

SSL化は、ウェブサーバーやサイトそのものの仕様にもよりますが、ワンタッチでできるものではありません。いろいろと段階を踏む必要があります。
「フォーキー☆カーニバル」をSSL化したときの手順は以下のとおりでした。

(1) レンタルサーバーの設定を変更

当サイトはさくらインターネットのレンタルサーバーで運営しています。さくらインターネットのコントロールパネルに「ドメイン/SSL設定」という設定項目があり、ここでSSLの設定を行います。
当該のドメイン名(当サイトの場合は「folky.saloon.jp」)の「変更」のメニューで、「共有SSLを利用する」を選ぶだけで設定は完了します。

従来は、サイトにSSLを適用するためには専門の業者のサービスを導入する必要があって、今でもセキュリティのしっかりしたSSLを利用するためには年数万円から数十万円のサービスを契約することになるのですが、近年グーグルなどがウェブサイトの常時SSL化を強く推奨しているなどの風潮を受けて、さくらインターネットはレンタルサーバーのユーザーに無料でSSLを提供するようになりました。さくら以外の主要なレンタルサーバー会社でも同様の対応がなされているようです。

さて、これでアドレスバーに「https://folky.saloon.jp/」と打ち込めば、これまでの「フォーキー☆カーニバル」と同じ内容で、なおかつ安全な通信が可能なサイトにアクセスできるのですが、実際にアクセスしてみると、真っ白な背景に文字が無造作に並ぶ、なんとも殺風景なページが表示されました。サイトのデザインを規定するスタイルシートのファイル(CSS)が読み込まれていなかったことが原因です。
SSL化したサイトでは、セキュリティの観点から、SSL化されていない領域のファイルは読み込まない仕様となっています。

これでは困るので、サイトのHTMLを書き換えてあげる必要があります。

(2) 各ページで読み込む外部ファイルもすべて「https」にする

サイト上で読み込む画像ファイルや、CSSやJavaScriptなどのファイルも、SSLに対応させる必要があります。
通常のHTMLであれば、全ファイルを一括置換で「http://folky.saloon.jp」を「https://folky.saloon.jp」に変換すればいいのですが、当サイトはMovable Type(MT)というシステムを使ってHTMLファイルを生成する仕組みなので、MTの管理画面で設定を変更する必要があります。

結論から言うと、3つの手順だけですみました。
1点めは、MTの管理画面で「ウェブサイト」のURLの設定を「https」に変更すること。変更して再構築をかければ、全ページのCSSやJSなどのファイルのリンク先も「https」になります。
ただこれには前提条件があって、各テンプレートの該当箇所が<$mt:BlogURL$>というMTの内部のタグで書かれている場合に限ります。タグではなくリンク先のURLを直接打ち込んでいる場合は、テンプレートを手動で直接編集するか、テンプレートで一括置換をかける必要があります。

2点めは、「mt-config.cgi」という設定ファイルを直接編集すること。CGIなどのアドレスについて、「http」を「https」に変更するだけです。

上記2点の対応だけでは、画像のリンクは「http」のままです。そこで最後の3点めとして、画像のリンクは記事ページの一括置換で、すべてのページを「https」に変更します。ついでにサイト内リンクのアドレスも「https」に変更してしまいます。当サイトには3000本以上の記事がありますが、一括置換は管理画面から簡単に行えて、時間も1分程度で完了しました。

これで、全ページが無事にSSL化されました。

(3) 「http://」へのアクセスを「https://」にリダイレクトさせる

SSL化されたサイトが正常に動くことを確認したところで、今後は「http://folky.saloon.jp/*」へのアクセスはすべて自動的に「https://folky.saloon.jp/*」に遷移させるようにします。
その方法は、サーバー内の「.htaccess」というファイルに記述を加えるというもの。ここでその詳細は説明しませんが、「httpsに301リダイレクト」でインターネットを検索すると、やり方が書かれたサイトが見つかると思います。

SSL化の手順は以上です。

SSL化のついでに、PC版のサイトの横幅を少し広げたり、スマホ版のサイトで記事本文の文字を大きくしたりと、デザインの調整もしました。
当サイトをレスポンシブに対応させたのが今からちょうど5年前ですが、当時設定したフォントサイズが、今のスマホの解像度では相対的に小さく見えるようになりました。

当サイトがスマートフォンに対応しました(2013年11月14日)

もとからレスポンシブ対応のデザインテンプレートがあったわけではなく、すべて手作り。我ながらうまくできたと今でも思っています。

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。