初心者向けWordPress講座ブログお問合せホームブログ運営者向けホームページトラブル相談これでスッキリ!URLに「安全ではありません」と表示される原因と対策これでスッキリ!URLに「安全ではありません」と表示される原因と対策ホームページトラブル相談2020年2月5日ツイートシェアはてなPocket先日、かなり前にホームページを作らせて頂いたお客様から次のような連絡がありました。ホームページを開くと「安全ではありません」と表示されるのですが、どうしたらよいのでしょうか?詳しく話を聞くと、ブラウザのアドレスバーに下図のようなメッセージが出ている状態でした。実はこれ、ブラウザによってメッセージ内容は変わります。上の図はSafariですが、Chromeだと下図のようなメッセージになります。どちらも同じ内容を表しています。「保護されていない通信」だとあまり危険を感じませんが、「安全ではありません」と表示されるとビックリしますね。インターネットに詳しくない訪問者が見たら怪しいサイトなんじゃないの?と思われてページを閉じられるリスクもあります。この記事ではこのような表示が出る理由とその対策について説明します。対策はパソコンが苦手な人にとっては難しい内容になるかもしれません。SSL化は結構大変ホームページの何が「安全ではありません」なのか?まず知っておいて欲しいことは、この警告はあなたのホームページそのものが危険(ウイルスに感染しているとか詐欺サイトなど)という意味ではないということです。この警告は「あなたのホームページと訪問者の間で行われるデータのやり取りが安全ではない」ということを意味しています。これはどういうことかと言うと、例えばお問合せフォームに名前や住所、電話番号などを入力して送信したとします。その送信したデータはインターネット上で運ばれていくのですが、技術的には途中で悪意ある人がそのデータを盗み見して内容を知ることができるのです。郵便物の内容を途中で誰かが開けて盗み見るようなイメージですね。最悪のケースでは個人情報が第三者に漏れる可能性があるわけで、そういう意味で「安全ではありません」と警告がでるわけです。警告メッセージとしてはChromeの「保護されていない通信」という方が正確な表現と言えますが、注意喚起という意味ではSafariの方がよいかもしれませんね。対策はSSLに対応すること理由は分かったとしてその対策ですが、現在情報漏れの対策として使われている方法はデーターを暗号化して送ることです。暗号化してあれば、たとえデータを盗み見されても内容は分かりませんよね。Layer)と呼び、ホームページをSSLに対応させることで警告も出なくなります。SSLのことをTSLと呼ぶ場合もあります。SSL(暗号化通信)に対応したホームページではURLが次のように変わります。←SSL対応どこがちがうがわかりましたか?httpの後ろにsが付いていますね。このsがつくとSSLに対応したサイトという意味になります。このことからホームページをSSLに対応することを「https化」や「https対応」といわれたりもします。SSL対応もhttps化も言葉は違いますが同じことです。SSLに対応したページは、各ブラウザで鍵が付いた表示になります。ホームページ上で何か個人情報を入力するとき、URLの前にこの鍵マークが表示されているほうが情報漏洩のリスクは減ります。フォームから何かを送るときは必ずチェックするようにしましょう。そのホームページが安全かどうかは保証しないSSLはあくまでもデータのやり取りが安全なことを保証するだけで、ホームページそのものが安全かどうかを保証するものではありません。フィッシング詐欺サイトのような悪質なサイトでもSSL化しているものは普通にあります。鍵マークだけ見てそのサイトが安全だと思い込まないように注意しましょう。既存のホームページは下記のように5つのステップでSSL対応させることがです。昔はSSL証明書は有料でしたが、今は無料で取得&設定できるレンタルサーバーがほとんどです。やる気と時間さえあれば無料でSSL対応することができます。その手順をもう少し詳しく見ていきましょう。SSL証明書を取得&レンタルサーバーで設定SSL証明書の取得とレンタルサーバーへの設定は同時にできるレンタルサーバーが多いです。レンタルサーバー各社で方法が変わってきますが、このサイトではサクラサーバーとエックスサーバーの具体的なSSL対応の方法を別エントリーでまとめています。証明書の取得とサーバーへの適用は少し時間がかかりますが通常は1時間程度でhttps://で始まるURLが使えるようになります。実際にアドレスバーにhttps://から始まるURLを入力して表示されればOK。その時点でURLの前に鍵マークが表示されていればSSL化は完了です。実際にはほとんどのサイトではこれだけでは鍵マークは表示されません。「証明書をもらったのになぜ?」と思うかもしれませんが、その理由はホームページ内にhttp://で始まる内部リンク(同じドメイン内のリンク)があるからです。鍵マークがでるようにするには内部リンクを全てhttps://で書かなければなりません。普通、SSL非対応だったサイトでは他のページや画像へのリンクは全てhttp://で書かれているはずなので、それらを全ページ書き換えなければならないのです!ちなみに、外部リンク(他のドメインへのリンク)はhttp://のままで大丈夫です。内部リンクの書き換えリンクの書き換え作業を全て手作業でやるのは現実的ではありません。そこはコンピューターの力を有効に利用しましょう。具体的な方法はホームページをどのツールで作っているかで変わりますが、基本は検索&置換機能を使います。することで一瞬でこの作業は終わります。このページを見ている方はWordPressを使っている方が多いと思うのでその方法を簡単に説明しておきます。対応できない部分のURL(ウィジェットやカスタマイザーで設定してあるURL)を手作業で書き換え詳しくは先ほども紹介した記事で説明していますが、特にウィジェトやカスタマイザーで設定した画像やリンクの修正を忘れがちなので気をつけてください。全てのリンクを修正できたら終了です。鍵マークが表示されることを確認しておきましょう。これで終わりと言いたいところですが、作業はまだ終わりではありません。リダイレクトの設定あなたのサイトをSSL化してもユーザーのブックマークや他のサイトからのリンクはhttp://で始まるURLのままです。すると、そこからあなたのホームページにアクセスする人はいつまで経ってもSSL非対応のサイトを見ることになってしまいます。それではせっかくSSL対応した意味が半減してしまいますよね。そこでhttp://のURLでアクセスしてきた人を自動的にhttps://のURLに移動させる処理が必要になります。これをリダイレクトと呼びます。いうファイルを編集する必要があります。失敗するとサイトが正常に表示されなくなるリスクもあるので慎重に作業しましょう。編集する必要があります。次のような記述を追加します。何か書かれていた場合、なるべく一番最初の方に書くようにします。いう記述より前に書かないと上手く機能しません。編集が済んだら、アドレスバーにhttp://のURLを入力してホームページを開いてみてください。自動的にhttps://が表示される(鍵マークが表示される)ようになれば完了です。以上でホームページのSSL対応は終了となります。アクセス解析などを使っている場合はもう少し作業が残っています。いろいろなサービスのURLを切り替えSSL化はURLの変更になるので、利用しているサービスによっては設定の修正が必要になる場合があります。サーチコンソールではhttp://とhttps://は同じドメインでも異なるサイトだと解釈されることがあるので必ず対応しましょう。ここではGoogleのサービスについて説明しますが、もし他にホームページのURLを設定するツールを使っている場合、変更しなくても対応できるツールなのか変更が必要か調べて、必要なら変更しましょう。Analyticsでは設定してるURLを下図の手順で修正する必要があります。左下にある「管理」をクリック「プロパティ設定」をクリック「デフォルトのURL」の前にあるhttp://をhttps://に切り替え切り替えが完了した状態サーチコンソールの設定サーチコンソールの場合、今のホームページをどういう方法で登録しているかで変わってきます。ドメインで登録:何もする必要なしURLプレフィックスで登録:新規追加もしURLプレフィックスで登録している場合は、新しくhttps://で始まるURLを詳しくはサーチコンソールにサイトを登録する記事を見て新しく追加しましょう。SSL化は結構大変いかがだったでしょうか?SSL化は実質的にホームページのURLを変更するようなものなので、色々と手間がかかります。慣れればそれほど難しくはないのですが一歩間違うとホームページが表示されなくなるリスクもあるので注意して作業してください。作業に不安がある場合は無理せずホームページを作ってもらった業者さんに依頼するなり、私のようなフリーランスに依頼するほうがよいと思います。ホームページのSSL化を請け負っていますのでもし良ければお問合せください。ホームページトラブル相談シェアをお願いします。ツイートシェアはてなPocketコメントこの記事へのコメントはありません。コメントをどうぞ返信をキャンセルする。メールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。誠Webエンジニア&整体師プログラミングやWebサイト作りの面白さにはまって、整体師だけでなくWebエンジニアの仕事もするようになりました。