パスワード変更時の再入力が一致しない件

パスワード変更時の再入力が一致しない件:

経緯

はるか昔に登録していた Qiita のユーザ名を変更しようとしたら、パスワードの登録が必要なようでした。GoogleやTwitter連携でログインしていたので、パスワードを登録していませんでした。その際に、「パスワードの再入力」で30秒ほどハマったのが気になったので記載します。

Qiita のパスワード変更

「設定 > パスワード」で変更画面を表示できます。

事象

パスワードは、思い浮かべた単語の組み合わせか、ジェネレータで生成されたものをよく使います。

今回は、思い浮かべた単語の組み合わせます。

パスワード入力欄と再入力欄に軽快に入力し[Enter]します。

// 脱線しますが、パスワード欄にペーストさせないサイトもあるようですが、Qiitaは許可しているようですね。

// 調べるとUIとセキュリティの勉強になりそうです。

"Password confirmationとパスワードの入力が一致しません" の悲しい文言が表示されました。

完全にタイポと思い再入力しましたが、状況は変わらずでした。

[Enter]押す前に入力欄の ● を見ると、再入力欄の方がわずかに長いことに気が付きました。

// inputタグの type が "password" のときに表示される ● です。

確認したところ、初回の入力途中で勝手に文字が削除されてしまうようです。

// うまく説明できませんが、●●●●● と入力すると、一瞬の後、●●●● になります。

お勉強

素人ですが、ソースを見てみることにしました。

inputタグはこちら。

<input class="st-Form_text" required="" maxlength="32" type="password" name="user[password]"> 

class="st-Form_text"のCSSはこちら。

.st-Form_text { 
    display: block; 
    width: 100%; 
    font-size: 1.6rem; 
    background-color: #fff; 
    border-radius: 3px; 
    border: 1px solid #ccc; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
    padding: 8px 16px; 
    cursor: text; 
    margin-top: .6em; 
} 

transitionが気になり ease-in-out の時間を変えたりしてみましたが、関係する挙動はなさそうでした。

では、パスワード強度判定かなと思い header を見てみると、こちらがありました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script> 

AGILE社のWebサイトから zxcvbn.js の使い方を確認します。

実際に、zxcvbn の処理を行っている以下の .js をダウンロードして試してみようとしましたが、、

・https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js

・https://cdn.qiita.com/assets/public/bundle-70a524d8910b351d2a389235c5312375.min.js

ChromeDevToolでエラーになりました。もう少し工夫が必要そうです。

bundle-70a524d8910b351d2a389235c5312375.min.js:1 Uncaught TypeError: Cannot read property 'dataset' of null 
    at bundle-70a524d8910b351d2a389235c5312375.min.js:1 
    at bundle-70a524d8910b351d2a389235c5312375.min.js:1 

ここまでで予想としては、1文字入力する毎に判定処理が走っているので、強度判定の処理に時間がかかるのかなと思います。

が、なぜ文字が消えるのかまではわかっていません。

もしかして、強度判定が終わった文字列を、input要素に挿入しているのかもしれません。

時間があるときに引き続き調査します。

// inputタグの maxlength="9999" にして試してみたら、PCが暖かくなりました。