エックスサーバー「無料独自SSL」常時SSL化の設定方法と作業記録

SPONSORED LINK

当サイトでAOSSL(常時SSL)対応しました。
2017年4月時点でエックスサーバー(Xserver)でWordpressを運営していますが、SSLはエックスサーバーの「無料独自SSL」を使って行いました。

SSL対応をしたサイトでは通常http://~で始まるプロトコルがhttps://~になります。
このサイトもURLの部分を見て頂くと分かりますがこれまでhttp://~だったのがhttps://~になり、鍵マークが表示されていると思います。

作業的にはSSL化自体は簡単に設定出来ますが、その後の混在コンテンツの修正やチェックが大変でした。
簡単ですがSSL対応の作業内容を記録します。


SPONSORED LINK

SSL化の潮流とSSL化の理由

SSL通信は従来からあったが、それは銀行やクレジットカードなどを扱う高度にセキュリティや暗号化を要する通信に限られていた。
通常のサイトやブログでSSL通信を行うことは必要とされていなかったが、Googleが検索アルゴリズムにSSL対応されているサイトを優遇するとしたことからSSL通信の対応がクローズアップされ潮流が変わることになる。

HTTPS をランキング シグナルに使用します
セキュリティは Google の最優先事項です。Google は、 デフォルトで強力な HTTPS 暗号化を導入する など、業界でも最先端のセキュリティを Google サービスに導入する...

昨年2016年にYahoo!JapanがAOSSL対応を発表したこともあり、日本の国内WEBサービスでもSSL化がスタンダードとなることが顕在化した。
個人サイトや個人ブログのレベルでも今後はSSL化が求められるといえる。

そういう背景がある中で、このサイトも2月10日にWordpressに移行して今週で2ヶ月となり、有料テーマも導入して2週間経過して安定してきたため、SSL化を行おうと思った。
今後投稿記事が増えると、混在コンテンツ(mixed content) が出た場合の修正や記事のチェック数が増えてしまうため、記事数が増える前に対応したかったということもある。

SSL化の参考記事

エックスサーバーでWordpressを運営しているブログで、SSL化をした方法を掲載しているものでも特に詳しく書かれていた寝ログ様を参考に作業を行った。
寝ログ様はWordpressのテーマSimplicityの開発者であり、著名なテーマの開発者の方の記事はやはり分かりやすい。

寝ログ

WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
XSERVERで常時SSLが無料なので、WordpressサイトをHTTPS化したときに行った全ての手順をまとめてみました。

エックスサーバーの独自SSL

エックスサーバーではSSL化のプランを提供しており、無料独自SSLとオプション独自SSLの二つやり方がある。
調べた所、無料独自SSLで問題なさそうだった。

オプション独自SSLの場合は、SSL対応会社によるサーバ証明書やSSL証明書がサイトに貼れるメリットがあり、アクセスしてきたユーザにサイトのセキュリティ対策をしていると知らせることが出来る。
これは企業などではサイトの信頼につながるためログインIDやパスワードを入力するサイトやクレジットカードの情報をやり取りするサイトでは必須といっていいだろう。
が、個人サイトや個人ブログでここまでの対応する必要はまずないだろう。

SSL化作業

常時SSL化にあたって必要な作業は幾つかあるが、最も面倒なのはサイトの内部ファイル(PHPやCSS)、投稿記事に設定しているIMGタグや動画のスクリプトに設定されているプロトコル部分を全てhttps://にしなければいけない点にある。
サイトをSSL化しても、サイトや投稿記事にhttp://のリンクが残っていると混在コンテンツとなり、ブラウザに鍵マークが出ず常時SSLとは呼べない。
折角SSL化するなら鍵マークの表示までやりたい所だ。
SSL化の方法は上記の参考記事を見てもらうといいと思う。
今回は参考記事のやり方をそのまま行ったため、この記事では詳しい内容は省かせてもらうが、概要だけ書くと以下のような手順でSSL化している。

事前作業

主に作業前のバックアップを行う。

  • 投稿記事や固定ページのバックアップ
    WordPressの管理画面からツール→エクスポートでバックアップ
  • PHP、CSSなどのバックアップ
    FFFTPでエックスサーバーのホストに接続し、テーマのフォルダごとPCローカルにダウンロードしてバックアップ取得
  • WordPressデータベースバックアップ
    プラグインBackWPupを使用してバックアップ

