Local(macOS)のSSLのFirefoxの警告を回避する方法

Advertisement

WordPressのローカル環境構築ツール「Local 」のSSL設定がmacOSでうまくいかない場合の対処法を見つけたのでメモっておきます。

LocalのウェブサイトにSSL設定についての特設ページ(英語) があって、macOS Big Sur以降での設定方法が書かれているんですが、この設定をしてもFirefoxでは「潜在的なセキュリティリスクあり」という警告が出てしまいます。

macOS版Firefox 97.0.1のセキュリティ警告画面のキャプチャ。「警告:潜在的なセキュリティリスクあり。Firefoxはセキュリティ上の潜在的な脅威を検知したため、blockme.localへの接続を中止しました。...」との説明があり「戻る(推奨)」ボタンと「詳細情報...」ボタンが表示されている

以下は、この警告を回避するための設定方法です。

以前このブログで紹介したmkcertというコマンドラインツールを使って証明書と鍵を発行して、それらをLocalで使う方法です。

環境

以下の環境で設定と動作確認をしました。違うバージョンでは設定やフォルダの場所などが異なる場合があるのでご注意ください。

  • macOS Monterey 12.2.1 (Mac mini, M1 2020)
  • Local 6.3.0+5756
  • Firefox 97.0.1
  • mkcert 1.4.3 (Homebrewでインストール)
  • Localでドメインが「blockme.local」というサイトを作成

mkcertでローカル認証局(CA)をインストールする

まずはmkcertというコマンドラインツールをインストールします。僕はHomebrewを使ってインストールしました。他にもMacPortsを使う方法がmkcertのGitHubページ に書いてあります。

1. mkcertのインストール

mkcertと一緒にFirefox用にnssというツールもインストールします。

brew install mkcert
brew install nss

2. ローカル認証局のインストール

以下のコマンドで証明書と鍵の発行元となるローカル認証局(CA)をインストールします。

重要: mkcertのGitHubページ にも書いてありますが、このコマンドで作成された鍵ファイルは絶対にシェアしないようにしてください!

mkcert -install

証明書と鍵の作成

Localでドメイン名を「blockme.local」に設定したサイト用の証明書と鍵を作成します。ドメイン名は自分が設定したものに変更してコマンドを実行してください。

1. 証明書を保存するディレクトリに移動

Local 6.3.0で作成したサイトの証明書と鍵は~/Library/Application Support/Local/run/router/nginx/certsに保存されています。

まずは、そのディレクトリに移動します。

cd ~/Library/Application Support/Local/run/router/nginx/certs

2. 証明書と鍵を作成

以下のコマンドで、mkcertを使ってblockme.local用の証明書と鍵を作成します。「blockme.local」の部分は自分が設定したドメイン名に置き換えてコマンドを実行してください。

mkcert blockme.local

これで、blockme.local.pemblockme.local-key.pemという2つのファイルが作成されます。

次に、これら2つのファイル名を変更します。

mv blockme.local-key.pem blockme.local.key
mv blockme.local.pem blockme.local.crt

Localを再起動してサイトを開始(START SITE)すれば完了です!

これで、Firefoxで「https」のURLにアクセスしても警告が出ないようになります。もちろん、ChromeとSafariでも問題なくSSLで接続できます。

以上、macOS Monterey(Big Sur以降)で、WordPressのローカル開発環境ツール「Local」のSSL設定をする方法でした!

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。