ブログ初心者が、サイトの常時SSL化をしてみた。うまくいかなかった点を中心に解説【ブログ歴1か月未満】

セキュリティー
スポンサーリンク

はじめに

この記事では、WordPress(ワードプレス)で作成したブログサイトを常時SSL化(https化)する手順について、筆者がつまずいた箇所を中心に解説する。

ブログを開設して、もうすぐ1か月が経つ。この記事が、ようやく記念すべき10記事目だ。 そこで、記事数が本格的に多くなる前に、このブログサイトも常時SSL化しておこうと思った。

なお、SSLについての詳しい解説は以下の記事を参考にしていただきたい。

ざっくり言うと、SSL化をすることでURLの先頭が「http://」から「https://」に変わり、通信が暗号化されて安全になる。上のリンクもhttps://で始まっているので、SSL化されていることがわかる。

常時SSL化のざっくりした手順

筆者は、以下の4つの手順でブログサイトの常時SSL化を行った。サーバーはエックスサーバーでレンタルし、CMSはWordpress(テーマはCocoon)を使用している。SSL化のチェックには、GoogleChromeを使用した。

➀サーバー側でSSL証明書を導入

②WordpressでURLを変更

③リダイレクト設定

④テーマ(Cocoon)設定

➀~③は初心者でも簡単に設定できると思う。実際に、ブログ歴1か月未満の筆者でもすんなりと設定できた。

だがしかし、④がクセモノだった。以下では、④に重点を置きつつ、➀~④の詳細な説明をしていく。

常時SSL化の詳細な手順

➀サーバー側でSSL証明書を導入

これは、非常に簡単だ。Wordpressのサーバー管理画面でポチポチしていけば良い。

まず、サーバーパネルにログインし、「設定対象ドメイン」でSSL化したいドメインを選択する。その後、「SSL設定」をクリックする。

「独自SSL設定追加」タブをクリックし、SSL化したいサイトのドメインを選択する。

※筆者の場合、「すでに独自SSLが設定されています。」と表示が出たため、この設定は行っていない。おそらくサーバーをレンタルする際に、独自SSL追加のチェックを入れていたのだと思う。

設定が反映されれば、httpsから始まるURLでサイトにアクセスすることができるようになる。

②WordPressでURLを変更

設定で「WordPressアドレス(URL)」と「サイトアドレス(URL)」の先頭を、httpからhttpsに変更する。

その後、ページ一番下の「変更を保存」を押して、設定を反映させる。筆者の場合、直後に自動的にログアウトされたため、再度ログインし、きちんと変更が保存されているかどうか確かめた。

③リダイレクト設定

次に、リダイレクト設定を行う。リダイレクト設定を行うことで、httpでアクセスしてきたユーザーをhttpsのページに転送してあげることができる。つまり、全てのアクセスをhttpsのページに集約することができる。

まず、サーバーパネルの「.htaccess編集」をクリックする。

ドメイン選択画面が現れるので、リダイレクト設定したいドメインを選択する。

「.htaccess編集」タブをクリックすると、編集画面が現れる。

まず初めに、現時点の設定のバックアップを取っておく。編集に失敗したときに元の状態に戻せるようにするためだ。やり方は、.htaccessの内容を全てコピーし、メモ帳に張り付けておくなどで良い。

次に、「# BEGIN WordPress」の上に、以下の3行を追加する。

RewriteEngine On

RewriteCond %{HTTPS} !on

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

「確認画面へ進む」をクリックしていくと、「編集が完了しました。」のメッセージが出る。

これでリダイレクト設定は完了である。

試しにhttpで自分のサイトにアクセスしてみると良い。アドレスバーのURLが自動的にhttpsから始まるものに変われば、設定がうまくいったことがわかる。

④テーマ(Cocoon)設定

ここが、筆者が最もつまずいた設定である。つまずいた理由は以下の2つだ。

1. Webサイトのコードを理解していないから

以下は本ブログについて、Google Chromeで「ページのソースを表示」した結果の一部である。

御覧の通り、httpやhttpsがソースコードのいたるところに書かれていた。WordPressという便利なツールを使用しているため、普段はコードの中身などまるで意識していなかった。したがって、自分のサイトのコード内でhttpが使われていることに気づけなかった。

2. 参考にした記事が、Cocoon(WordPressのテーマ)の使用を前提に書かれていなかった。

後で詳しく解説するが、今回筆者がつまずいた項目はどれもCocoonの設定だった。筆者が参考にした記事は、Cocoonの使用を前提に書かれていないため、当然Cocoonの設定についても言及していない。下調べも完璧だし、すんなりノーミスで行けるぞ!と意気込んでいたがそうでもなかったのである。

.htaccessの編集も完了し、ブログのトップページへアクセスすると、以下のようにURLの左に鍵マークがついていた。つまり、SSL化は成功した。

が、これはトップページだけだった。

個別記事ページを見てみると、鍵マークではなくiマークがついていた。

iマークをクリックしてみると、「情報、または保護されていない通信」と表示された。やはり、まだSSL化はされていないのである。

調べるうちに、「Cocoon設定 > その他 > 簡易SSL対応」で内部URLをSSL対応(簡易版)にチェックを入れればいいことがわかった。

チェックを入れて設定を保存したが、やはり鍵マークはつかなかった。

そこで、キーボードの「Ctrl」と「F12」を同時押ししてデベロッパーツールを開くと、「Mixed Content」という文字が。内容を見ると、「画像もhttpsで表示しなさい」と書かれている。

「screenshot.jpg」や「no-amp-logo.png」あたりをググって調べてみると、Cocoon設定でAMPとOGPの設定を変更すれば良いことがわかった。たしかに、設定画面を開いてみると「http」で設定されていた。

それぞれhttp→httpsに変更すると、「Mixed Content」の文言が消えた。

個別ブログ記事を見てみると、無事鍵マークが付いていることを確認できた。めでたしめでたし。

まとめ

サイトの常時SSL化は、セキュリティの観点からブログ読者にとっても、ブログ運営者にとっても非常に重要だ。本記事では、ブログ歴1か月未満の筆者が、記事数9の段階でサイトの常時SSL化を行った過程をまとめた。

常時SSL化は以下の4ステップで実現可能だ。

➀サーバー側でSSL証明書を導入

②WordpressでURLを変更

③リダイレクト設定

④テーマ(Cocoon)設定

➀~③まではすんなりと進めることができた。④で意外にもつまずいてしまったので、この記事がWordPressでCocoonのテーマを使用している方の参考になればと思う。

コメント

タイトルとURLをコピーしました