エックスサーバーでSSL化設定

エックスサーバーのサーバーパネルの機能で自分のドメインに対してSSL化の設定を行う。

サーバーパネルのSSL設定を押す。

SSL化するドメインを選択する。

独自SSL設定の追加タブで「独自SSL設定を追加する(確定)」を押す。CSR情報の部分はチェックなしで良い。

独自SSL設定の追加をした。

SSL設定の一覧タブでサイトがSSL用アドレスになっていることを確認。

設定後、反映までに30分から1時間程度かかるので待つ。
その間、ブラウザでサイトを見ると一時的にエラーになる。これが気になる場合は、アクセスが少ない時間帯に作業をする方がいいだろう。

Firefoxで接続したときの画面

IEで接続したときの画面

今回は30分後にサイトの鍵マークが緑色になった。
が、これはトップページに混在コンテンツがないというだけなので、この後内部リンクを「Search Regex」で修正後、全記事をチェックして混在コンテンツがあれば修正しなければならない。

WordPressの管理画面でhttps://にURL変更する

WordPressの管理画面から設定>一般設定の中にある WordPress アドレス (URL)とサイトアドレス (URL)をhttp://からhttps://に変更して保存する。

投稿記事の中にある内部リンクをhttps://に置換する

修正は手作業では行わず、Wordpressプラグインの「Search Regex」を使用する。
Search Regexを使うとテキストファイルで文字列を一括置換するのと同じように、サイトの投稿記事全体に対して修正をかけることが出来る。その代わり、過去の投稿記事が全て影響を受けるため、変換後に文脈がおかしくなる記事が出る可能性がある。自分の場合はサイト移転の作業の記事はhttpでURLを書いていたところ、Search Regexで変換後にhttpsに変えられ、文脈がおかしい記事が発生した。

https://www.varis.jpへの修正

https://www.amazon.co.jpへの修正

.htaccessにリダイレクト用のコードを追記する

FFFTPで.htaccessをPCにダウンロードし以下のコードを追記して再度エックスサーバーのサーバーにアップロードして上書きする。
上書き後はファイルの書き込み権限がrw/r/rになっていることを確認する。

混在コンテンツのエラーを見つけて修正する

各記事をブラウザで表示させていくと鍵マークが緑にならず以下のようにエラーになっている記事が出てくる。
鍵マークがエラー表示の記事

この記事に対しては、FirefoxやChromeなどのデバッグ機能を使って混在コンテンツ箇所を見つけて修正する。
Firefoxでは、ツール>WEB開発>開発ツール>コンソールタブで記事を表示すると混在コンテンツの箇所が表示されるので該当箇所を修正する。

amazletの修正

自分の場合は投稿記事に設定しているAmazon商品リンクコードのamazletの変更がネックになった。
amazletは古くからあるAmazon商品リンクコードの一つで未だに使っている人も多いだろう。
Amazon商品リンクはAmazonのサイトのものをそのまま使うとインパクトが薄いため、こうしたAmazon商品リンクコードプログラムを広告用に使っている人は多い。
自分もブログ初期からamazletを使っているが、amazlet製作者がAmazonからアカウントBANを受けたという情報がありamazletサイトも更新されていないが、amazletリンク自体は正常に機能している。

この機に商品リンクコードを別のツールに変えてみるのもありだと思い、WordpressのプラグインのAmazonJSを使おうと思って調べてみたが、2017年現在、AmazonJSは何らかの理由で使えなくなっていた。代わりにAmazon Associates Link Builderというプラグインが提供されている。
が、このプラグインはほとんど日本語での情報がなく導入サイトの情報もないため、直ぐに導入するのが難しい。
仮に導入したとしても今後AmazonJSのように突然停止になる可能性もある。
Amazon商品リンクコードが使えそうなプラグインやツールを探したが他にいいものがなかったためこれまで通りamazletを使うことになった。

amazlet商品リンク内のURLがhttp://になっているため、https://に修正しなければならない。
amazletのリンク構造は以下のようになっており、3つのパターンのリンクアンカーが使われている。

amazletの商品リンク構造

