Chromeの「保護されていない通信」という表示を消す方法

2019.07.22 WEB開発
Chromeの「保護されていない通信」という表示を消す方法

Google Chromeでネットサーフィンをしていると、ときどきURLの横に「保護されていない通信」と表示されるサイトがありますよね。

わからない受講生
あれって結局なに?表示されるサイトはやばいの?

と少なくとも1度は思ったことがあるはず。

実は「保護されていない通信」と警告が表示されるのは、きちんとセキュリティ上の理由があります。

そして、警告が表示されるサイトはGoogleなどの検索結果の上位にあがりにくくなってしまうというSEOへの悪影響が……。

困っている受講生
すぐなんとかしたほうが良さそうなのに、どうしたらいいのかわからない…

通信のこととか、難しすぎて困りますよね。

実は、契約しているサーバーの設定を変えることで無料で解消できるのですが、知識がないと怖くてできない人も多いと思います。

そこで、初心者でもこの記事では利用しているサーバーごとに解消する方法をまとめました。

藤ミヤチ藤ミヤチ
専門知識がない人でも対処できるよ

Chromeの「保護されていない通信」という警告文はHTTPS通信になっていないサイトに表示される

保護されていない通信1

URLの横に表示される「保護されていない通信」。
警告文をクリックすると、このサイトで個人情報を入れないでくださいという案内が表示されます。

このサイトへの接続は保護されていません

また、サイト内にあるフォームに入力すると、警告文の色が赤く変わってとても「やばそう」です。

保護されていない通信2

まずは、この警告文がそもそも何者なのか、から説明していきますね。

警告が表示されるようになったのはセキュリティ対策

わからない受講生
ある日突然、警告文が表示されたような…

実は2018年7月25日より、Chromeのバージョン68以降で表示されるようになりました。

google chrome 68

Google では、Chrome を最初にリリースした時から、セキュリティを Chrome の基本原則の 1 つと考え、ウェブを閲覧するユーザーの安全を守る(英語)ために常に取り組んできました。Chrome で HTTPS によって暗号化されていないサイトに「保護されていません」と表示し、最終的にはすべての非暗号化サイトにこの警告を表示すると発表(英語)したのは、およそ 2 年前のことです。この警告により、ウェブ上で銀行口座の確認やコンサート チケットの購入などを行う際に、個人情報が保護されるかどうかを簡単に知ることができます。7 月 25 日より、Google はすべての Chrome ユーザーを対象にこの変更のロールアウトを開始しました。

Chrome のセキュリティにとって大きな一歩: HTTP ページに「保護されていません」と表示されるようになります

要はユーザーの安全性を考えて、個人情報を守れるように通信が暗号化されていないHTTP通信のサイトで警告文を出すようにしました、とのことです。

わからない受講生
HTTP通信?HTTPS通信?

何かいきなり難しそうな用語が出てきましたね。

実はウェブサイトを見るときの通信には2種類あります。
これはURLでも簡単に確認ができて、「http://」で始まるものがHTTP通信、「https://」で始まるものがHTTPS通信です。

  • http://domain.com ⇒ HTTP通信
  • https://domain.com ⇒ HTTPS通信

どちらの通信の場合も、表示されるコンテンツは一緒です。

ただし、ネットワーク上のやり取りに致命的な違いがあります。
それは「通信が暗号化されているか、されていないか」。

HTTP通信だと悪意ある第三者からの盗み見・改ざんができてしまいますが、HTTPS通信にすると盗み見・改ざんがかなり難しくなります。

HTTP通信とHTTPS通信

そのため、Google ChromeではHTTP通信のままでセキュリティ上危ういウェブサイトでは「保護されていない通信」と警告を出すようにした、ということです。

藤ミヤチ藤ミヤチ
知らないうちにユーザーを危険にさらしてしまうことがないよう、必ずHTTPS通信に切り替えよう!

Chromeで「保護されていない通信」と出るサイトは、SEOでも悪影響が出ている

きちんとセキュリティ上で安全になっていないHTTP通信のサイトでは「保護されていない通信」と表示されますが、単に表示上・セキュリティ上の問題以外にも重大な点があります。

それは「SEOにも悪影響がでている」ということ。

少し前ですが、Googleが検索順位の上げ・下げのポイントとしてHTTPS通信になっているかどうかもチェックしますよ、という発表を行っています。

発表当時、HTTPかHTTPSかどうかは「このランキングの変更は、グローバルでクエリの 1% 未満にしか影響しません」と言っていたものの、現在では大切な指標の1つになっていると見てもいいでしょう。

Chromeの「保護されていない通信」という警告文を消すためにはSSLサーバー証明書を発行して.htaccessを編集する

