SSL化したのにアドレスバーに「保護されてない通信」と表示される問題

どうも、スマコマのコマ太郎です。

昨日、サイトをSSL化(https)したのに、なぜかアドレスバーに「保護されてない通信」と出るというお問い合わせがありました。

chrome で見るとアドレスバーには、グレーで「保護されてない通信」と表示されており、クリックしエラー内容を見てみると、以下２つのパターンが発生していました。

上記問題を解決したあと、アドレスバーの表示が変わりメッセージの内容も以下のように切り替わりました。

SSL化しているのに、灰色の文字で「保護されてない通信」と表示されるのはSSL化が不完全なときに起きる症状です。特にhttp:// で運営していて後からSSL化したケースで起こりやすいです。

ということで、どうやって解決したか書いておきます。

ちなみにSSL化が完全だとアドレスバーには下図のような鍵マークがつきます。目指すはこの状態ですよ。

不完全なSSL化による「保護されてない通信」警告メッセージ

まず最初の次点でのメッセージがこちら。

クレジットカード情報を入れるなとか、怖いですね。これではサイトの信頼感も丸つぶれです。

今回のケースでは、サイト内で使われていた検索フォームのURLに問題がありました。WordPress のウィジェットに[検索]がありますが、これを追加していて、かつ WordPress の設定が不完全だと起こります。

WordPress標準の検索フォームのURLが問題のケース

WordPress の設定箇所

直し方は簡単で、WordPress の [設定]-[一般] にある [WordPress アドレス (URL) ] と [サイトアドレス (URL)] の両方が https:// になっているか確認してください。

当然、すでにSSL化しており、https:// でアクセスできている必要があります。 SSL化していないのに、https:// に変更すると WordPress にアクセスできなくなるので注意してくださいね。

変更したらサイトにアクセスして、スーパーリロード（Ctrl+F5キー）を１回実行してください。ブラウザによってコマンドが違うので、上手く行かないときは ↓ の記事をチェックしてみてください。

TCDテンプレートのGoogleカスタム検索を使っているケース

検索フォームネタとして、もう１つTCDテンプレートの検索フォームが引っかかっているパターンもありました。

TCDテンプレート(MAXX,RUMBLEなど）には、Googleカスタム検索（TCDバージョン）というウィジェットが用意されています。

これを使っていてもエラーが出ます。HTMLファイルのソースを見ると

<form action=”http://www.google.com/cse” method=”get” id=”searchform” class=”searchform”>

となっており、URLが http:// のままです。このウィジェットはコンポーネント化してTCDで使いまわしているのでしょうね。おそらくTCDのほとんどのテンプレートで同様の問題を内包していると思われます。SSLが標準でなかったときは良かったのでしょうが、SSL化が標準となった今は直してほしいものです。

対応として２つ。簡単なのは WordPress標準の検索ウィジェットに変更する。もう１つはテンプレートを修正するです。

TCDの修正するファイル

WordPress の [外観]-[テーマエディター（またはテーマの編集）] を開き、widget の下にある google_search.php をクリックします。

修正する箇所

“http://www.google.com/cse” のプロトコル部分を s付きの “https://www.google.com/cse” に変更して保存するだけです。

保存したら直っているかサイトを開いて確認しましょう。スーパーリロード（Ctrl+F5キー）して確認してくださいね。

画像URLの修正が不完全、未実行な場合

続いて２つ目。今度は画像に問題があるという警告です。

HTMLソースを見て、http://自分のドメイン/ で検索してみてください。たぶん、画像のURLがたくさん引っかかることでしょう。これはhttp://で運営していたサイトを後からSSL化するとよく起こる問題です。

ドメインをSSL化して、WordPress の設定を変更すれば SSL化は完了していると思っている人が多いようですが、記事やウィジェットに埋め込んだ画像URLは以前の http:// のままになっています。

これを修正してあげる必要があるのです。

記事、固定ページの画像はプラグインで一括置換する

使用するプラグインは、「Search Regex」です。

まずこのプラグインをインストールし有効化してください。プラグインのインストール方法が分からないときは、↓ 以下の記事を確認してください。

Search Regex の設定

有効化すると WordPress の [ツール]-[Search Regex] に追加されるのでクリックして起動します。

[Search pattern] に古いURLを入力し、[Replace pattern] にSSL化した新しいURLを入力します。[Search] を実行すると、いくつかヒットすると思います。

[Replace&Save] を実行すると実際に文字の置換が実行されます。実行したら直っているかサイトを開いて確認しましょう。スーパーリロード（Ctrl+F5キー）して確認してくださいね。

ウィジェットやテンプレート機能で埋め込んでいる画像

ウィジェットやテンプレート機能に直接画像URLを打ち込んでいる場合、Search Regex で置換することができません。地道に手で直してください・・・

どこに画像があるのかは、HTMLファイルのソースを見て、http://あなたのドメイン/ で検索して１つ１つ探してみてくださいね。地味ですが、結局、これが一番早いです。

SSL化されていないアフィリリンクの画像

あまりないと思いますが、外部の画像を直接ロードしている場合もURLはすべて https:// である必要があります。引っかかりやすいのが古いアフィリリンクのバナー画像やインプレッション画像です。

画像に https:// でもアクセスできるなら、Search Regex を使って、そのドメインを検索条件で一括置換すれば直ります。

保護されてない通信メッセージが表示される問題のまとめ

SSL化されているサイトをいくつかチェックしてみたのですが、驚くほどたくさんのサイトで「保護されていない通信」状態のまま放置されていました。

サイトのSSL化は証明書をインストールしただけではダメなのです。https:// でアクセスができるから完了していると思ってしまうのでしょうね。

SSL証明書、WordPress の設定、画像等URLの修正、あとこの記事では書いてませんが http:// から https:// への 301転送の４点セットで行う必要があるのです。