はじめに
httpでサイトに接続をするとURLの前に「！マーク 保護されていない通信」と表示されます
httpsでサイトに接続をするとURLの前の「鍵マーク」に変わります。
httpsの導入はウェブサイトのセキュリティと信頼性を向上させるために重要な要素となっています。
しかし、実務経験でhttpsで接続しているのにも関わらず、スマホで確認した時に「！マーク」の表示になってしまうということがありました。
ということで今回の記事では、httpsで接続をして、PCでは「鍵マーク」で表示されるのにスマホでは「！マーク」で表示される原因と解決方法について解説していきます。
httpについて
HTTP（HyperText Transfer Protocol）は、ウェブブラウジングやウェブサーバーとの通信に使用されるアプリケーション層プロトコルです。以下にHTTPの基本的な動作と仕組みを説明します。
コンピュータや通信機器が情報を交換する際に使用する規則や手順のこと。これによって、データの送受信が効率的かつ正確に行われることが保証されます。
HTTPの他に、インターネット接続に用いる「TCP/IP」、メールの送信に用いる「SMTP」などがあります。
クライアントとサーバーの通信
HTTP通信は、クライアント（通常はウェブブラウザ）とウェブサーバーの間で行われます。
クライアントはウェブサイトのURLを入力するか、リンクをクリックすることによってリクエストを発行します。
リクエストとレスポンス
クライアントがウェブサーバーに情報を要求する際、HTTPリクエストが生成されます。このリクエストには以下の要素が含まれます。
- メソッド（GET、POSTなど）: クライアントが行いたいアクションを指定します。
- パス: 要求するリソースの場所を示します。
- ヘッダ: 追加の情報（ユーザーエージェント、クッキーなど）が含まれます。
サーバー側の処理
ウェブサーバーは受信したリクエストを解釈し、要求されたリソースを見つけます。これによってウェブページや画像などのコンテンツが準備されます。
HTTPレスポンス
ウェブサーバーは、リクエストに対する応答としてHTTPレスポンスを生成します。このレスポンスには以下の要素が含まれます：
- ステータスコード: リクエストが成功したかどうかを示す3桁のコード（200 OK、404 Not Foundなど）。
- ヘッダ: 応答に関する追加の情報が含まれます。
- ボディ: 実際のコンテンツ（HTMLコード、画像データなど）が含まれます。
リクエストとレスポンスの送受信
クライアントはウェブサーバーからのレスポンスを受信し、その内容を解析して表示します。ウェブページの場合、HTMLコードが解釈されてブラウザに表示されます。
ステートレスなプロトコル
HTTPはステートレスなプロトコルであり、各リクエストとレスポンスは独立して処理されます。つまり、前のリクエストに関する情報はサーバーが保持しないため、ユーザーのセッション管理などを行うためにはクッキーなどの仕組みが使用されます。
HTTPは基本的なテキストベースのプロトコルであり、HTMLページや画像、動画などのコンテンツを取得するための重要な役割を果たしています。しかし、セキュリティの観点から通信内容を暗号化するためにHTTPSが導入されています。
httpsにすることのメリット
データの暗号化とセキュリティの向上
最も重要なメリットの一つは、HTTPSが通信内容を暗号化することによってデータの盗聴や改ざんから保護する点です。これにより、ユーザーの個人情報や機密データが保護され、セキュリティが向上します。
信頼性の向上とユーザーの信頼獲得
HTTPSの導入は、ウェブサイトがセキュアであることをユーザーに示すための重要な要素です。ブラウザはHTTPSサイトを「安全」として表示し、ユーザーに信頼性を伝えるため、ユーザーの信頼を獲得しやすくなります。
SEO（検索エンジン最適化）の向上
Googleなどの主要な検索エンジンは、HTTPSサイトを検索結果で優先的に表示する傾向があります。HTTPSの導入は、SEOランキングを向上させる要因となることがあります。
クッキーセキュリティの向上
クッキーはウェブサイトとユーザーの間でセッション情報をやり取りするために使用されますが、HTTPの場合、クッキーはプレーンテキストで送信されるため、盗聴のリスクがあります。HTTPSではクッキーも暗号化されるため、セキュリティが向上します。
オンライン取引のセキュリティ
オンライン決済や取引を行うウェブサイトでは、ユーザーの支払い情報や個人情報を保護することが重要です。HTTPSの導入により、オンライン取引のセキュリティが向上し、ユーザーが安心して利用できる環境が提供されます。
ブラウザ警告の回避
一部の最新のブラウザは、HTTPサイトを訪問する際に「安全でない」という警告を表示することがあります。HTTPSの導入により、このような警告を回避できます。
GDPRなどのコンプライアンス遵守
セキュアな通信は、個人データ保護法（GDPR）などのプライバシー法規に準拠するためにも重要です。HTTPSの導入は、法的コンプライアンスを遵守する一環として役立ちます。
httpsの導入方法について
サーバーでSSLを導入する
代表的なレンタルサーバーで無料SSLを設定する方法のリンクを下記に記載します。
設定をしてから時間をおくと「https://」でサイトにアクセスができるようになります。
xserver
レンタルサーバー「エックスサーバー」のご利用マニュアル｜無料・無制限に利用可能な独自SSL「無料独自SSL」の設定手順に…
ロリポップ
ロリポップ！レンタルサーバーのご利用マニュアル 「独自SSL（無料）」 のお申込み・設定方法について説明したマニュアルペ…
さくらインターネット
このマニュアルでは、さくらのレンタルサーバで無料SSL（Let’sEncrypt）を導入する手順についてご案内しています…
ConoHa Wing
ConoHa WINGのご利用ガイド、よくある質問などの各種サポート情報をご案内しています。ConoHa WINGは便利…
リダイレクトの設定
SSLの設定だけでは「http://」でもアクセスできてしまうのでhttpからhttpsにリダイレクトする記述を.htaccessファイルに追記します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>基本的に上記までの設定でPCもスマホもSSL化されて「！マーク」から「鍵マーク」に変わります。
httpからhttpsへリダイレクトしたのに、スマホでURLの前に「！マーク」が表示される原因
Mixed Contentエラーと解決方法について
HTTPSで保護されたウェブページ内でHTTPコンテンツ（画像、スクリプト、スタイルシートなど）が含まれている場合に発生します。これはセキュリティ上のリスクとなるため、すべてのコンテンツがHTTPS経由で提供されるように修正する必要があります。修正方法を以下で書いていきます。
httpコンテンツを探してhttpsに変更する
エディタや検証ツールで「command + F」(macの場合)で「http://」を検索してhttpsに手動で直せるものは直します。
絶対パスではなく相対パスを使用
ページ内でコンテンツのURLを相対URLで指定することで、自動的にページのプロトコルに従ってコンテンツが読み込まれるようになります。
WordPressアドレスとサイトアドレスがhttpsになっていることを確認する
管理画面の「設定」「一般」の「WordPressアドレス」と「サイトアドレス」が「https」になっていることを確認してください。ローカルから移行した時に「http」になっていることがあります。
「Realy Simple SSL」プラグインを使用する
WordPressでhttpsに直したのに、まだMixed Contentが修正されない。このままだと修正するのに時間がかかると感じた場合は「Really Simple SSL」を導入した方が早いかもしれません。
まとめ
httpsで接続しているのに、URLの前に「！マーク」が表示される原因と解決方法について記事を書きました。原因は「Mixed Content」でした。「Mixed Content」を解消するのはセキュリティ的にもSEO的にも大切なので、同じ問題に直面した方はこちらの記事を参考にして「Mixed Content」を解消してもらえれば幸いです。
他のセキュリティ関連の記事
「target="_blank"」属性を使用してリンクを新しいタブやウィンドウで開く場合の挙動、セキュリティ上のリスクと対策について解説しています。