HTTP通信ではなくHTTPS通信にしてセキュリティ上の問題を解決するためには、以下の手順で設定をします。

  1. SSLサーバー証明書を発行する
  2. サーバーの設定書にあたる.htaccessを編集する
  3. WordPressサイトの場合は、設定画面でURLをhttpsに切り替える

簡単に言うと、[1] HTTPS通信ができるようにして、[2] ウェブサイトでの通信をHTTPSに一本化する作業です。

作業は、契約しているレンタルサーバーの管理画面上での設定変更で済みます。

そこでこの記事では、以下3社のレンタルサーバーでの発行・設定方法を案内していきますね。

  • Xserver
  • ロリポップ
  • さくらサーバー
藤ミヤチ藤ミヤチ
手順に沿って対処していけば簡単にできるので、サーバーのことだからと恐れずやってみよう!

Chromeの「保護されていない通信」という警告文を消すために、まずはSSLサーバー証明書を発行する

わからない受講生
SSLサーバー証明書ってなに?

SSLサーバー証明書とは「サイト運営者の実在性を確認」し、「通信を暗号化する」ためのものです。

笑顏の藤ミヤチ藤ミヤチ
つまり、HTTPSで安全に通信が出来るようにするための証明書だよ

以前はSSLサーバー証明書を発行するのに、かなり高額なお金が必要でした。

現在はシステムが変わり、無料で登録・利用が出来るようになっています。

実際にサイトを運用しているレンタルサーバーの方で簡単に設定・登録ができるんです。

XserverでSSLサーバー証明書を発行する手順

まずはXserverのサーバーの管理画面である「サーバーパネル」にログインをします。

サーバーパネルの「SSL証明書」

サーバーパネルの右側にある「SSL設定」をクリックしてください。

次にドメイン一覧画面が表示されるので、設定したいドメインを選択します。

SSL設定画面

「独自SSL設定追加」のタブで、サイト欄にあるURLを確認し、問題がなければ右下の「追加する」を押します。

確認画面で最終チェックしたのち確定すると、SSLサーバー証明書が発行されます。

ロリポップでSSLサーバー証明書を発行する手順

まずはロリポップの管理画面にログインします。

ロリポップでは、現在SSLサーバー証明書が発行されていないドメインがあるとページのトップに警告文が表示されるようになっています。

SSL証明書未発行の警告文

この警告文の左にある「無料独自SSLを設定する」ボタンをクリックしてください。

警告文が見つからない場合は、メニュー「セキュリティ」の中にある「独自SSL証明書導入」をクリック。

独自SSL証明書導入

SSLサーバー証明書が設定されていないドメインの一覧が表示されます。

ドメインを選択してSSL設定

設定したいドメインにチェックを入れて、右側の「独自SSL(無料)を設定する」をクリックしてください。

さくらサーバーでSSLサーバー証明書を発行する手順

まずはさくらサーバーの管理画面にログインします。

ドメイン/SSL設定

左側のメニュー欄にある「ドメイン/SSL設定」を選択。

ドメインを選択

表示されるドメインの一覧から、設定したいものを選んで「登録」ボタンをクリックします。

無料SSLを設定する

表示されるリストの中から「無料SSL設定へ進む」をクリック。

無料SSL証明書の利用規約

最後に利用規約に同意すればOKです。

藤ミヤチ藤ミヤチ
いずれのレンタルサーバーでも証明書の発行は、数分〜5分程度で終わるよ

Chromeの「保護されていない通信」という警告文を完全に消すためには .htaccess を変更する

ここまでで、HTTP通信ではなくHTTPS通信ができるウェブサイトにすることができました。

実際に、自分のウェブサイトURLを「https://〜」で始まるものに変えてアクセスしてみましょう!

きちんとページが表示され、URLの横に鍵マークが表示されていればOKです。

HTTPS通信であることを確認

ただし、これだけだと完璧ではありません。

わからない受講生
ちゃんと「保護されています」って出ているのに?

いま見ている状態では、確かにHTTPS通信になっていて、セキュリティ上なんの問題もありません。

ただしまだ「http://〜」で始まるURLが生きていて、HTTP通信でも接続ができてしまいます。

  • http://domain.com
  • https://domain.com

の2種類のURLが同時にネット上に存在してしまっている状態ですね。

このままだと完全にHTTPS通信に切り替えられた、とは言えないんです。

