ローカル環境をSSL化する

はじめに

現代のウェブの世界では暗号化はgoodではなくmustになっています。
ブラウザではhttpsではなくhttpのサイトの場合はセキュリティ保護なしと警告をしてくるようになっています。
開発する際は気にしていない方も多くいるかと思いますが、本番と同じ環境で開発するためにもローカル環境もhttpsで開発しましょう

https化する方法

よく利用するのは以下の2つになります。

• ngrokを利用する
• Let's Encryptで発行して利用する

ngrokを利用する

ngrokはlocalhostをtunnelして外部に公開することでhttps化します。
外部に公開しているのでセキュリティ上の問題やネットワークの遅さが気になることもあります。

https://ngrok.com/

Let's Encryptで発行して利用する

こちらはドメインを用意して、接続すれば他のサイトと同じ要領で接続しに行くので、差異が生まれにくいし、証明書自体も本物だから安全です。
では、実際に取得する方法を紹介していきます。

1 ドメインを取得する

ウェブの開発者なら1つや2つのドメインは持っていると思います。
もしまだお持ちでない方はCloudflare Registrarで取得することをおすすめします。
安価でセキュリティにも強いです。
https://www.cloudflare.com/ja-jp/products/registrar/

2 DNSレコードに登録する

ドメインを取得したら localhost.example.com をAレコードに追加します。
localhostとして、利用したいので 127.0.0.1 を指定してください。

3 certbotをインストールする

certbotは簡単にSSL証明書を発行することができるツールです。
https://certbot.eff.org/
(今回はMacを利用しています)

brew install certbot   

4 certbotを実行

sudo certbot certonly --manual -d localhost.example.com --preferred-challenges dns 

-d <使いたいドメイン>
--preferred-challenges dns
指定しないとWebサーバー上に認証用ファイル設置して確認する方法なため、localhostを使うため今回は利用できない。
そのためdnsで認証する方法になります。

Please deploy a DNS TXT record under the name:

_acme-challenge.localhost.example.com.

with the following value:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Before continuing, verify the TXT record has been deployed. Depending on the DNS
provider, this may take some time, from a few seconds to multiple minutes. You can
check if it has finished deploying with aid of online tools, such as the Google
Admin Toolbox: https://toolbox.googleapps.com/apps/dig/#TXT/_acme-challenge.localhost.example.com.
Look for one or more bolded line(s) below the line ';ANSWER'. It should show the
value(s) you've just added.

5 DNSレコードにtxt登録する

DNSにTXTレコードで _acme-challenge.localhost に対して xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx を設定します

dig @8.8.8.8 -t txt _acme-challenge.localhost.example.com

; <<>> DiG 9.10.6 <<>> @8.8.8.8 -t txt _acme-challenge.localhost.example.com
; (1 server found)
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 41603
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;_acme-challenge.localhost.example.com. IN TXT

;; ANSWER SECTION:
_acme-challenge.localhost.example.com. 300 IN TXT "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

;; Query time: 52 msec
;; SERVER: 8.8.8.8#53(8.8.8.8)
;; WHEN: Fri Nov 22 17:49:28 JST 2024
;; MSG SIZE  rcvd: 122

ANSWER SECTIONが返ってくればOKです

6 証明書完成

certbotに戻ったらEnterを押します

Press Enter to Continue

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/localhost.example.com/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/localhost.example.com/privkey.pem
This certificate expires on 2025-02-20.
These files will be updated when the certificate renews.

NEXT STEPS:
- This certificate will not be renewed automatically. Autorenewal of --manual certificates requires the use of an authentication hook script (--manual-auth-hook) but one was not provided. To renew this certificate, repeat this same certbot command before the certificate's expiry date.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 * Donating to EFF:                    https://eff.org/donate-le
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

7 作成した証明書でサーバーを起動する

以下のディレクトリにファイルが生成されているので、持ってきて利用する

Certificate is saved at: /etc/letsencrypt/live/localhost.example.com/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/localhost.example.com/privkey.pem

おわりに

Let's Encryptがないときにはこのような正式な証明書は利用できず、ブラウザによっては表示されないなど不便なことがありました。
このように利用することでSSLを身近に怖い存在じゃなくしましょう