http://が使われている箇所

imgタグはhttpsなのでこのままでも使える。
アソシエイトコードが入っている部分はamazon側にリンクされているがamazon側もSSL化されているため、https://www.amazon.co.jpに変えればエラーにならず正常に動作する。
全ての記事を手動で変えるのは面倒だが、Wordpressの場合はhttp://からhttps:/に変えるのはSearch Regexプラグインを使えば一括変換出来る。

残りは、amazletサイトにリンクされているhttp://www.amazlet.comの部分だがamazlet側がSSL対応していないため、https://にするとエラーリンクになってしまう。
これを解消するには、アンカータグ自体を書かないか、またはアンカータグの書き方を

のように書くどちらかになる。
IMGタグの中でhttp://が使われていると混在コンテンツと見なされるが、a hrefのアンカーでhttp://から始まるURLを指定してもエラーにはならない。
URLの指定の仕方として、「//www.varis.jp」の書き方はRFCで認められている。

この書き方で指定しているのが以下のリンクになるがhttps://のサイトトップに遷移する。
Digital Analyzer Zero
プロトコル部分を省略することで、混在コンテンツを回避しつつ、URLとして成立するので、修正方法としては有用なテクニックになる。
「a href=”//www.amazlet.com/” 」の書き方でもサイトがhttpプロトコル対応ならhttp://でアクセスされ、サイトが常時SSL化されているならhttps://でアクセスされる。

amazletのサイトでは「amazletサイトにリンクを貼ること」という規約は書かれていない。
なので厳密にはリンクを外してもいいのかもしれないが、リンクを意図的に外して使うのは使わせてもらっている立場からすると抵抗がある。

そこでリンクを外さず、プロトコル部分だけを外してリンクは機能させるようにすることでamazletの元のコードを出来るだけ改変しないようにする。
こうすればhttpのサイトであれば公式サイトにはリンクされる。

サイト側がhttps化した場合はリンク先でエラーになるが、それはamazlet側で対応すべき話なので、使用者側としては筋を通したという格好になる。

古い投稿記事の場合、amazletで作成したリンクも古いため、Amazon側でhttpの画像を使っていて、httpで混在コンテンツになるものがあった。

