Web全般

「このサイトへの接続は完全には保護されていません」の対処法

  /

SSL化したwordpressサイトでアドレスバーに「このサイトへの接続は完全には保護されていません」と表示されていたので、その原因と対処法を調べてみました。

原因はいくつかあるようですが、今回の場合は「画像」が原因でした。

 

「このサイトへの接続は完全には保護されていません」

「このサイトへの接続は完全には保護されていません」の対処法-1

 

先日、このサイト以外のサイトをいじっていたんですが、SSL化したにも関わらずアドレスバーに「このサイトへの接続は完全には保護されていません」と表示されていました。

以前にも同じことが起きて解決したんですが再び起きたのでもう一度原因を調べてみました。

 

アドレスバーに表示されるステータスの種類

まずはアドレスバーに表示されるステータスについて。アドレスバーに表示されるステータスには大きく分けて３つあります。

「このサイトへの接続は完全には保護されていません」の対処法-2

 

保護された通信

「保護された通信」の場合はSSL化された安全なサイトです。SSL化されたサイトは「https://」で始まるURLになります。

 

情報、または保護されていない通信

この状態は、「保護された通信」と「保護されてない通信」の中間です。完全には安全ではない（可能性がある）ってことですね。

 

保護されていない通信、または危険

これはSSL化されていない危険なサイトです。フィッシング詐欺のサイトだとこれが表示されることが多いです。こういうサイトでクレジットカードやパスワードなどの情報を入力すると盗まれる可能性があります。

SSL化されていないサイトは「http://」で始まるURLになっています。

 

SSL化とは？

SSLというのは、「Secure Sockets Layer」の略です。カンタンに説明すると、インターネット上の情報を暗号化して送受信する仕組みです（ただの受け売りです笑）。

SSL化することで重要な情報を盗まれたりするのを防ぐことができます。

逆にSSL化されていないサイトでクレジットカードやパスワードを入力すると、その情報が盗まれる可能性があるということです。

 

SSL化するメリット

ブログを運営する上で、SSL化する最大のメリットはなんといってもGoogleからの評価が上がる（評価を下げられない）ということでしょう。

GoogleはブログやサイトをSSL化することを推奨しています。

 

HTTPS をランキング シグナルに使用します
こうした理由から、Google では過去数か月にわたり、Google のランキング アルゴリズムでのシグナルとして、暗号化された安全な接続をサイトで使用しているかを考慮に入れたテストを実施してきました。この実験ではよい結果が得られているため、ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。

 

SSL化することでブログの評価が上がるので、アフィリエイトブログをやっている人はSSL化必須ですね。

 

「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられた〜」になる原因

さて、ここからが本題です。

アドレスバーに「このサイトへの接続は完全には保護されていません」と表示されていたわけですが、もう少し詳しく見てみるとこんな説明がありました。

「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられた可能性があります。」

なんかめっちゃ悪そうな感じですね（笑）。

おじさんも初めてこれを見たときはちょいビビりましたが、よく調べてみると自分が悪かっただけというのがわかりました。

 

原因は画像だった

今回の場合、原因は「画像」でした。

SSL化される前の画像はURLが「http://〇〇.png」のようになるのですが、こういった画像が残っていると、「悪意のあるユーザーによって差し替えられた可能性がある」と判定されてしまうようです。

いじっていたサイトは新しく作り始めたサイトなんですが、SSL化した後にデザインを変更したり記事を書いたりしたのですが、なぜか画像がSSL化されていなかったようです。

SSL化が反映されるまでには少しタイムラグがあるのかもしれませんね。

 

残っているhttpの場所を特定する方法

Chromeを使っている場合はGoogleデベロッパーツールを使えば問題が起きている場所を特定できます。

Macの場合、ブラウザ上で「control+Padの左をクリック」。すると以下の画像ようなウィンドウが開きます。

how-to-use-developper-tool-1

「検証」をクリックすると、デベロッパーツールのウィンドウが開きます。

 

how-to-find-mixed-content-using-developer-tool

「コンソール」をクリックすると、その下にエラーと警告の詳細が表示されます。

「Mixed Content」と表示されている部分が今回の原因です。詳細をみると、問題が起きている画像のURLが表示されています。

この画像のURLを「http://〜」から「https://〜」に変更すればOKです。変更方法は後述します。

 

