最近は個人のサイトといえど、セキュリティ強化への要求が強まっている。 そこで今回のサイト大改訂を機に、自分のサイトも「常時SSL化」をしてみようと挑戦してみた。
今年「古希（70歳)」を迎える年寄りだが、「SSL化」の手順に関しては、ネット上の情報を参考にして容易に設定できた。
しかしそれでも「SSL化」に失敗したのである。 この原因を追究し、最後の壁を乗り越えるまでの、年寄りの孤軍奮闘の記録である。
ネット上の解説を徹底利用
セキュリティに関しては、「SSL化とは暗号化して通信する」という程度しか理解していない。 もちろん実装技術など皆無である。
そこでネット上を探すと、当サイトが利用している「Xserver」を使った、SSL化の手順説明が数多くアップされていることを知った。
これらの中で、主に下記サイトを参考にSSL化の作業に取り組んでみた。
SSL化の作業は意外と簡単だった！
ネットの記事を読みながら、順次作業を進めてみた。
まずは利用している「Xserver」の設定である。 SSL取得申請から実際に反映するまで、1時間ほど掛かるという。 3時のおやつなど食べながら休憩後、再度Xserverのサーバーパネルを見ると、無事SSLの設定はできたようである。
この時点で、ブラウザにサイトのURLをhttpsで直接入力すれば、鍵のマークが付いてSSL化の確認ができると書かれていた。 しかし結果はアウト！！
理由は不明だが、残りの作業を進めれば解決するだろうと、軽い気持ちで先に進めることにした。
WordPressやCocoonの設定画面で、SSL関係の設定を行う。 これは非常に簡単であった。
「何だこれは？」と思ったが、参考にしたサイトでは「リダイレクト」の説明もあるので、作業の目的はなんとなく理解できる。
しかし「.htaccess」に追記する数行のコードは全く意味不明。 とにかくネットの記事を参考に、Xserverのサーバーパネルにある「.htaccess編集」メニューから、慎重にコードの追記を行う。
すでに公開済みのサイトの場合、記事内の画像やブログカードなどは「http」で呼び出しているそうだ。 そしてこの部分を、すべて「https」に書き換える必要があるとのこと･･･
これはプラグインの力を借りて、一気に書き換えができるそうなので、ネット上の記事を参考に、「Search Regex」というプラグインをインストールする。
このプラグインで、当サイトのURLを「http」から「https」へと一括変換を行ってみた。
固定ページを含め、300以上の記事の中から、置き換えの対象が4000件近く見つかった。 すべては確認できないので、変更前後のURLを再度確認して、一気に書き換え終了である。
ネットの情報では、「固定ページ内の書き換えはできないので手動で個別に修正」とあったが、固定ページ内を「http」で検索してみると、すべて「https」に置き換わっていた。
作業は完了 しかしここから悩み始める･･･
「SSL化」への作業はすべて完了した。 XserverのSSL取得申請の待ち時間を除けば、慎重に作業しても1時間強だったような気がする。 もちろんその前に、ネット上の操作手順などを十分に読み込むことに時間は費やしている。
しかし ここからが頭が悩みまくりの時間であった。 要するに SSL化ができず、相変わらずChrome上に「保護されていない通信」が表示されるのである。
どうもサイト内に一つでも「http」が存在すると、SSL化ができないとのこと。 これが原因かと思われるが、何が悪いのか頭を悩ます。
もう一度これまでの作業の見直し、確認を行っても怪しいところはない。 同じ内容で公開している他のサイトの情報と照らし合わせても、特に問題になるような所は見つからない。
ネットを検索しまくり、どこかのサイトでGoogle Chromeの「デベロッパーツール」機能の利用というヒントを得た。
他のウェブサイトのスタイル設定方法などを調べるのに、このデベロッパーツールを使うことがある。 このツールの中の「Console」タブには、ページを読み込む際に発生したエラーが表示されるという。
そこで早速自分のサイト上でF12キーを押下してデベロッパーツールを開き、コンソールタブの中をチェックしてみた。 そして発見したのが、下のメッセージである。
このメッセージによると、やはり「https」と「http」の混在であることが判った。 そして「no-amp-logo.png」というイメージの呼び出しが原因であるようだ。
原因を特定 常時SSL化に成功
「no-amp-logo.png」というイメージの呼び出しURLを見ると、Cocoonの親テーマ内にあることが判る。
「これまた難しいな！」と思ったが、イメージのファイル名を見て「オヤッ！」と気づいた。 「amp」という単語が、Cocoon設定の中にあったことを思い出したのである。
早速Cocoon設定の「AMP」タブを開くと、それらしきものが見つかった。
このAMPロゴのURLが「http」のままであり、この部分を「https」に変更して保存し、サイトを開いてみると･･･
「オォ～！ やった～ぁ！ 鍵マークだ！！」
いくつかのページで鍵マークを確認。 IEやEdgeなど他のブラウザや、スマホでもSSL化されていることが確認できた。
SSL化の設定作業を終え、頭を悩ませ始めて3時間を要した！ 頭髪の後退と白髪化が進んでしまったが、解決できた時の達成感は格別なものであり、更にボケ防止には良い刺激であった。
Cocoon設定上の「AMP」機能が良くわからず、何も手を付けずにいたことが原因かもしれない。 しかし私のように趣味でサイトを立ち上げ、テーマもCocoonを利用する人が、常時SSL化する時に同じ壁にぶつかる可能性もある。 このページが、そのような場合の一助にでもなれば幸いである。