自分しか見ないページなのに、ブラウザに鍵マークが点いていた理由

前回まで、玄関とキッチンを組み立てる話を書いてきた。
最後に、開いたときに気になっていたことを一つ片付けておく。
ローカルで動かしているだけのページなのに、アドレスバーに鍵マークが点いている。
本番のサイトで見るのと同じ印だ。
誰にも公開していない、自分のパソコンの中だけの通信なのに、なぜこの印が出るのか気になって調べた。

鍵マークは、誰かが「本物」だと証明した印

インターネット上のサイトで鍵マークが出るのは、そのサイトの正体を、信頼された第三者の機関が証明しているからだ。
この機関を証明局と呼ぶ。
ブラウザは、あらかじめ「この証明局が発行したものなら信じる」というリストを持っていて、リストに載っている機関のお墨付きがあれば、鍵マークを表示する。

本番のサイトは、外部の証明局にお願いして証明書を発行してもらっている。
ローカルの、自分のパソコンの中だけの環境に対して、外部の証明局が証明書を出してくれるわけがない。
存在すら知らない相手だからだ。
ではどうやって鍵マークを出しているのか。
答えは、自分で自分専用の証明局を作ってしまう、というものだった。

自分専用の証明局を、自分のパソコンに作る

ここで使ったのが、ローカル用の証明書を作るための道具だった。
この道具を一度動かすと、パソコンの中に「私はこのパソコンの中でだけ信頼される証明局です」という存在が生まれる。
それと同時に、その証明局を信頼してもらうよう、ブラウザ側の設定にも登録する。
こうしておくと、この証明局が発行した証明書を、自分のブラウザだけは「本物」として受け取ってくれる。
他のパソコンでは通用しない、自分専用の信頼関係だ。

証明局ができたら、次は各案件の名前（myproject-a.test のような名前）に対して、証明書を発行してもらう。
玄関役のコンテナに、この証明書を持たせておく。
ブラウザから「myproject-a.test」宛ての通信が来たとき、玄関役はこの証明書を提示して、自分は本物だと名乗る。
ブラウザは、さっき登録しておいた証明局の名前を見つけて、信頼できる相手だと判断する。
それで鍵マークが点く。

本番と同じ条件で試せることの意味

最初は、ローカルなのだから鍵マークなんて気にしなくていいと思っていた。
ただ、鍵マークが点いているかどうかで、動きが変わる機能が意外とある。
位置情報を扱う機能や、通知を送る機能は、鍵マークが点いていない環境だとブラウザ側が最初から動かしてくれないことがある。
鍵マークなしのローカルで「動かない」と焦って原因を探していたら、鍵マークのあるなしが理由だった、ということが何度かあった。
本番と同じ条件をローカルでも再現できていると、こういう遠回りが減る。

名簿と証明書、二つで一つ

ここまでの話をつなげると、ローカルでも本番と同じ名前で、同じ鍵マークつきで案件を開けるようになる理由が見えてくる。
自分のパソコンの名簿（hosts）に「この名前は自分自身」と書いておき、玄関役には「この名前ならこの証明書」と持たせておく。
名簿と証明書、この二つがそろって、はじめて本物そっくりの環境ができあがる。

四回にわけて振り返って

崩れて表示されたページを見て、環境ごと配る方法を探しはじめたところから、玄関を一つにまとめ、キッチンを増やす手順をスクリプトにし、鍵マークまでそろえるところまで来た。
どの一歩も、最初から設計図があったわけではなくて、困ったことが一つ起きるたびに、その場しのぎではない直し方を選んできた結果だ。
いま同じところでつまずいている人がいたら、この四回のどこかが手がかりになればいいと思う。