Google ChromeがHTTPS対応サイト(常時SSL)に「保護された通信」のラベル付与!仕様や意味まとめ

2017年1月15日WebGoogle Chrome, HTTPS, ラベル, 仕様, 保護された通信, 常時SSL, 意味

スポンサーリンク

当サイト「レビューログ」は、開設当初からhttps://での運営を行っていたため、SSL化は行った状態です。(エックスサーバーで構築すれば、最初からスムーズに「https」でサイト運営可能です。)

つい先日のGoogle Chrome最新版へのアップデートで、HTTPS対応サイト(常時SSLのみ)に「保護された通信」というラベルを付与するようになりました。

https

セキュリティの重要性が昔から言われていましたが、ここに来てブラウザ側でもHTTPS対応を目立たせるようになってきました。

 

これは、単にURLをhttp⇒httpsにしただけでは表示されず、常時SSL化が完了しているサイトのみ表示されます。

※ちなみに、httpのサイトは「保護されていない通信」という表示がされます。

スクリーンショット 2017-01-15 22.43.25

本当の定義について理解されている方は少ないような気がするので、仕様や意味をまとめます。

スポンサーリンク

Google Chromeで「保護された通信」ラベルを付与するには、常時SSL化(≠HTTPS化)させる必要がある!

単に、サイトのURLをhttpsにすれば良い(SSL証明書を発行する)という訳ではありません。

常時SSL化 = サイト内のページ読み込み時の通信を全て「https」にする必要がある

実際にレビューログのページで見ていきます。

ThinkPad X1シリーズ(Lenovo)の2017年モデルは新色シルバーが追加!判明スペックまとめ というページにおいて、以下のようにGoogle Chromeにおいて「保護された通信」のラベルが付与されています。

https

Chromeの開発者ツールのコンソールログにも、エラーは特に出ていません。

https1

もしhttpの通信が紛れ込んでいると、ここにエラーログが表示されます。

例えば、WordPress(PHP)を挫折せずにできるだけ独学で勉強する方法・コツをまとめる というページの場合、以下のようにChromeのURL欄にはラベルが表示されていません。

https2

Chromeの開発者ツールのコンソールログを見てみると、以下のようにhttpの通信が紛れ込んでいるという「Mixed Content」というエラーが出ています。

https3

当サイトではAmazonや楽天のアフィリエイトリンクを設置していますが、「カエレバ」というサービスを利用して一括で貼り付けして表示もカスタマイズしています。

これがhttpsに対応していない(具体的には、画像読み込みのURLがhttpで通信を行っている)ので、上記のようにエラーが出てしまいます。

https4

最近では大半のASPが常時SSL対応を行っていますが、楽天アフィリエイトなどは対応していません。

アフィリエイトリンクを書き換える行為は、ASPによっては規約違反になるところが多いのと、httpsに変更すると画像の読み込みが正常に行われず、表示されない等の不具合も起こります。

Googleの検索エンジンの評価に常時SSL対応有無が入ってくるようでしたら、レビューログでも対応を迫られるかもしれませんね…。

HTTPS(常時SSL)でサイトやブログを作るなら「エックスサーバー」が一番簡単!

エックスサーバー公式ページ

当サイトもエックスサーバーにて運用していますが、ボタン一つで管理画面から簡単にSSL証明書を発行できます。

エックスサーバー サーバーパネルよりSSL設定を選択します。

https5

SSL化したいドメインを選択します。

https6

「独自SSL設定の追加」のタブを選び、サイトを選ぶだけ!

https7

※レビューログの場合、すでに証明書発行済のため上記のような画面が表示されています。

新しくサイトを作ろうと考えてる方や、自分のサーバーがSSL化しにくい!という方もエックスサーバー超おすすめです。(表示速度も引くほど早いです。)

エックスサーバー公式ページ

スポンサーリンク

2017年1月15日WebGoogle Chrome, HTTPS, ラベル, 仕様, 保護された通信, 常時SSL, 意味

Posted by 管理人