独自SSLを導入した際に起きたトラブルの傾向と対策
さて今回この「ゆきみ企画ジャーナル」のサイトに、これから先必須とされる独自SSLを導入し、サイトアドレスも http から https になって「安全なサイト」とブラウザに表示されるように進化させる作業をした訳ですが、様々なトラブルが発生したので自分の備忘録として書き残しておきます。
このサイトのスペックは前回の記事、独自SSLはこれからのネット業界では必須？にも書きましたが、もう一度書いておきます。
サクラサーバーのスタンダードプラン（月額515円）に、独自ドメインをサクラサーバーで取得し、コントロールパネルからwordpress をインストール、wordpress のテーマは Juliet を使用しています。
そして今回、このサイトのドメインに独自SSLを設定して https 化、ブラウザに「安全なサイトである」と言う表示をさせると言う企画でした。
さて、私がこのサイトに導入したのは「ラピッドSSL」と言う低価格なSSL証明書で、これをサクラのコントロールパネルからSNIと言うプロトコルを使って設定した訳です。一応書いて置くと、SSLの証明書は三種類あって、ドメイン認証（ネームベース）、ドメイン認証（IPベース）、完全版（企業向け）の順にセキュリティと価格が高くなって行くようです。
今回使ったサクラのラピッドSSLは、認証局：Geo Trust incのもので、独自ドメインをネームベースで認証すると言うものであり、必要最小限のセキュリティーで身元を証明するものです。個人のECサイトなどで使うには向いていません。あくまでもこのドメインを使っているのはこの人だと認証するものですが、サクラサーバーで独自ドメインを取得した場合は、Whois 情報に記載されるのは使用者名だけで、ドメイン管理者としてサクラサーバーの住所と名前、電話番号が記載され、テクニカルサポートもサクラサーバーのスタッフチームと言う事になってます。
とにかくサクラサーバーのコントロールパネルにログインして、そこからすべての作業・設定をするのが独自SSLを導入するのに一番手っ取り早く簡単なのです。
.
ともかくラピッドSSLを導入する
1.サクラサーバーのコントロールパネルにログインする
2.SSL設定の対象としたいドメインのSSL列にある証明書欄の［ 登録 ］をクリック
3.「2048ビット」を選択して『 秘密鍵を生成する 』を選択
4.証明書認証局へ申請する情報を入力し、『 CSRの生成 』をクリックする
5.CSRの作成が完了したら、ラピッドSSL（有料サービス）のお申込みボタンを押す
※参考サイト：https://help.sakura.ad.jp/app/answers/detail/a_id/2329#021
6.ドメイン設定へ戻り、設定するドメインの「SNI SSLを利用する」を選択
7.『 送信 』をクリック
8.自分のサイトへブラウザでアクセスし、正しく https で表示されるか確認
9.正しくhttps://～ で鍵マークと緑色で表示されていればOK！
※確認をする前にワードプレスの管理画面にログイン、「設定」から「一般」と進み、自分のサイトのアドレスをhttps に書き変えて置く事。
参考ページ：https://help.sakura.ad.jp/app/answers/detail/a_id/2326
.
サーバーの設定は成功したがトラブル発生！
独自SSLをコントロールパネルから設定し、しばらく時間を置いてから自分のサイトへアクセスしてみる。するとトップページはちゃんと緑の文字でhttps になって、鍵マークも表示されている。だが～！ 記事ページをクリックすると、なんじゃこりゃ？
まったくスタイルシートが読み込めておらず、レイアウトが目茶苦茶になっている。
こ、これはど～ゆ～事～？ （＾◇＾） いや、笑ってる場合じゃない・・・
ググれ！ そして見つかったのがこのサイト。
参考ページ：https://mono96.jp/archives/27697
なぁ～るほど、wp-config.php ファイルに追記ね・・・
結果、直った～♪ (^_-)-☆
ちゃんと普通に表示できている。これで問題解決！
そこまでは良かったのだが、またしても問題勃発！
アドレスバーに表示されている鍵マークに、ビックリマークが付いている・・・
こ、これはど～ゆ～事？
えぇ～っ？ 安全なサイトと表示される事を目的としているのに、一部安全じゃない？
なんだこりゃ？ 不愉快！ SSLなのにこれじゃぁ意味が無い！
どうすりゃいいの？ って事で、調べてみると「混在コンテンツのブロック」
参考ページ：https://support.mozilla.org/ja/kb/mixed-content-blocking-firefox?redirectlocale=ja&as=u&redirectslug=how-does-content-isnt-secure-affect-my-safety&utm_source=inproduct
そう言う事だそうな。
つまり、https ですべて構成しているはずなのに、ソースの中に http でリンクされている画像や、動画、インラインフレームなどが含まれているので、こう言う事になるらしい。
が、画像？ アイキャッチ画像とか、記事中の画像とか？ リンクを張り替えろって？ ぜ、全部？ サイトの記事全部？ (゜o゜)
正確には、画像のリンクタグを ＜ｉｍｇ ｓｒｃ＝”ｈｔｔｐ：／／～ から、＜ｉｍｇ ｓｒｃ＝”ｈｔｔｐｓ：／／～ にすべて直すって事で解決するはず。つまり http のあとに、ｓ を足す事で解決するって事だよね？ あぁ、記事がまだ少なくて良かったと心底思った。
解決しない～！ そうか、バナー画像とかも https://～ に書きなおさないとダメか。
全部書き直した。そう、全記事、全設定をだ。
これで完璧だろう♪ そう思ってもう一度自分のサイトにアクセスする。
ありゃ？ 鍵マークの所のビックリマークがまだ消えてない・・・
何が原因だ？ 画像のリンクタグは全部書き換えたはずだし、記事中の動画はすでに元サイトが https の仕様になっているので問題無い。http と https の混在なんて考えられない！ 一体何なんだ？ ググれ！
すると原因が分かった。
ワードプレスのプログラムソース、正確にはワードプレスのテーマ（テンプレート）の
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js が原因だ。
これがあるのは、テンプレートのヘッダーファイルにこの記述があるからだ。
この原因を調べるには、ブラウザで自分のサイトのソースを開いて確認すれば分かる。
ソースの中にしっかりと、http://～ と言う記述が２か所確認できた。
いや、もう１か所、とあるプラグインのスタイルシートとjava script の呼び出しに http://～ と言う記述を発見する事ができた。これだぁ～！って事で、早速ワードプレスの管理画面にログインして「外観」⇒「テーマの編集」と進み、「ヘッダー」のファイルを開く。
ソースタグを注意深く見ていると、しっかりと
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
関連の記述があった。ここを https:// に書き直せばいいわけだ。
たった一文字、ｓを付けたしてファイルを更新するだけでこの問題は解決する。
解決する・・・ はずなのに解決しなかった。(ToT)
なんでだぁ～？ と考えてみた結果、プラグインの呼出しタグの事が解決できていなかったのだ。プラグイン・・・ プラグイン・・・ そうか、該当しているプラグインを取りあえず「停止」の処分をしてしまえば良いんだ♪
そして、該当しているプラグインを停止してみたところ、見事に完全無欠な https として、安全なサイトとしてブラウザに表示された♪
.
ワードプレスの管理画面がNG！だった
これで良しと思っていたのだが、良く見るとワードプレスの管理画面のアドレスバーが変だ。鍵マークにビックリマークが付いている・・・
何でだ？ 色々考えてみた。何で管理画面が一部混在になっている？
きっと管理画面畳の何かの画像のリンクURLが妙な事になっているに違いないと気が付き、あちこちの画像の上で右クリックして、画像のプロパティを確認してみた。
こ、これか～！
犯人は意外な所にひそんでいた。
このアイコンは、サイトを立ち上げた時にワードプレスの管理画面「ユーザー」の所から「あなたのプロフィール」のページで設定したアイコン画像である。これはどこで直すのか分からなかったので、一旦この画像を削除してから改めてアップロードし直した。
これで良し♪ と思ったのに、まだビックリマークが取れない・・・
一体何が原因なんだ！ と悩んだ結果、これだった（笑）
短縮URLを生成するためのプラグイン「Pretty Link」がインストールしてあると、ダッシュボードに上の図のように表示される。この画像が http://～ のリンクURLになっていた。なので、このプラグインも取りあえず「停止」の刑に処す。
それをやった結果！
表から裏側まですべての環境で、https 化の完了となったのだ。
.
まとめ（乙！）
サクラサーバーのラピッドSSL を、SNIを使い導入すると、ワードプレスをお使いの方は不具合がでる。
それを回避するには、.htaccess とwp-config.php ファイルにプログラムを追記。
混在を回避するには画像、動画、インラインフレームのリンクタグを書きなおす。
java script 等のヘッダーファイルに書かれている呼出しタグを確認し、https に書き変える。さらに、プラグインのスタイルシートの呼び出しが邪魔をしている場合があるので、停止しても問題の無いプラグインなら、停止処分にして止める。
ワードプレスの管理画面にひそんでいる http から始まっている画像アイコン等がある場合があるので、もしそう言うものがあったら一旦削除の上、再アップロードしてリンクURLを書き換える。
ダッシュボードにもプラグインの妙な画像が表示される場合があるので、そう言うプラグインは止めてしまえば解決できる。
※Amazonのアフィリエイトリンクタグがある場合には、広告タグの http の所を、https に書き変える。つい最近になってAmazonもSSLに全頁対応したので、https に広告タグを書き換えれば今まで通り使える。
以上、自分が体験したトラブルシューティングでした。
誰かの役に立てば幸いである。
