さくらインターネットの無料SSLを使用する

Google でかねてから警告していたように、今年2018年7月から、Google Chrome でSSL化されていないサイトのURLの頭に、「保護されていない通信」という表示がされるようになりました。SEOでも不利になります。

すぐにもSSL化が必要です。さくらインターネットの無料SSL をもう一度試してみることにしました。

実は1年ほど前試みたのですが、PHP のバージョンを上げる必要があって、上げたら一部表示がくずれてあきらめて戻していました。その後PHPのバージョンを上げましたが、表示のくずれは発生しなくなっていました。

無料SSL化は、さくらインターネットのサーバコントロールパネルから簡単にできます。ログインして「ドメイン/SSL設定」から、独自ドメインの「証明書」の「登録」をクリックするのですが、私は前回登録しているので、すでに登録された状態になっていました。

私はすでに設定済みですが、ここで「無料SSL設定へ進む」をクリックします。

無料SSLは Let’s Encrypt を使用しています。利用規約を確認して、「無料SSLを設定する」をクリックします。

しばらくして証明書の発行が完了すると、メールが届きます。
次に、常時SSL化のために、http→httpsのリダイレクト設定やサイトコンテンツのURL変更が必要です。これをやってくれるプラグインが用意されています。

SAKURA RS WP SSL プラグインをインストールして有効化し、「設定」の SAKURA RS SSL を設定します。

チェック項目を確認してチェックし、有効化します。確かに、https:// で示されたサイトにアクセスできました。

Google Chrome でアクセスした時、このように「保護された通信」と出るようになりました。http も https になっています。

ここで一つ問題が発生しました。

今までページの先頭に戻る右のようなボタンを設置していたのですが、これが表示されなくなったのです。

SSL化とどのような関係があるのでしょうか。まったく関係ないように思えます。さっぱりわかりません。もしかしたら、プラグイン(SAKURA RS WP SSL)の影響かもしれません。(後で関係ないことがわかる)

調べていくうちに、IEでは画面一番下に下記のメッセージが表示されていることがわかりました。

「すべてのコンテンツを表示」をクリックすると、PAGE-TOP が表示されるようになります。デフォルトは表示されません。

Google Chrome では、このメッセージも表示されず、「セキュリティで保護されていないコンテンツ」とみなしているようです。(後で違うことがわかる)

ローカル環境ではSSLを導入していませんので TO-TOP が見えています。、Google Chrome のデバッグツールで比較してみました。

下は、ローカル環境で表示したものです。

デバッグツールの関連記述部分にマウスオーバーすると、左の PAGE-TOP がマークされます。

ところが、本番サーバー環境では下のようになります。

必要な領域が確保されていません。

2つのソースを比較してみますと、ローカル環境では、<p> タグも <a> タグも、

style = “display: block !important;”

があるのに対して、本番サーバの <a> タグにはありません。

これは、display の block(表示) と none(非表示)を Javascript(jQuery) で切り替えているのですが、SSL の環境では、これが無視されているためと思われます。ソースを書き換えることになりますから、SSL では禁止していると考えられます。SSL の仕様かもしれません。(今回この見方は、後で否定されます)

という仮定で、「ssl Javascript」でGoogle 検索してみると、やはりJavascriptが効かなくなることがあるようです。その中で、

Javascript を参照しているURL が、https でなく、http であると、Javascript の読み込みが無視される

という記述がありました。ソースを見てみますと、

src=”http://code.jquery.com/jquery-3.2.1.min.js”

というjQuery の参照がありました。これを、

src=”https://code.jquery.com/jquery-3.2.1.min.js”

とすることにより、PAGE-TOP が表示されるようになりました。

原因は、jQuery の参照 URL が http のままであったことでした。

なお、css、画像のURLは、http部分を省略できるので、

src=”//code.jquery.com/jquery-3.2.1.min.js”

とするとよいという投稿がありました。こうすれば、http でも https でも有効になるということです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る