Mixed Contentとは？

Mixed Content（混合コンテンツ）というのはhttpとhttpsが混在した状態のことです。SSL化すると基本的には画像などのURLはhttpsになりますが、何らかの理由でhttpが残ってしまうことがあります。

そういうページでこの警告が出ます。

Mixed Content（混合コンテンツ）やその防止についての詳細は以下が参考になります。

Googleデベロッパーズ：混合コンテンツとは

Googleデベロッパーズ：混合コンテンツの防止

 

対処法１：URLを直接書き換える

まずは問題が起きている画像のURLをカンタンに変更する方法を説明します。といっても、画像がどこで設定されているかによって、いじる場所が少し異なります。

今回の場合は以下の場所を変更しました。

 

ロゴ画像

いじっていたサイトではテーマ「Xeory Extension」を使っていたので、Xeory Extensionでのロゴ画像の変更方法を説明します。ほかのテーマでも似たような設定方法だと思うので参考にしてみてください。

ログインして「初期設定」>「トップページのロゴ設定」と進みます。

XeoryExtensionでロゴを変更する方法

画像ロゴのところでURLを「http」→「https」に書き換えます。あとは「画像をアップロード」をクリックすればOK。

 

サイトトップの画像

今回いじっていたサイトの場合、トップページで二つの画像がhttpのままになっていたのでそれを変更しました。

サーバーにはロリポップ！を使っているので、ロリポップ!のFTPでURLを直接変更しました。

 

ロリポップ！で画像のURLを変更する方法

ロリポップ！の管理画面から「サーバーの管理・設定」＞「ロリポップ！FTP」と進みましょう。

すると、別ウィンドウで以下のような画面が開きます。

lolipop-admin-page

 

おじさんの場合、複数のwordpressをインストールしてるので、インストールしているwordpressごとのフォルダが表示されています。

設定したいサイトのフォルダの横にある「＋」をクリックすると、そのフォルダの中にあるフォルダやファイルの一覧が表示されます。

how-to-use-lolipop-ftp-1

 

今回の場合、トップページの画像はstyle.cssで設定しているので、style.cssのファイルのところまで同じ要領で進んでいきます。

「wp-content」＞「themes」＞「xeory_extension」と進むとstyle.cssがあるはずです。

how-to-use-lolipop-ftp-2 how-to-use-lolipop-ftp-3

 

子テーマを使っている場合は「wp-content」＞「themes」＞「xeory_extension-child」で見つかるはずです（子テーマの名前はご自身で設定したものを探してください）。

あとはstyle.cssを開いて該当URLを書き換えればOKです。

 

任意のURLをカンタンに探す方法

該当URLをスクロールして探すのは面倒なので、サクッと探す方法を説明します。Macの場合、「command＋Fキー」を押すとブラウザの右上に以下の画像のような小さなウィンドウが開きます。

how-to-use-command-f-1

 

ここに「http」と入力します。

すると、そのページの中で「http」の部分だけを自動的に検出してくれます。「5/5」の表示の意味は「5番目の”http”/”http”は全部で５個」ということです。

 

how-to-use-command-f-2

 

検出した”http”の中で変更したい場所（今の場合は画像のURLを確認しましょう）を探して”https”に書き換えます。

最後に「保存」をクリックすれば完了です。

 

プロフィールのアバター

おじさんの場合、アバターをオリジナルアバターにしていたため、プロフィールのアバターも”http”のままになっていたのでこれも変更します。「ユーザー」＞「あなたのプロフィール」と進みましょう。

how-to-fix-avatar-url

「オリジナルアバター」のところで”http”を”https”に書き換えて、「プロフィール更新」を押せば完了です。

 

今回警告が出ていた該当サイトの場合、SSL化後に書いたブログ記事内の画像などは警告が出ていませんでした。おそらく、SSL化してから少し経てば、その後にアップした画像のURLは自動的に変更されるものと思われます。

「http://〜」の画像が大量にある場合は手動で変更するのはかなりめんどいです。以下では、大量の画像のURLを一気に変更する方法を紹介します。

 

対処法２−１：Search regexを使う方法もあるが・・・

WordPressのプラグイン、Search regexを使うとカンタンにURLを一括変更することができるみたいだが、最終更新が2年前でしかも「お使いのバージョンの WordPress ではテストされていません」となっているのでおじさんは使うのをやめました。

