SSL化したのにhttps表示にならない…原因を探してみた話

こんにちは、山形のWEBデザイナー菅野です。

以前WEBサイトを制作したお客様 E社様からにご連絡をいただきました
E社様の案件は、当時 WEB制作のみを行いデータ納品しその後の運営はE社様が行っている形です
そのため、直接やり取りするのはかなり久しぶりでした

今回のご相談内容は、
サーバープランを変更してSSL化したものの
実際のブラウザ上でSSL表示にならないというものでした

SSLとは

まず簡単にSSLについて触れておくと、SSLは
サーバーとブラウザの間での通信を暗号化し、
個人情報や決済情報などを盗聴・改ざん・なりすましから守る技術です

また、Googleで推奨されており検索順位にも影響が出るため
現在では WEBサイトを運営する上でほぼ常識になっている対応です

E社様の場合、使用しているサーバーで無料SSLが利用できず
当時はオプション費用がかかるため
「SSL化せず、http表示のままでOK」という判断でした
しかし、セキュリティ面を考え、今回SSL化することにしたそうです

WordPressの設定を確認

SSL化しているのに表示が変わらないということで、ひとつ心当たりがありました
E社様のサイトには WordPress を導入していたため、
管理画面の「一般設定」のURLが httpのまま になっている可能性があります

そこで　http → https　に変更してみました

これで解決するケースは多いのですが
ブラウザを確認すると、まだhttpのままでした

リダイレクト設定

次に試したのは、リダイレクト設定
サイトにアクセスがあった場合、
強制的にhttpsに転送する設定を入れてみました

しかし結果は…
まだhttp表示のままでした

ブラウザごとの表示を確認

私はChromeで確認していたので、
Safari、Firefoxでもチェックしてみました

すると…
SafariとFirefoxでは https表示になっています
「なんで？」と思い、Chromeのキャッシュ削除なども試しましたが
それでも Chromeだけ http表示のままです

さらに確認していくと、Safariでもひとつ違和感がありました
通常SSL化されたサイトで表示される 鍵マークが出ていません

さらに確認すると

・TOPページ → http表示
・下層ページ → https表示

という状況でした

原因はTOPページの動画

TOPページだけということで
実際に表示されているソースコードをコピーして確認

「http:」で検索してみると… ありました!
メインビジュアルに使っていた動画が httpで読み込まれていました

このURLを　http → https　に変更して再度チェック

すると… 無事に https表示になりました！

混在コンテンツ（Mixed Content）

今回の原因は、いわゆる 混在コンテンツ（Mixed Content） です
サイト自体はHTTPSになっていても、

・画像
・動画
・JavaScript
・CSS

などのファイルが HTTPで読み込まれている状態のことを指します
この状態だとブラウザは完全な安全サイトと判断できず、
SSL表示が正しく行われないわけです

まとめ

AIに聞いてみたところ、
日本国内のSSL化（HTTPS化）比率は、全体で約95％に達しているそうです

今ではSSL化は特別な対応というより、
WEBサイトを運営する上での標準的なセキュリティ対策と言えるかもしれません

ただし今回のように、サイト自体はSSL化されていても
画像や動画など一部のコンテンツが httpのまま読み込まれている「混在コンテンツ」 の状態だと、
ブラウザ上では正しくSSL表示されないことがあります

SSL化したのに鍵マークが出ない…という場合は、
こうした部分も一度確認してみるとよいかもしれません