そこで、HTTPS通信(https://〜)に一本化するために、サーバー上で仕込みをします。

具体的には、もしHTTP通信(http://〜)でアクセスした人がいたら、サーバー側で強制的にHTTPS通信(https://〜)に切り替えてね、と設定しておく形です。

困っている受講生
それって難しいんでしょ…

そう思うかもしれませんが、実は「.htaccess」というサーバー上の設定ファイルに↓のコードを書いておくだけです。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] 
藤ミヤチ藤ミヤチ
詳しい手順は、またレンタルサーバーごとに説明していくね!

Xserverで.htaccessを編集する手順

サーバーパネルにログインをします。

htaccessの編集へ

メニューの中に「.htaccess編集」というメニューがあるのでクリック。

ドメインの一覧画面から、今回設定したいドメインを選択します。

上級者向けの機能です

画面にはいちど「この機能は上級者向けの機能です」と警告文が表示されますが、無視して「.htaccess編集」というタブをクリックしてください。

htaccess編集画面

編集画面になったら、↓のコードをオレンジ色の線のところ(コードの一番最初)に差し込みます。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] 

差し込んだら右下の「確認画面へ進む」ボタンをクリックして、コードを確認したあと確定すればOKです。

お名前サーバーで.htaccessを編集する手順

お名前サーバーは、サーバーの管理画面上で.htaccessを編集することができません。

ロリポップで.htaccessを編集する手順

管理画面にログインします。

ロリポップFTP

左側にあるメニューの「サーバーの管理・設定」から「ロリポップ!FTP」を選択します。

「ロリポップ!FTP」というのは、サーバー上にあるファイルを直接編集・管理ができるサービスです。

新規ファイルを作成

メニューバーから「新規ファイル作成」を選択。

htaccessを編集

ファイル名を「.htaccess」、ファイルの属性「604」にしたあと、↓のコードを青い本文エリアにコピペします。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] 

編集が終わったら、下の「保存する」ボタンを押して完了です。

さくらサーバーで.htaccessを編集する手順

まず管理画面にログインをします。

ファイルマネージャー

ログインをしたら、「運用に便利なツール」メニューより「ファイルマネージャー」を選択。

ファイルマネージャー

「ファイルマネージャー」という、サーバーにあるファイルを直接編集・管理ができる画面が表示されます。

ファイル作成を選択

画面左上にある「表示アドレスへの操作」メニューから「ファイル作成」を選んでください。

新規ファイル作成

表示された画面に、↓のコードをコピペして入れて右下の「保存」をクリック。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L] 
ファイル名を「.htaccess」に設定

するとファイル名をどうするのか聞かれるので、「.htaccess」と入力して「OK」を押せば完了です。

.htaccessの編集がきちんとできたか確認する方法

サーバーの方で設定ができたら、きちんと反映されているか確認しましょう。

わからない受講生
どうやって確認すればいいの?

いま設定したものは、要は、HTTP通信「http://〜」でアクセスしようとした人がいたら、強制的にHTTPS通信「https://〜」に振り返る、というものです。

そこで、あえてブラウザのURLバーのところに「http://〜」で始まるURLを入れて見てください。

httpからの自動リダイレクト

ページを開くときに、勝手に「https://〜」に変更されていたら成功です。

笑顏の藤ミヤチ藤ミヤチ
もうこれで「保護されていない通信」とでなくなったよ

WordPressサイトの場合は、最後にサイトのURL設定を切り替える

WordPressサイトの場合にのみ、最後にサイトのURL設定を切り替える必要があります。

WordPressの管理画面にログインをし、「設定」→「一般」とクリックします。

wordpressでURL変更
  • WordPressアドレス(URL)
  • サイトアドレス(URL)

の2か所に入力されている「http://〜」のURLに「s」を追加して、「https://〜」の形に変更してください。

藤ミヤチ藤ミヤチ
s を追加する以外の変更をしてしまうと、システムエラーになる可能性があるので注意してね

URLの変更をすれば完璧です!

Chromeの「保護されていない通信」というエラーは少しでも早く消すべき

いつからかURLの横に表示されるようになった「保護されていない通信」という警告文。

一体何が何やら、という人もいると思います。

実は、

  • セキュリティ面での危険性
  • SEOでの悪影響

があるので、少しでも早く解消すべきです。

解消するには利用しているレンタルサーバーでの設定を変更する必要があるのですが、手順に沿っていけば誰でも解消できるので、ぜひ早めにためしてみてくださいね。

藤ミヤチ藤ミヤチ
サイトへの悪影響は、なるべく早くつぶしておこう!
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア


この記事も参考になるかも
【HBook】WordPressのホテル予約プラグイン 導入方法まとめ
独自テーマ作成の初心者が学ぶべきWordPressの基本は16の関数ほか
WordPressサイトでの問い合わせ内容をGoogleスプレッドシートに自動で記録する方法