input要素はパスワードジェネレーターを思いやれ #HTML

先に結論だけ

前提として、パスワードには最小の長さ以外の制限を課すべきではありません。

その上で、htmlの<input type="password">要素に

を設定すると、パスワードジェネレーターとの相性がよくなります。

この記事は、パスワードジェネレーターとinput要素の属性がどのように関係するのかを記録、共有するためのものです。

複数サービスでのパスワードの使い回しはセキュリティリスクを上昇させます。しかし安全なパスワードをサービスごとに考えたり覚えるのは大変です。パスワードの生成と記録には、パスワードマネージャーの補助が必須となっています。

文字種や長さに制限があると、ジェネレーターはそのサービスでは利用できないパスワードを生成してしまいます。その場合ユーザーは

といった作業を強いられます。この手順はユーザー体験に悪影響を与えます。

こうした作業を回避する方法はないか、input要素の属性を検証していきます。

パスワードから文字種と長さの制限をなくすのが理想ですが、この記事ではサーバーサイドの変更はせずhtmlのみを対象とします。

input要素には、パスワードジェネレーターに関連する属性があります。

入力文字数の最短文字数を指定する属性です。たとえばこの属性に12を指定すると、12文字未満の入力は無効と判定されinput要素に:invalid擬似クラスが追加されます。

各種パスワードマネージャーはこの属性を読み取り、これ以上の長さのパスワードを生成します。

maxlengthは、最大文字数を指定する属性です。パスワードマネージャーはこの属性を読み取り、これ以下の長さのパスワードを生成します。

pattern属性は、そのinputフィールドに入力された値の検証に利用されます。この属性はメールアドレスや電話番号などのタイプミスを検証する目的で利用されます。

パスワードジェネレーターは、この属性を無視します。

ジェネレーターはパスワード生成の前にはpattern属性を利用せず、サービスに利用できないパスワードを生成することがあります。

autocomplete属性は、input要素に自動入力される値を指定します。

この属性は、input要素に新しいパスワードを入力することを示します。パスワードマネージャーに記録されている、既存のパスワードのオートコンプリートは無効化されます。

パスワードジェネレーターによっては、同じページに複数の"new-password"属性を持ったinputがある場合、パスワード生成後にそれらの要素を同じパスワードで埋めます。パスワード再設定画面では積極的にこの属性を利用しましょう。

この属性は、設定済みのパスワードを入力することを示します。この属性があるとパスワードジェネレーターの動作は抑制されます。既存のパスワードを入力してほしいinput要素には、この属性を設定しましょう。

passwordrules属性は、パスワードジェネレーターに生成ルールを教えるために提案された属性です。

独自の書式で、必須となる文字種と文字数を指定します。

現在この属性に対応しているのは、Safariと1Passwordだけです。他の環境ではこの属性は無視されます。

mozillaはこの提案に対してネガティブの姿勢をとっています。

という理由です。

passwordrules属性が将来広くサポートされるかは未知数です。採用する前にメンテナンスコストや副作用について検討してください。

以上、ありがとうございました。