・Web関連

常時SSL化その後-4

Harmonic-Sound

このブログは「さくらのレンタルサーバスタンダートプラン」を利用しています。

先月より無料SSL証明書「Let’s Encrypt」を利用してSSL化しましたがその後についての覚書シリーズです。(^^)

独自ドメインとワードプレスで運用しているHarmonic-Soundですが、先日、いろいろ試しているとトップページ以外のレイアウトが崩れたりするパターンもありました。


原因を特定するデベロッパーツール

原因の確認にはGoogle Chromeで表示させて「F12」でデベロッパーツールを起動し「Console」のタブを利用します。

レイアウト崩れの原因はMixed Contentとなっているスクリプトなどが読み込めていない場合が多いようでした。

ブラウザに表示される「安全でないスクリプトを読み込む」をクリックするとレイアウトは戻るのですがhttpsに赤で打消し線が表示され、あまり気持ちの良いものではありません。

また、管理画面のログインしている状態でサイトを表示させている場合とログオフ(訪問者の方がサイトを見るのと同じ状況)ではデベロッパーツールのコンソールに表示される内容が異なるので注意が必要です。

ログインして修正、ログアウトして確認、サイトにキャッシュを使用している場合はリセットして無効の状態で確認しましょう。また、面倒ですが都度ブラウザのキャッシュのクリア(閲覧履歴データを消去する)も行いましょう。

常時SSL可前後での.htaccess記述の違い

SAKURA RS WP SSL

私は面倒なのでリダイレクトに関する処理を手動ではなく「さくらのレンタルサーバ 簡単SSL化プラグイ(SAKURA RS WP SSL)」を利用して自動で行っています。

SSL化前後のバックアップデータからプラグイン利用前後での.htaccess記述の変化を確認してみます。

SSL化 前

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

SSL化 後

# BEGIN Force SSL for SAKURA
# RewriteしてもHTTPS環境変数を有効にする
SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1

# 常時HTTPS化(HTTPSが無効な場合リダイレクト)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{REQUEST_URI} !/wp-cron\.php$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END Force SSL for SAKURA
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

.htaccessの記述にこのような変化がありました。

その他の変更について

SSL化に伴い変更した点は常時SSL化その後-1常時SSL化その後-2常時SSL化その後-3に記載していますが、その後に行って変更についての覚書です。

WordPressの設定でWordPressアドレスとサイトアドレスを「http」から「https」に変更しました。

いまのところWindowsデスクトップPCからGoogle Chromeの最新版で確認、iPhone 6sでサファリとChromeで確認している範囲ですが、特に大きな問題は無い状態だと思います。

古い記事でアマゾンを貼っている場合、指定した商品が無い場合はhttpのままでMixed Contentとなっていますが、「安全でないスクリプトを読み込む」扱いにはなっていないようです。

過日、いくつか試験的に.htaccessを手動で記述した後、レイアウト崩れが治らなかったことがあったのですが、「さくらのレンタルサーバ 簡単SSL化プラグイ(SAKURA RS WP SSL)」を一度無効にし、そして再度有効化して再設定したら元に戻りました。(^^)

 

-・Web関連