Chrome68 SSL警告対応 – WordPress 常時SSL設定その① SSL接続設定

スポンサーリンク

なめろうです!

今回はサイトの常時SSL設定についての話しです。

本ブログのURLですが https://dotanba.net となっています。

“https;/〜” ではなく “http;/〜” で始まっています。つまりSSL未対応って事ですね。

2018/7/15 の時点で 常時SSL化対応が完了しており 現在 “https://〜” となっております

今どき、サイト閲覧者のセキュリティ、サイトの信頼性、そして世間の趨勢などを考えると常時SSL化が望ましいことはわかっておりました。

わかってはおりましたが、本サイトでもSSL化は棚上げされたまま2年ほど過ぎてしまいました。

閑話休題

2018年2月8日(火) Google から Chrome の次のメジャーバージョンである Chrome68 について以下アナウンスがありました。

For the past several years, we’ve moved toward a more secure web by strongly advocating that sites adopt HTTPS encryption. And within the last year, we’ve also helped users understand that HTTP sites are not secure by gradually marking a larger subset of HTTP pages as “not secure”. Beginning in July 2018 with the release of Chrome 68, Chrome will mark all HTTP sites as “not secure”.
引用 : Chromium Blog A secure web is here to stay

最後の一文ですが

Chrome 68のリリースで2018年7月から、ChromeはすべてのHTTPサイトを「セキュリティで保護されていない」と警告します。

ファ!もう7月やん!

噂ですが Chrome 68 のリリース予定日は 7月25日の様子… もう日がない…

現在 Chrome でみるとこのような状況ですが

site-ssl02

7月25日以後 Chrome のSSL非対応サイトの場合、アドレスバーの表記が以下のように変わってしまいます。

site-ssl01

出展 : Chromium Blog A secure web is here to stay

Not secure – セキュリティで保護されていない

なんてこった!

Web ブラウザでの Chrome のシェアは、日本国内で37%に達しようとしています。

40%近いブラウザでセキュリティで保護されていない」と表示されるのですから、もうめんどくさいなんて言っていられません。

重い腰をあげてサイトのSSL化に着手することにしました!

XSERVER での常時SSL設定について

サイトのSSL化には、通常サーバ証明書を認証局に発行してもらう必要があります。証明書は一般的に1年契約で使用料金が発生します。

こちらをみていただければわかりますが、それなりのお値段がするものです。( なお “Let’s Encrypt” など無料の認証局もあるようです )

幸いにも、本ブログ “ドタンバ!” は、XSERVER を試用しております。

XSERVER では無料で使用でき、しかも無制限に利用可能な独自SSLサービスを提供しています。

本記事で詳しく説明しますが、ユーザに優しい簡単設定が可能です。

可能であれば WordPress を導入する前に常時SSL設定にしておけば、その後のブログ運用で悩む必要はありません。。

ドタンバ!“のブログ開設時 ( 2016年3月 ) は XSERVER で無料の独自SSLサービスの提供がなかったんですよね…

いまXSERVER では10日の無料お試し期間を設定しています。


これから XSERVER でブログを始める人はいろいろお得です。

常時SSL化までの大まかな流れ

XSERVER 前提となりますが、サイトの常時SSL化の設定は2段階に分けられます。

  1. XSERVER でのSSL設定および、サイト ( WordPress ) 内でのSSL設定
  2. 記事内リンクの見直し・修正、外部サービスの再登録

実は “❶” は数時間で終了しますが、”❷” は記事数にもよりますがなかなか手間がかかる作業です。

今回は ” ❶ XSERVER でのSSL設定および、ブログ ( WordPress ) 内でのSSL設定” についてまず説明をして行きたいと思います。

今回の作業

” 1. XSERVER でのSSL設定および、ブログ ( WordPress ) 内でのSSL設定” は、さらに以下4ステップとなります。

  1. ブログ ( WordPress ) のバックアップ
  2. XSERVER での常時SSL設定を行う
  3. WordPress のURL設定変更
  4. リダイレクト用のコードの追加 ( .htaccess 修正 )
これからブログを始める場合は ❷ ❸ ❹ を行ってください。

では、次の章から実際にSSL化を実施したいと思います。

ブログ ( WordPress ) のバックアップ

SSL化を行う前に、ブログ ( WordPress ) のバックアップを取りましょう。

もし、何か問題が発生した場合、最悪バックアップから復旧することが可能です。

そして、バックアップは XSERVER 上から簡単に取ることが可能です。

データベースのバックアップ

まずデータベースのバックアップを取りましょう。

XSERVER サーバパネルにログインした状態から説明します。

サーバパネルはこんな感じ。

site-ssl0205

データベースにあるMySQLバックアップをクリック。

site-ssl03

バックアップ対象のデータベースを選択し、gz形式での圧縮を選択します。

「エクスポート実行」をクリックします。

site-ssl04

以下の画面が表示されれば、すぐにダウンロードが開始されますが、しばらくダウンロードがされないようでしたら「ダウンロードする」をクリックしましょう。

スポンサーリンク

site-ssl05

なめろうの場合は、1分程度で完了しました。

site-ssl06