過去の商品リンクコード(srcがhttp://ecx.images-amazon.com)

2017年現在の商品リンクコード(srcがhttps://images-fe.ssl-images-amazon.com)

この場合、画像ファイル名は同じまま、「http://ecx.images-amazon.com」を「https://images-fe.ssl-images-amazon.com」に直せば同じパスの画像を見てくれるため、これもSearch Regexの置換で直す。

修正後鍵マークが緑になることを確認する。

ニコニコ動画スクリプトの修正

ニコニコ動画の埋め込みスクリプトはhttp://のため、そのまま動画を埋め込むと混在コンテンツになる。

参考記事
ニコニコ動画のiframeをHTTPSページに埋め込む

回避策として、NicoIframeというGithubのソースを使う方法があるとのこと。
但しGithubのやり方だと重くなる可能性がある。
また、本来動画サービス側で対応すべきSSLを参照サイト側で対応するのは順番が違うということ、ニコニコがSSL対応したときまた変更するのが手間ということを懸念したため、自分はGithubのコードは使わなかった。

埋め込みスクリプトのこの形式を

のように文字列に動画ページのURLだけのリンクにする。

これであれば最低限、クリックして動画サイトは見られる。
またニコニコ側がSSL対応した後もリンクの箇所をスクリプトに変えるだけなので変更の影響は少なく、サイトの速度にも影響はない。

なお、一見混在コンテンツになっていないように見えても、ブラウザ側で表示をブロックしているため鍵マークが出ている場合がある。その場合、内部的には混在コンテンツになっているため、該当する記事全てを修正しなければならない。

自分はWordpressに移行する段階で記事全ての見直しを行い、その際画像ははてなフォトライフからGoogleフォトへ移行、動画はニコニコ動画でもYoutubeにあるものは極力Youtubeに移行していたため、ニコニコ動画の数は少なかったが、それでも20程度ニコニコ動画のスクリプトがあったためそれらもYoutubeの動画に差し替えることにした。
SSL化を推進するGoogle傘下のYoutubeは当然SSL対応を終えているし、将棋チャンネルを開設しニコニコ動画がこれまで築いてきたコンテンツに割って入ってきた形のAbemaTV、同じサイバーエージェント系列のOPENREC.tvはSSL対応している。
それに比べ国内動画サービス大手のニコニコ動画はインフラとして脆弱で一般ユーザーでの配信視聴は困難であり、画質はAbemaTVに劣り、スマホアプリは利便性が悪く、動画サービスとしてはSSL対応されていない。この辺りの対応が全て後手後手に回っていることも、ユーザー離れにつながっているのではと思う。

その他の対応

Google Analytics

Google AnalyticsでURLをhttpからhttpsに修正

Google Search Console(ウェブマスターツール)

Search Consoleにhttpsのサイトを追加(同じドメインでもhttpとhttpsサイトでは別のサイトとして扱われるため。)

固定ページ

固定ページのURLは自動でhttps対応されるため対応不要。

カテゴリー

カテゴリーは自動でhttps対応されるため対応不要。

メニュー設定

メニュー設定もカテゴリーを元に作っているため対応不要。

SNSボタン

SNSボタンについてはWordpressの場合テーマに依存するので環境によって変わってくる。
自分の場合は有料テーマSTORKを使っているので以下はSTORKの話になる。

SNSボタン(ツイッター、facebook、google+、pocket、feedly)はphpファイルの記述ではhttpになっているように思ったが、実際に押してみるとhttpsサイトに遷移するため対応不要。
STORKのテーマで使われているSNSボタンでは唯一、はてなブックマークだけがボタン押下時に遷移先がhttpサイトだったが、ブラウザの表示上では混在コンテンツにならないのでOKと判断し修正しない。
特にSTORKは有料テーマであることもありサイト側でなくテーマ提供側が修正すべき部分だと思う。

広告スクリプト

広告スクリプトは自分が使っているものは全てSSL化されていたため対応不要。(GoogleAdsense、Amazonアソシエイト、A8.net、nendなど)

画像ファイル

画像ファイルについては投稿記事内のものはGoogleフォトを参照させているがGoogleフォトはSSL化されているため対応不要。
アイキャッチの画像はGoogleフォトを参照させる方法が分かっていないため、エックスサーバー内にあるが、自サイトを参照しているので混在コンテンツとはならない。

SSL対応すべきか

以下はこの記事を書いている2017年4月時点の話しです。
国内でもYahoo!Japanが常時SSL化対応したことでこれから国内のSSL化対応も本格化していくと思いますが、個人サイトレベルの規模で今対応すべきかというと微妙です。

まず大手動画サービスのニコニコ動画ですら、現状はSSL対応していません。
仮に今サイト側でSSL化すると、ニコニコ動画の埋め込みスクリプトが混在コンテンツになり、常時SSL化するのであればスクリプトコードを入れている記事を修正する対応を迫られます。
ニコニコ側でSSL化した後であれば記事側でも動画をhttpsに直すだけで済みます。
WordPressにはSearch Regexの置換機能があるためプロトコル部分の修正だけなら一瞬で修正出来ます。
よって、今の時点で対応してもニコニコのスクリプトを数多く使っているサイトの場合は非常に修正が多くなるはずです。

画像についても例えばはてなフォトライフであればhttpプロトコルのため、混在コンテンツとなり画像をレンタルサーバー側に移すか、Googleフォト等のSSL化対応した画像クラウドサービスを使うなどの対応が必要です。
レンタルサーバー、クラウドとも一長一短なので自分の運用に合う方法で画像の参照先を決めるといいと思います。

広告リンクについては大半のASPではSSL化対応されているため修正や収益減は発生しないと思います。
自分が調べた情報でもSSL化対応したことでサイトのアクセスが減ったといったものや収益が減ったという記事はありませんでした。
一時的には若干減少するようですが、元の値に戻るようです。

ただ、SSL化対応を先延ばしにしている間もサイト側の記事は日々増えていくため、やはり修正作業やチェック作業の負荷が大きくなります。
SSL化対応は必ずしも今すぐやる必要はないと思いますが、これらの事を念頭に置いて対応すべきといえるでしょう。

The following two tabs change content below.
SPONSORED LINK

この記事をシェアする