パスワードの「●●●」は暗号化？画面で隠すことと通信の保護を分けよう

ログイン画面で入力した文字が「●●●」になると、もう安全な形へ変換されたように感じるかもしれない。でも、伏せ字は画面上の表示を隠すためのもの。通信や保存の保護とは、別に考える必要があるよ。

この記事では、自分の本当のパスワードを使わず、架空の文字で表示を切り替える。目標は「隠れている見た目」と「データがどう扱われるか」を区別すること。ブラウザだけで試せるよ。

passwordという入力欄が、見た目を伏せる

HTMLはページの内容や部品を記述する言語。inputという入力部品にtype="password"を指定すると、ブラウザは通常、入力文字を点などに置き換えて表示する。

<label for="practice">練習用の文字</label>
<input id="practice" type="password" value="sample-only">

点の形や、一瞬だけ最後の文字が見えるかはブラウザや端末で異なる。伏せ字の見た目から、サービスがパスワードをどんな形式で保存しているかまでは分からないよ。

架空の文字で切り替えよう

記事下の作例は、sample-onlyという固定の架空文字を表示する。実際のパスワードを入れないよう、編集できない欄にしている。フォーム送信や外部への通信を行う処理もない。

1. 最初は文字が点などに置き換わっていることを確認する。
2. 「文字を表示する」を押すと、sample-onlyが見える。
3. 「文字を隠す」を押すと、再び伏せ字になる。
4. 表示中も非表示中も、下の確認表示が「値はsample-onlyのまま」となることを読む。

切り替えているのは入力欄のtypeだけ。保持している文字列は変わらないことを、ブラウザで確認した。記事側の「最初から試す」で隠れた状態へ戻せるよ。

表示・通信・保存はそれぞれ確認する

HTTPSは、通信相手のサイト自体が信頼できることまで保証しない。似た名前の偽サイトにもHTTPSは使われる。パスワードを入れる前に、目的のサービスのURLかを確認しよう。

また、type="password"を付けるだけで、サービス側の保存が安全になるわけではない。ログイン機能を作る場合は、認証の設計や保存処理を別に扱う必要がある。今回の作例はログイン機能ではなく、画面の表示だけの練習だよ。

パスワード管理機能と合わせて考える

ブラウザやパスワード管理アプリには、対象サイトの情報を入力する機能がある。Web制作者は、現在のパスワード欄にはautocomplete="current-password"、新規設定にはnew-passwordなど、用途を示す指定を検討しよう。伏せ字と自動入力は別の役割なんだ。

利用者としては、自動入力されないからといって、すぐ保存内容をコピーして入力せず、URLと対象アカウントも見直すとよい。追加の認証については、二要素認証の基礎を参考にしてね。