WordPress ファイルのバックアップ

続いて WordPress を構成するファイルのバックアップを行います。

XSERVER サーバパネルに戻り、アカウントにあるバックアップをクリック。

site-ssl07

バックアップ対象ドメイン名の横にある「ダウンロード」をクリックします。

site-ssl08

なめろうの場合、このダウンロードにやく2時間ほどかかりました。気長に待ちましょう。

ダウンロードが完了すると、3.29GBありました。デカい。

site-ssl09

以上でバックアップは完了です。

XSERVER でのSSL設定を行う

ここからがいよいよ本作業。特に難しいことはありません。

XSERVER サーバパネルから行います。

ここからは、以下のように設定対象ドメインを指定してから行った方が良いと思います。

site-ssl10

ドメインよりSSL設定を選択します。

site-ssl11

独自SSL設定の追加タブを選択します。

site-ssl12

いよいよ、SSLを設定します。

対象ドメインを確認しますと表記に “www” がついて www.dotanba.net となっていますがこれで問題ありません。

また、CSR情報を入力するのチェックは不要です。

「独自SSL設定を追加する(確定)」をクリックしましょう。

スポンサーリンク

site-ssl13

まず、このメッセージが表示されます。

site-ssl14

続いて以下メッセージが表示されればひとまずOK。

site-ssl15

SSLの設定一覧タブを確認すると、以下の通り https://〜 と変更されているのが確認できました。

site-ssl16

これで一安心。

ですが、この直後ではまだSSLは反映されておらず、Chrome で確認すると以下のように表示されます。

site-ssl17

これはしばらくすると、以下のように正常に表示されます。( 1時間ほどかかることもあります )

site-ssl17

SSLでアクセスできていますね。次に進みます。

WordPressでの設定変更

続いて WordPress 内での URL 設定の変更します。

WordPress 管理画面より [設定]->[一般]を選択します。

「WordPressアドレス(URL)」「サイトアドレス(URL)」それぞれ以下の様に、、https://〜 に変更します。

site-ssl19

変更したら、画面を下にスクロールし「変更を保存」をクリックしましょう。

リダイレクト用のコードの設定 ( .htaccess 修正 )

次に Webサーバの設定となります。

“http://〜” でアクセスしたとしても自動的に “https://〜” にリダイレクト ( 転送 ) するための設定を行います。

そのためにWebサーバの設定ファイル “.htaccess ” にリダイレクト用の記述を追記します。

これには、以下3つの方法があります。

  1. FTP経由でパソコンにダウンロードした “.htaccess ” をエディターで編集しサーバにアップロードする
  2. Terminal ソフトを用いて サーバにログインし、直接サーバ内で “.htaccess ” を編集する
  3. XSERVER の サーバパネルより “.htaccess ” を編集する

もちろん 「3. XSERVER の サーバパネルより “.htaccess ” を編集する」がもっとも簡単で確実ですので、この方法で説明します。

もういちどサーバパネルを見てみましょう。

site-ssl0205

ホームページより .htaccess編集 をクリックします。

site-ssl20

.htaccess編集タブ をクリックします。

site-ssl21

このようにコードが表示され編集が可能となります

以下の通り “#BEGIN WordPress” の前に定義を追加していきます。

通常は上4行は XSERVER 以外では記載がないはずです。その場合は最上部に追加してください
site-ssl22-3

通常は以下のコードを追記すれば良いと思います。

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

以下のように追記します。

site-ssl23
そうしますと同じような画面が表示されますが、確認画面です。

念のために、追記内容を確認して「.htaccessを編集する(確定)」をクリックします。

site-ssl24

以下画面が表示されればOK。

site-ssl25-1

スポンサーリンク

Chrome でもう一度見てみよう

今回の作業はここまでですが、もう一度 Chrome でみて見ましょう。

… は?何も変わっていない。

site-ssl26

なぬ?

site-ssl27

そうなんです。サーバーやWordPressの設定だけではダメで。記事中の内部リンクのURLに一つでも “http://〜” が残っていると安全なサイトと見なされません。

ここからが先に述べました次の「 2.記事内リンクの見直し・修正、外部サービスの再登録 」で行う作業となります。

まとめ

正直ここまでで作業は1/3と言ったところでしょうか?

SSLの導入やサーバ、そして WordPress 設定まで機械的に簡単にできたと思います。

大変なのは、次からの作業です。記事内の URL 内部や、外部URLに一つでも http://〜 が残っていると安全なサイトと見なされません。

Search Regex などの置換ツールや Chorme などブラウザの機能で状況を確認しながらシラミ潰しに対応するしかないんですよね…

これは、明日以後対応していきたいと思います。もちろん、対応方法についても記載するようにします。

なめろうでした!

2018.7.14 追記

本記事の続きとして、以下Google Search Console と アナリティクス の設定について投稿いたしました。

Chrome68 SSL警告対応 - WordPress 常時SSL設定その② Google Search Console & Analytics

2018.07.14

ご参考まで。

保存保存

保存保存

保存保存

スポンサーリンク

ボタンをクリックして記事をシェア! ¶(⁄•˅̮•∖)⁋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)