50のてならい

50のてならい

50になってからネットについて色々と検証していくブログです。

SSL化したのに安全なサイトでないと出た場合に対処したこと

私の利用しているXSERVEではSSL化を無料で出来るようになってました。

そこで、二つのサイトをSSL化しました。ですが、ある時から、自分のサイトの二つでアドレスバーの所の緑の鍵にorange triangle grey lock 42が点灯していたのです。

orange triangle grey lock 42がついている意味は、「混在するコンテンツ」と呼ばれ、「http://」と「https://」が混在している部分があるという意味になります。どうして、こうなったのかわからなかったのですが、二つの対策をすると安全な接続である緑鍵マークに代わりました。今回は、実施した対策方法の紹介です。

 

SSLの説明

まず、SSLの簡単なメモ記事です。

安全なサイトであるか、ないかの表示例から見ていきます。

2017年1月現在では、警告が表示されているサイトは一部のブラウザで、かつパスワードやクレジットカードなどの重要な情報を入力するページだけが表示されるようになっています。

Firefoxの場合の安全でない表示例

以下、firefoxのサポートからの引用文です。

  • unblocked mixed content 42 : 赤線が引かれた錠前アイコンが表示されている場合、Firefox は安全でない要素をブロックしておらず、盗聴や攻撃に対して無防備であり、あなたの個人データはサイトから盗まれる可能性があります。
  • orange triangle grey lock 42 : 灰色の錠前アイコンにオレンジ色の警告アイコンが付く場合、Firefox は安全でないパッシブコンテンツをブロックしていません。攻撃者はページの一部を改変することが可能です。たとえば、誤解させるコンテンツや不適切なコンテンツを表示することはできますが、攻撃者がユーザーの個人データをサイトから盗むことはできません。

引用 https://support.mozilla.org/ja/kb/mixed-content-blocking-firefox

私のサイトの場合には2番目のマークorange triangle grey lock 42で混在コンテンツサイトとなってました。

安全な接続の表示例

安全な接続の場合の表示です。firefoxの場合には、アドレスバーにあるの部分をクリックするとこのように出ます。

firefoxの場合です。

chromeの場合

これって良くみますよね。httpsとなってますね。 保護された通信って何なのでしょうか? それについて以下で少しだけ説明というかメモしてます。

 

SSL化のメリット
  • 盗聴、パケットの防止
  • サイトの信頼性の向上
  • アクセス解析の精度向上
  • 検索エンジンからの評価
  • なりすましの防止
  • ブラウザにおける表示方法変更への備え
  • セキュリティの強化
SSL化すると、自サイトのWebページをすべて暗号化されます。つまり第三者からパスワードやID、クレジットカード番号や住所等の個人情報などを読み取らせないようにするのです。SSL化を行うことにより、Webサイトのトップページから、暗号化されたプロトコルを使用した安全なコンテンツであることを示す「HTTPS」が表示されます。

Googleは、近い将来全ての「http://」のWebサイトに対して警告を表示するとことを公式に発表していますのでサイトの信頼性を得る為にもSSL化したほうが良さそうですね。

 

対策方法の検討

困った時には、Simplcieyのわいひらさんのホームページで検索してみます。

すると、やはりサポートフォーラムでも同じ問題の人がいたようで、わいひらさんが解決策を色々と記事にしてくれてました。

この中から、一つ目の対策として、functions.phpの編集を行いました。

functions.phpの編集

基本的にやることといったら、functions.phpに以下のコードを貼り付けるだけです。

WordPressの管理画面から外観→テーマの編集に fumctions.phpがあります。

「内部リンク等のURLを表示前にPHPで置換する」ために、functions.phpに以下のコードを貼り付けます。

書き換えの前には、必ずバックアップを作成しておいて、不都合があった場合には直ぐに元に戻せるようにしておいてから行って下さい。

 

//コンテンツ内の非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.netSSL
  $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);

 


 
Search Regexプラグインを用いてデータベースを置換の方法も書いてあったのですが、データベースを変換するので、結構リスクも多いとされていました。しかも、作業自体大変そうでしたので、私はfunctions.phpの編集の方を選択しました。

 

詳しくは、わいひらさんのページで確認して下さい。

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

簡単に上記の内容を説明すると、今まで「Search Regexプラグイン」を用いてデータベースを置換」していた作業をページが開かれる時に、「PHP側で投稿を表示する前に置換処理で変更する」コードを書いてくれたのです。時間にしてわずか0.0何秒かの世界なので表示スピードが遅くなるとか考えなくて良いと思います。

 

htaccessにリダイレクト用のコードを追記する

次に、二つ目の対策として、FTPでサーバーにログインして.htaccessファイルを編集します。

FTPソフトの導入がまだの場合には以下を参考にして見て下さい。

htaccessファイルの場所とダウンロード

FTPソフトでサーバーにログインして「public_html」ディレクトリを開いてください。

「public_html」ディレクトリの場所ですが、XSERVERでは以下となります。

 自分のHPをクリックします

 public_htmlをクリックします

 htaccessをダウンロードします

.htaccessファイルは非常に重要なファイルなので、編集に失敗して元に戻せなくなっては困ります。なので、バックアップを必ずとっておいてから作業をして下さい。

htaccessファイルの書き変え

先程ダウンロードした.htaccessファイルをエディターで開きます。

あとは、エディターの先頭部分に以下のコードをコピペします。

 

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

 

<IfModule mod_rewrite.c>について良く分からなかったので以下のサイトで少し勉強しました。

参考 今さら人に聞けない!WordPressで使われているmod_rewriteの説明書

あとは、編集した.htaccessファイルを保存して、サーバー上の「public_html」ディレクトリにアップロードして上書きします。

もしエラーが出たら、すぐにバックアップから復元してください。

htaccessファイル書替えによる転送作業

htaccessファイルを書き変えたことで、これまで「http://chan-bike.com/」に来ていたアクセスを「https://chan-bike.com/」に転送してくれます。

例えば、試しに「http://chan-bike.com/」のリンクからサイトへ飛んでも、「https://chan-bike.com/」になっていることがわかると思います。

上記のコードを.htaccessに書くことで、全てのページにおいてこの転送作業を行ってくれます。

まとめ

私の場合には、コードの書き変え作業の二つの対策だけで、安全なサイトと表示されるようになりました。

通常の作業では、莫大な点検作業が必要になります。少しみただけでも嫌になりそうな地道な作業になります。それが、わずかな時間で修正出来たのは大変な省力化になりました。

また、データベースを書き変えるプラグインというのは、間違った場合に元に戻すのが大変ですが、ファイルの変えからならば、バックアップの復元だけで元に戻ります。

まず、安全な方法で試してみてから他の方法を探すというのが良いかもしれません。