🔐

パスワードマネージャーがいい感じにパスワードを生成してくれる仕組み

2023/08/24に公開

HTML

みなさんは 1Password などのパスワードマネージャーでいい感じのパスワードを生成させたときに、あるときは記号が盛りだくさんの見るからに強そうなものを生成したかと思えば、あるときは英数大文字小文字だけの控えめなものを生成したりして、サイトによっていい感じのパスワードを生成してくれているかのように思ったことはないでしょうか。サイトによっては「使える記号はハイフンだけです」といった指定があり、それに準じた形で 1Password がパスワードを生成してくれているようにも見えます。

今回はパスワードマネージャーがどうやってパスワードを生成しているのか気になったので調べてみました。

どうやっていい感じのパスワードを生成しているのか

冒頭の疑問に対して先に答えを言ってしまえば、生成されたパスワードがフォームの要求をたまたま満たしていただけと言って差し支えなさそうです。新しめのサイトであればパスワードに使える文字列に制限がないことも多いため、生成されたパスワードがすんなり受け入れられる場合が多いでしょう。
とはいえ、パスワードを生成させた後に「使える記号はハイフンだけです」などと赤文字で文句を言われて、手直しを強制されることも依然としてあるわけです。みなさんもこういう場面でイラッとしたことがあるのではないでしょうか。

しばらく調べてみるとパスワードマネージャー（今回は 1Password に限ります）に対して生成させるパスワードを規則付ける手段があることが分かりました。もし何らかの事情でパスワードに規則を設けたいが、UX を損なうわけにはいかない！というときには使えるかもしれません。
要するに、タネも仕掛けもなくいい感じに生成してくれているわけではないということになりますが、いい感じに生成されているなとエンドユーザーに感じてもらえるように開発者が取れる手法を紹介します。

生成されるパスワードを規則付けるには

フォームが規則付けているルールに則ってパスワードを生成させるには、password タイプの input 要素に passwordrules 属性を指定することで実現できます。1Password の場合はこの属性以外に minlength, maxlength 属性も要求しています。

<input type="password" passwordrules="..." />

1Password can generate passwords that fit your website's password requirements. 1Password uses Apple's Password Manager Resources to identify a website's unique password rules along with the shared credential backends file in the same repository for multiple domains that share the same account system.

To provide the rules 1Password will use to generate smart passwords, add the following attributes to each <input type="password"> element:

passwordrules

minlength

maxlength

passwordrules の値は Apple が提供している Password Rules Validation Tool から作成、および検証ができ、ルールに則ったパスワードを生成するかどうかを確認することができます。

試してみる

では、試しに以下の条件でパスワードマネージャーがパスワードを生成するように passwordrules を指定してみましょう。

大文字、小文字、数字が必須
パスワードの長さは 20 文字以上
記号には - だけ含むことができる

この場合は以下のようになります。autocomplete="new-password" としていることでパスワードマネージャーが新しいパスワードをサジェストしてくれるようになります。

<label for="password">
  Password:
  <input
    type="password"
    id="password"
    name="password"
    autocomplete="new-password"
    required
    passwordrules="minlength: 20; required: lower; required: upper; required: digit; required: [-];"
  />
</label>

上の例だとちゃんとルールに則ってパスワードが生成されているか分かりにくいかもしれないので、以下のような明らかに制限しかないルールでも試してみます。

-().&@?'#,/"+ だけ許容

<label for="password">
  Password:
  <input
    ...
    passwordrules="allowed: [-().&@?'#,/"+];"
  />
</label>

たしかに passwordrules 属性の設定によって生成されるパスワードを制御できていますね。

コラム: 引っかかったポイント

手元で試していたときにちょっと引っかかったポイントがあったのでメモを残しておきます。

<form> タグで囲うと新しいパスワードをサジェストしてくれない
- 釈然としないですがいったん放置しました。解決したら追記しようと思います。
ブラウザで HTML ファイルを直接開いても 1Password が働いてくれないのでサーバーを立てる必要がある
- 対象の HTML ファイルがあるディレクトリで python3 -m http.server 8000 とやればすぐです。

まとめ

以上のような感じでパスワードマネージャーに対して自動生成するパスワードを規則づけることができました。標準化された技術使用ではないため使いどころは限られると思いますが、なにかの場面で役に立てれば幸いです。「へぇ〜」と思ったら Like お願いします 👍

どうやっていい感じのパスワードを生成しているのか

生成されるパスワードを規則付けるには

試してみる

コラム: 引っかかったポイント

まとめ

Discussion