エラーメッセージは作業の邪魔になるもの。今回取り上げる「このサイトは安全に接続できません」というエラーメッセージは、サイトにアクセスできなくなるため厄介です。MAMPの使用中にエラーが発生すると、ローカルテスト環境が使用できず、混乱を招く可能性があります。

このエラーの原因は通常、ウェブブラウザかサイトのSSL証明書にあります。また、ブラウザのキャッシュをクリアするだけで解消できる場合もあります。

今回はこのエラーメッセージの主な原因を取り上げ、トラブルシューティング方法をご紹介します。

「安全な接続」とは基本的に、HTTPではなくHTTPSを使用する接続を意味します。ほとんどのブラウザがアドレスバーに南京錠のアイコンを表示し、サイトが安全な接続を使用しているかどうかを伝えています。Google Chromeの場合は、以下のようなtuneアイコンになっており、これをクリックするとサイトが安全であるかどうかがわかります。

kinsta.comは暗号化されたHTTPS接続を使用
kinsta.comは暗号化されたHTTPS接続を使用

HTTPSはHTTPと比較してセキュリティ面で大きな利点がありますが、有効なSSL証明書の導入をはじめとする厳しい要件があります。

「このサイトは安全に接続できません」エラーの見え方

「このサイトは安全に接続できません」エラーについて注意すべき点として、安全な接続については言及されるものの、ブラウザによって表示方法が大きく異なります。

Google Chromeでは、以下のように表示されます。

Google Chromeでのエラーの見え方
Google Chromeでのエラーの見え方

Mozilla Firefoxでは、以下のように表示されます。

Mozilla Firefoxでのエラーの見え方
Mozilla Firefoxでのエラーの見え方

Microsoft Edgeでは、以下のように表示されます。

Microsoft Edgeでのエラーの見え方
Microsoft Edgeでのエラーの見え方

いずれにしても、エラーに関する詳しい情報は提示されません。Firefoxの場合は、簡単な指示は確認できますが、それでも不十分です。

「このサイトは安全に接続できません」エラーの原因

セキュリティに関する警告が表示されたからといって、必ずしもそのサイト安全でないとは限りません。一般的な原因としては、ウェブブラウザの問題、サイトやシステム設定の問題の2つが挙げられます。

例えば、Chromeでエラーが表示され、Firefoxでは問題なく表示される場合には、ブラウザ(通常はキャッシュ)に問題があることを示しています。ブラウザを問わずエラーが見られる場合は、使用しているコンピュータまたはサイト自体に問題がある可能性が高いです。以下、主な原因を見てみましょう。

ローカル環境にSSL証明書が導入されていない

MAMPなどのローカル環境を使用している場合、サイトにSSL証明書がインストールされていないことが原因になっている可能性が高いです。したがって、これが最初のトラブルシューティングになります。すべてのサイトに自動的にSSL証明書をインストールする高性能ローカル開発ツールをお探しなら、DevKinstaがおすすめです。無料で利用できます。

ブラウザのSSLキャッシュが古い

ウェブブラウザは、他のデータと同じようにSSL証明書をキャッシュに保存します。証明書の認証プロセスを省略することで、ブラウジングを高速化することが目的です。しかし、SSL証明書が変更され、ブラウザが古いキャッシュされたバージョンを読み込んでいる場合は、このエラーの原因になります。

コンピュータの時刻と日付が正しくない

お使いのコンピュータの時刻と日付の設定が正しくない場合、SSL証明書の認証に問題が生じることがあります。この場合の解決方法は非常に簡単です。

不正なブラウザ拡張機能

ブラウザの拡張機能の設定ミスや誤動作も、このエラーの原因になります。このような問題を意図的に狙っている拡張機能も存在しますが、単なるコーディングエラーであるのが一般的です。

ウイルス対策ソフト

同様に、接続をリアルタイムでスキャンするウイルス対策ソフトも、エラーを引き起こすことがあります。コーディングミスか、過剰な設定が原因かもしれません。

無効または有効期限の切れたSSL証明書

サイトのSSL証明書の有効期限が切れていたり、無効である場合も、このエラーが表示されます。証明書は定期的に更新しなければなりません。

MAMP使用時に「このサイトは安全に接続できません」エラーを解決する方法

先に触れたとおり、MAMPの使用時にこのエラーが発生する主な原因は、ローカルホスト環境にSSL証明書がないことにあります。OpenSSLを使用すれば、比較的簡単にSSL証明書を作成することができます。以下はmacOS向けの手順になりますが、Linuxでも同様です。

1. ルートSSL証明書の作成

まずはルートSSL証明書を作成します。これにより、ドメインに追加の証明書を署名できるようになります。

コンピュータでターミナルを開き、以下のコマンドを貼り付けます。

openssl genrsa -des3 -out rootCA.key 2048

これでファイル名「rootCA.key」のRSA-2048鍵が生成されます。この鍵を使用してルート証明書を作成します。続いて、パスワードを入力します。証明書の生成時に鍵を使用するために必要になるため、どこかにメモしておきましょう。

以下のコマンドを実行して、ルートSSL証明書を作成します。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

証明書はrootCA.pemファイルに保存されます。「1024」は証明書の有効日数を示しています。

2. ルート証明書の信頼設定

ルート証明書を配置したら、オペレーティングシステムで信頼設定を行います。一度設定を行うと、同じ証明書を使用して作成されるすべての証明書はデフォルトで信頼されるようになり効率的です。

macOSで「キーチェーンアクセス」を開き、画面上部の「ファイル」>「読み込む」をクリックし、先ほど作成したrootCA.pem証明書を選択します。

証明書を読み込んだら、証明書をダブルクリックし、「この証明書を使用するとき」ドロップダウンから「常に信頼」を選択します。これで、ドメインのSSL証明書を作成する準備が整いました。

3. OpenSSL設定ファイルの作成

次に、証明書の作成時に使用するOpenSSLの設定を格納する設定ファイルを作成します。「server.csr.cnf」という名前でファイルを作成し、以下を貼り付けます。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn
[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
[email protected]
CN = localhost
このファイルを保存し、v3.extファイルを作成して以下を追加
authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

それから、ドメインSSL証明書に署名する鍵を生成します。

4. localhost用に証明書の鍵を生成

ターミナルに戻り、以下のコマンドを実行してlocalhost用の鍵を作成します。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

作成した鍵はserver.keyファイルに格納されます。

5. ローカルドメインのSSL証明書を作成

localhost用のSSL証明書を作成するには、ターミナルで以下のコマンドを実行します。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

これにより、server.crt証明書ファイルが作成されます。

6. localhost用のSSL証明書を有効化

最後に、前の2つのステップで作成したserver.keyおよびserver.crtファイルをMAMPフォルダにコピーします。これで「このサイトは安全に接続できません」エラーが表示されることなく、ローカルにインストールしたWordPressサイトでHTTPSを使用することができます。

まとめ

MAMP使用時の「このサイトは安全に接続できません」エラーは、サイトへのアクセスを妨げるだけでなく、セキュリティ上の問題を示唆している可能性もあるため、困惑してしまいます。しかし問題が深刻である可能性は低く、解決方法も比較的シンプルです。

このエラーは通常、ブラウザの設定かサイトのSSL証明書(localhostの場合は証明書がないことを意味することが多い)に問題があることを示しています。解決するには、OpenSSLを使ってlocalhost用のSSL証明書を生成する必要です。ご紹介した手順を参考にエラーを解決してみてください。