Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@oieioi

Chrome のパスワードマネージャの username は、 <input type="password"> の 直前に入力された値が設定される

More than 1 year has passed since last update.

注: この記事に解決方法はありません

現象

システム上のユーザ名(emailとする)とパスワードの間に別の入力項目がある場合

<form action="/sign_up">
  <input type="text" name="email" autocomplete="username">
  <input type="text" name="nickname">
  <input type="password" name="password" autocomplete="new-password">
  <button type="submit">sign up</button>
</form>

メアドのみ先に送るようなユーザ登録フローでありがちな、 emailreadonly だったりする場合

<form action="/sign_up">
  <input type="text" name="nickname">
  <input type="text" name="email" autocomplete="username" readonly>
  <input type="password" name="password" autocomplete="new-password">
  <button type="submit">sign up</button>
</form>

以上のようなフォームを送信した時、 Google Chrome 71 のパスワードマネージャは nickname を ID として保存する。どうやら type=password の直前の入力をユーザ名として認識する様子。 autocomplete="username" なんのためにあるんだろう…

Google chrome autofilling all password inputs - Stack Overflow

Chrome auto fills any input with a type of password and then whatever the input before it is

Stack Overflow に同じ悩みの人を発見。 blurfocus を使って無理矢理 autocomplete 自体を動かないようにしてる

Password Form Styles that Chromium Understands - The Chromium Projects

If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

Chromium の推奨(?)のサインアップフォームの作り方には、 隠しフィールドとして autocomplete="username" を追加せよと書かれているが、この通りにしても上記のようなフォームの username は認識されない。

その他の参考文献

進捗があったら追記する

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
oieioi
ハマったポイントをメモする。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?