プログラミング
`<input type="password" maxlength="20">` が Vanguard へのログインを妨げる
<input type="password" maxlength="20"> prevents me from logging into Vanguard (tanin.nanakorn.com)
要約
Vanguard のウェブサイトで、パスワード入力フィールドに `maxlength="20"` という属性が設定されていたため、20文字を超えるパスワードを設定したユーザーがログインできなくなる問題が発生しました。パスワードリセット時に設定された短い最大長と、ログイン時にその制限がないことの不一致が原因でした。
全文翻訳
Vanguard のアカウントにウェブ経由でログインできない状態が長く続いていました。過去1年間でパスワードを3回ほどリセットしましたが、それでもうまくいきませんでした。もっと深く考える時間がなかったので、不具合だと決めつけていました。携帯電話の Vanguard アプリで QR コードをスキャンしてログインするだけでした。
結局、時間をかけて原因を突き止めることにし、`maxlength="20"` が根本原因だとわかりました。説明させてください。
Vanguard にはパスワードリセットフォームがあり、そこで `<input type="password">` に `maxlength` が 20 に設定されています。私はセキュリティ意識が高いため、1Password を使用しています。当然、生成されるパスワードは20文字よりも長いです。パスワードをコピーしてパスワード入力フィールドに貼り付けます。
単純化のために、私のパスワードが abcdefghijklmnopqrstuvwxyz (26文字) だとしましょう。`maxlength` が 20 なので、Chrome は以下に示すように abcdefghijklmnopqrstu (20文字) しか入力しません。
パスワードを2回貼り付けます。一度はパスワードフィールドに、もう一度は確認用パスワードフィールドに。その後、送信をクリックします。
すべてうまくいきました。パスワードリセットは成功しました!
次に、ログインページに移動して同じパスワードでログインしようとします。
判明したことですが、ログインページのパスワードフィールドには `maxlength` が 20 に設定されていません。そのため、貼り付けられたパスワードは、以下に示すように完全な abcdefghijklmnopqrstuvwxyz (26文字) になります。
Vanguard はパスワードが間違っていると不満を言います。そして、パスワードをリセットしたばかりなのに、私は非常に混乱しました。
これは、パスワードフィールドに `maxlength` 属性を使用すべきではない理由の1つです。長さの検証を JS またはバックエンドで行う方が、ユーザーが送信する正確なテキスト(意図せずトリミングされたテキストではない)を処理するため、優れていると思われます。