created_at
updated_at
tags
toc
headings

URL バーの表示の変遷

Intro

ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、 Chrome から発表された。

思えば、 URL バーの見た目も、だいぶ変わってきたように思う。

URL バーの表示の変遷を一度まとめておく。

URL バーの再現

本当なら古いブラウザのスクショを集めたいところだったが、これは非常に難しい。ネットで色々落ちてるものをかき集めても、ライセンスや解像度や表示されている URL などを考えると、使い勝手は決して良くない。

試しに古い Chromium をビルドしてみたが、一定より古いものはうまく開くことすらできなかった。開くことができたバージョンもあったが、どうやらそれだけでは当時の URL バーの UI までは再現されないようだ。

そこで、実物のスクショはあきらめ「一般的な URL バーのイメージ」を書いた図で、おおまかな変遷を辿る。あくまで架空の図であることに注意してほしい。

原始の URL バー

最も基本的な URL バーは、表示している URL をそのまま表示するものだったと言えるだろう。

プレーンに URL 全体を表示した HTTP の URL バー

そして、 HTTPS が登場して以降ここに「安全である」という意味合いを追加する UI が付与される。一般的に Lock Icon (鍵アイコン) と呼ばれるものだ。

先頭に緑のロックアイコンが追加された HTTP の URL バー

さらに、その証明書が EV であれば、発行先の組織名が表示された。

先頭に EV の組織名が追加された HTTPS の URL バー

Netscape や IE5.5, 6 とかのレベルになると、もっと異なる UI だった。そこから徐々に変わってここに至るので、一般にいつこのイメージが定着したのかというと、断定は難しい。

推定すると、 Chrome は 2008 年にリリースされ、初期のころからこの UI だったように思う。ずっと経って 2016 年に Let's Encrypt が始まるが、その時点では少なくとも日本の HTTPS の普及率は決して高くなく(2,3 割)、逆に銀行などが EV を入れており、「鍵が出てると安全」「組織名の表示を確認を」といった啓蒙が、リテラシーの高い一般ユーザに対して行われていたと思う。

したがって、このイメージが一般に定着していったのは 2012~15 年あたりかと思う。IE でいうと 9,10 くらいか。

HTTPS Everywhere

HTTP が一般的である上で、 Advanced なものとして HTTPS が提供されていたために、それを「Secure」とラベル付するのは一定の納得感があった。

その後、社会インフラとしての Web に人々の依存度が上がるかたわらで、 AT&T が無料 WiFi で広告を差し込んだり、 DigiNotor が不正発行をやらかしたり、エドワードスノーデンが告発したり etc etc etc と様々な社会の変化が起こり、 HTTPS の重要性が増した。

プラットフォーム側ではこれに呼応するように、ブラウザに HTTPS Only な機能が増え、 IETF プロトコル策定に暗号化が必須となり、極めつけに Let's Encrypt が登場して一気に HTTPS 化が広まった。

各位が HTTPS Everywhere に向かって進んでいたのは、だいたい Let's Encrypt 登場の直前 2015 年から 2020 年あたりの話と言えるだろう。

結果 Web の前提が変わり、それに合わせて URL バーのデザインも変わっていくことになる。

HTTP as Non Secure (2016~)

HTTPS のいう "Secure" はあくまで「通信の安全」であり、だれかが盗聴/改竄/なりすましをしてないことを保証するものだ。そのため、証明書の発行は基本的に「Issuer はそのドメインを本当に保持しているか」を基準に行われる。

重要なのは、「そのサイトのコンテンツは安全であるか」などという保証は、たとえ EV であっても HTTPS にはない点だ。 HTTPS 化が遅れた銀行を偽装したフィッシングサイトが、 Let's Encrypt で HTTPS 化されてたなどという、皮肉な話もあったりした。

ここに "Secure" と "Trustworthy" の差がある。

しかし、研究によって多くのユーザは Lock Icon が示す "Secure" という表示の意味をそのようには理解しておらず、当然ページの中身が安全であるという "Trustworthy" を示すと誤解していたこともわかってきた。

そこで、 HTTPS が前提な世界においては「HTTPS が Secure」なのではなく「HTTP が Non Secure」だという価値観にベースをシフトする必要があった。

HTTP の more secure が HTTPS だったのが、 HTTPS の less secure が HTTP という価値観のシフト

結果 HTTPS を控えめに表示し、 HTTP の場合のみ Not Secure であることを示するように表示が変わっていくことになる。

先頭に Not Secure と表示した HTTP の URL バー