使いたい方は自己責任で。

同じようなプラグインで「Real-Time Find and Replace」というものがあります。こちらは最近も更新されていますし、この記事を書いている時点のwordpress（ver4.9.6）でもテストされています。

 

対処法２−２：Real-Time Find and Replace を使う

使い方はとてもカンタンです。

まず設定画面で「Add」をクリック。すると下に以下の画像のような領域が追加されます。

how-to-use-RealTime-Find-Replace

 

  1. 「Find」のところに変更したい文字列を入力
  2. 「Replace」のところに変更後の文字列を入力
  3. 「Update Settings」をクリック

これで完了です。

 

このプラグインはSearch Regexと同じで、ブラウザに表示する前に設定した文字列に置換してくれます。コードそのものを変更しているわけではないので安心して使えます。

もし、置換をやめたくなったら「Remove」すればその設定は削除されます。「Add」を押すたびに設定する領域が追加されるので、複数の置換にも対応しています。

 

対処法３：PHPで置換する

以下のPHPコードをfunctions.phpに追加することで、URLを自動的に置換する方法もあるようです。

//コンテンツ内の非SSL URLを表示前にSSL化する
function chagne_site_url_html_to_https_ex($the_content){
  //httpとhttpsURLの取得
  if (strpos(site_url(), 'https://') !== false) {
    $http_url = str_replace('https://', 'http://', site_url());
    $https_url = site_url();
  } else {
    $http_url = site_url();
    $https_url = str_replace('http://', 'https://', site_url());
  }
  //投稿本文の内部リンクを置換
  $the_content = str_replace($http_url, $https_url, $the_content);
 
  //AmazonアソシエイトのSSL化
  $search  = 'http://ecx.images-amazon.com';
  $replace = 'https://images-fe.ssl-images-amazon.com';
  $the_content = str_replace($search, $replace, $the_content);
 
  //バリューコマースのSSL化
  $search  = 'http://ck.jp.ap.valuecommerce.com';
  $replace = '//ck.jp.ap.valuecommerce.com';
  $the_content = str_replace($search, $replace, $the_content);
  $search  = 'http://ad.jp.ap.valuecommerce.com';
  $replace = '//ad.jp.ap.valuecommerce.com';
  $the_content = str_replace($search, $replace, $the_content);
 
  //もしもアフィリエイトのSSL化
  $search  = 'http://c.af.moshimo.com';
  $replace = '//af.moshimo.com';
  $the_content = str_replace($search, $replace, $the_content);
  $search  = 'http://i.af.moshimo.com';
  $replace = '//i.moshimo.com';
  $the_content = str_replace($search, $replace, $the_content);
  $search  = 'http://image.moshimo.com';
  $replace = '//image.moshimo.com';
  $the_content = str_replace($search, $replace, $the_content);
 
  //A8.netのSSL化
  $search  = 'http://px.a8.net';
  $replace = 'https://px.a8.net';
  $the_content = str_replace($search, $replace, $the_content);
 
  //アクセストレードのSSL化
  $search  = 'http://h.accesstrade.net';
  $replace = 'https://h.accesstrade.net';
  $the_content = str_replace($search, $replace, $the_content);
 
  //はてなブログカードのSSL化
  $search  = 'http://hatenablog.com/embed?url=';
  $replace = 'https://hatenablog-parts.com/embed?url=';
  $the_content = str_replace($search, $replace, $the_content);
 
  //ここに新しい置換条件を追加していく
 
  // //のSSL化
  // $search  = '';
  // $replace = '';
  // $the_content = str_replace($search, $replace, $the_content);
 
  return $the_content;
}
add_filter('the_content', 'chagne_site_url_html_to_https_ex', 1);

参考：WordPressサイトの内部リンクSSL対応（HTTPS化）をコードコピペでちょっと楽にする方法

 

この方法なら、新たに置換したい場所も追加できるので便利そうですね。今後、同じ現象が起きるかもしれないですが、その場合はこの方法を試してみたいと思います。

 

SSL化したのにアドレスバーが緑色（保護された通信）にならない場合の対処法については以下の記事も参考になるかもしれません。

SSL化したのに「保護された通信」にならない時の対処法

関連記事