常時SSL化したのに鍵マークが緑色にならない!チェックした方が良い箇所

常時SSL化したのに鍵マークが緑色にならない!チェックした方が良い箇所

WEBの豆知識

弊社サイトもサーバーで無料で提供されているLet's Encryptを利用してサイトを常時SSL化にしています。  

常時SSLとは、ウェブサイトを閲覧する(ウェブサイトにアクセスする)際、閲覧するためのHTMLファイル等が閲覧者のPCに送られ表示されるので閲覧できるようになるのですが、そのファイル転送等の際、送っているファイル情報を暗号化して通信するという規格です。  

今までは、ユーザーが個人情報等を入力する場合に必須の通信規格でしたが、誰でも安心してインターネットを利用するために、現在はインターネット業界全体でこの安全な通信をすべてのウェブサイトに導入する事を推奨しています。

常時SSLとは、サイト全体を暗号化して通信させる次世代の標準化規格なわけです。  

FirefoxやChromeでは常時SSLでないサイトで入力項目に入力しようとすると、警告が出るようになりましたので、常時SSLの実装は急務かと思います。  

たとえばさくらサーバーでは、無料でこのLet's Encryptを導入できるしくみがあります。

その手順は以下のとおり。WordPressサイトに導入を想定してご説明します。  

・管理画面へログインする。ドメイン/SSLメニューから、独自ドメインの横に表示されている「登録」から無料のSSLを選択し、クリック。  

この作業は、独自ドメインに対して、Let's Encryptを取得発行する作業をやってくれるもので、ネイキッドドメインとwww付きのドメインに対して証明書を発行してもらえます。

また、3ヶ月ごとの更新作業もバックエンドで行ってくれるので、一度設定したらあとは放置でかまいません。(※導入にあたっては、さくらサーバーの詳細を確認してください。)  

導入したから、これでhttps:// と「S」が付いた状態でアクセスできるようになりはしますが、このままですと、鍵マークは緑になりません。  

HTTPSの規格では、そのサイトに読み込んで表示するものは、同じHTTPS通信からのものでないと、警告が出てしまうのです!  

たとえば今までサイト内で表示していた画像ファイルなどは、登録時のURLはhttpのままです。ですから警告が出てしまいます。

そんな画像は大量にあるでしょう。しかも、ワードプレスには検索置換の機能も無いです。  

さくらサーバーと組み合わせて使っている場合、便利なプラグインが用意されています。

そのプラグインを利用すると、サイト内のhttp://画像のURLをhttps://に書き換えて警告が出ないようにしてくれます。「SAKURA RS WP SSL」というプラグインです。  

その際、phpのバージョンをアップしておかないとプラグインが動作しないので、さくらの管理画面からPHPのバージョンを5.6か7.1にしておきます。(※バージョンアップで不具合が起こる場合があるので各自の責任で行ってください)  

管理画面からインストールして、サイト内のページが全て鍵マークが緑色である事を確認します。  

弊社では、ここで2つのページが鍵の色が安全を表す緑色になりませんでした。  

・アフィリエイトの画像を読み込み→この画像の読み込み先がhttpとなっていました。

こちらの大手画像リンク先は当然すでにhttps化しているだろうとimgのリンク先をhttpからhttpsに書き換える   このページは無事にSSL化できました。  

・トップページが緑鍵にならない。。。どこに原因があるのか、HTML側からしっかりチェック。  

すると、SNSの外部読み込みソーシャルボタンがhttpのままでしたので、httpsに書き換えクリア。  

鍵が緑マークとならない理由の多くはhttpからの画像読み込みが原因です。

特に外部のサイトからの画像読み込みをチェックしていただくと、無事常時SSL化が完結します。    

**************************************    

 弊社ではこの常時SSLが標準装備される、MovableType.netというサービスをご紹介する場合が多いです。中小規模のサイト製作には、高機能、安全、低価格で利用する事ができます。お客様側で何にもする必要がありません。完成後は簡単にご自分達でいつでも自由に発信していく事ができます。

(※現在の弊社ウェブサイトはMovableType.netを利用して制作されており、さくらインターネットさんのサーバー上にはありません。)