先頭にロックアイコンを表示した HTTPS の URL バー

この流れは 2016 年ごろはじまった。

最終的には、全ての HTTP を赤いエラー表示にするのが目指すところだが、現状はブラウザによってかなりばらけている(赤くするもの、赤くはしないもの、 Password フォームがあるときだけ赤くなるものなど)。

赤くなる前提でいうとだいたいこういう感じだ。

先頭に赤で Not Secure を追加した HTTPS の URL バー

先頭に黒でロックアイコンを追加した HTTPS の URL バー

Removing EV Badge

EV 証明書の発行は、 DV 同様のドメイン所持確認に加えて、組織の実在チェック(ペーパーカンパニーではないか)などを付加価値として追加している。逆を言えば、悪意をもったものでも要件を満たせば取得できる。

PoC として有名なのは、 "Identity Verified" という会社を作って EV を取得することで、まるで安全であるかのように組織名を表示するという実証がある。

また、アメリカでは州が別なら同じ社名の会社が作れる?とかで、実際に Stripe と同じ組織名が表示される EV 証明書が取得可能であることが実証された。

こうした研究から、 EV 証明書の組織名は、表示する方がむしろ良くないのではないかという論調が、特にセキュリティ研究者周りで強まった。 2017 年くらいのことだ。

結果、 2018 年に Safari 12 から組織名の表示が消えた。

2019 年には Chrome と Firefox が EV の組織名表示を消すと発表した。

結果 HTTPS であるかどうかが重要になり、アイコンをクリックしたりしない限り EV の特別扱いはなくなった。

先頭に赤で Not Secure を追加した HTTPS の URL バー

先頭に黒でロックアイコンを追加した HTTPS の URL バー

eTLD+1 のみの表示

フィッシング攻撃の典型的な方式の一つが、よく似たサイトを偽装して、そこにクレデンシャルを入力させるといったものがある。

理想としては Password Manager などで機械的に検出することだが、それにしてもやはり URL の中で特にドメイン(eTLD+1)を確認するのは、防衛手段の基本となる。

一方、ユーザは URL の仕様を正しく認識しているわけではなく、サブドメインが知ってるサイトだったり、長いパスやクエリで特にモバイルでの視認性が下がっている場合などに、攻撃にひっかかってしまうという研究結果がでた。

そこで、 URL の中でとりわけ重要な、そのサイトのアイデンティティとも言える eTLD+1 のみを表示することで、ユーザにサイトをより明確に認識させるという方式が、特にモバイルで採用されるようになった。 Chrome では 2020 年に発表されている。

先頭に赤で Not Secure と追加したドメインのみ表示する URL バー

先頭に黒でロックアイコンを追加したドメインのみ表示する URL バー

Lock Icon

HTTPS は、緑ではないにせよ Lock Icon 自体は表示されていた。

しかし、 HTTP as Non Secure というベースシフトが起こったことに合わせ、 HTTPS を Secure とする UI からより Normal なものとしていくことになる。

結果、 Chrome は HTTPS から Lock Icon の削除をすると発表した。

当初の計画では、単純に Lock Icon がなくなるような絵がかかれていたが、実際には今 Lock Icon は Permission や Cookie など、この間にブラウザに実装されたさまざまな設定へのエントリポイントを兼ねていた。

そこで、Lock Icon を単純に消すのではなく、代わりに「このサイトが安全かどうかを示してそうに見えない」何か、ハンバーガーメニューや三点メニューのようなメニューアイコンに置き換える必要が出た。 2021 年の段階では下三角のよくあるアコーディオンのアイコンのデモがあった。

しかし、新しいデザインである Tune アイコンが紹介された。

他のブラウザがどうするのかは、発表を見てないように思う。 Chrome と同じ Tune アイコンではないだろうということで、擬似的に中立的なハンバーガーメニューで図を作っておく。

先頭に赤で Not Secure と追加したドメインのみ表示する URL バー

先頭に黒でメニューアイコンを追加したドメインのみ表示する URL バー

Outro

少なくとも HTTPS に関する部分では、 URL Bar の表示は HTTP をいつどう赤くするか/しないかあたりを残し、おおよそ落ち着いたんじゃないかと思う。

実際には、この過程で Mixed Contents をどう表示/処理するかといったサイドワークもあったが、まあそれは少しズレるので今回は省いた。

数年後は、「昔 URL が緑だった時代がある」と懐古する時に、このエントリが引っ張り出せると思う。

DEMO

N/A

Resources