さくらインターネットでWordPressサイトのSSL化に着手

URLの切り替え工事

前回はドメインの取得、SSLサーバー証明書の取得、ウェブフォント(FontPlus)を使用するサイト追加までを行いました。ここからが本格的な工事となります。

WordPressのサイトの変更

WordPressのコントロールパネルから、URLを新しく取得したドメインに変更します。

スクリーンショット 2015-12-24 1.12.29

WordPressアドレスはWordPressがインストールされている階層、サイトアドレスは、トップページとなるURL(https://tapioca-hiroyuki.net)を入力します。

テンプレートのURL参照を変更する

テンプレートを自作しているので、テンプレートのPHPファイルの中に古いURLが書き込まれていれば、新しいURLに変更します。画像やJavaScript、フォームのURLやJavaScriptのソースに潜んでいます。

get_template_directory_uri()などで、URLをPHPが書き出すようになっていれば、変更の必要はありません。

外部参照している画像

外部の非SSLサイトを参照している画像(ganrefバナー)は、コピーして自分のサイトへ保存し、そこからリンクするようにしました。これができないと、ブラウザはSSL化が不十分として鍵のアイコンがURLの脇に表示されなくなります。

これでアフィリエイトをやっているサイトだったら、非SSLなアフィリエイトサイトから取得するバナーはアウトとなります。うちはそうではなかったので、致命的な問題とはなりませんでした。

.htaccessとwp_config.phpに転送先を伝える

もし古いURLにアクセスしても、新しいURLへ自動的に転送するための作業となります。また、http://と入力しても、強制的にhttps://のコンテンツにアクセスさせることができます。

■.htaccessに記載すること


<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://tapioca-hiroyuki.net/$1 [R=301,L]
</IfModule>

■wp_config.phpに記載すること


// プロクシでIPが入るとSSLアクセス状態をセットする(さくらSNI SSL対策)
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) {
$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
$_SERVER['HTTP_HOST'] = 'tapioca-hiroyuki.net';
$_SERVER['SERVER_NAME'] = 'tapioca-hiroyuki.net';
$_ENV['HTTP_HOST'] = 'tapioca-hiroyuki.net';
$_ENV['SERVER_NAME'] = 'tapioca-hiroyuki.net';
}

手順ははるかのひとりごとさくらSNI 独自SSLでドメイン全体をHTTPS化する」を参考に行いました。

もしさくらのSSLサイトへアクセスしたら、環境変数を強制的に新しいURLに書き換えないと、リダイレクトループに陥り、いつまで経っても正しいURLにたどり着けない不具合がおこります。その対策です。

申し込みフォーム

気になるのは申し込みフォームでした。CGIはそのままで大丈夫なのだろうか。
テストしたところ、送信を行う段階で『あなたがこのページで入力した情報は、安全でない接続を通じて送られようとしており、第三者に傍受される可能性があります。』とダイアログボックスが出てきました。
スクリーンショット 2015-12-22 11.15.36
これではせっかく送信したメッセージが、暗号化されずにCGIに送られてしまいます。
どうしてかなぁと思い、ソースを見てみると、メール送信用のCGIのURLがhttp://のままになっていました。
これは「お問い合わせ」「選考結果送信」のそれぞれに送信用のCGIがあり、切り替えをjQueryで行っていました。
スクリプトの中に「http://」のままのものがありましたので、「https://」に書き換えました。
こうしてメッセージを暗号化されたままCGIに渡すことができました。

不具合:Lightbox Galleryが起動しない

記事に配置された画像をクリックすると、本来ならLightboxが表示され、その中に写真が表示されるのですが、SSL化した後はなぜか写真の入った単独ページが表示されるようになってしまいました。
似たような機能を持ったプラグインに変更すべきかどうか検討しています。
スクリーンショット 2015-12-25 0.37.58[2015/12/27]配置画像のリンク先のデフォルトが「メディアファイル」ではなく、勝手に「添付ファイルのページ」にされてしまったのが原因でした。画像を配置する時にリンク先を「メディアファイル」に変更すると解決しました。

[2016/01/16]なんと、Webフォント「font-awesome」がhttps://ではありませんでした。

font-awesomeを使うために必要なスタイルシートのURLをhttp://からhttps://つきのリンクに変更し、ようやくページの全てのコンテンツがSSL対応になりました。

施術前

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

スクリーンショット 2016-01-16 19.39.10

施術後

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

スクリーンショット 2016-01-16 19.18.28

はるかさん、ご指摘ありがとうございました。


コメント

  • はるか より:

    紹介ありがとうございます。

    少し気になったのですが、折角SSL化しているのに
    鍵マークが壊れています。

    すこし見てみましたが
    http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
    このcssがhttpになっています。
    httpsに修正して下さい。

    コレで直ると思いますが試して見て下さい。

    • Tapioca Pudding より:

      はるかさん、コメントをありがとうございます。
      おおっと、これは盲点でした。
      Webフォントは和文については真っ先に対応できていましたが、時計マークなどについては施術していませんでした。
      httpsによって提供されるリンクに切り替えましたところ、全てのページコンテンツがSSL対応になりました。
      ご指摘ありがとうございました。

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません