iOS9.0.2のSafariで意図しないフォームにユーザー名が自動入力される現象を調べた時のメモ

## 発生した現象
ログインIDとパスワードを保存しているサイトで、ユーザー情報を編集する画面を開いた際に本来メールアドレスを入力する欄にログインIDが補完された。
iOS9.0.2でのみ発生。

## 再現してみる
とりあえず下記のような最小限のログインフォームのようなものを作ってlogin_idとpasswordの値を保存した。

```html
<form method="POST">
  <div>
    login_id<input type="text" name="login_id">
  </div>
  <div>
    password<input type="password" name="password">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4912.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/9c7b6199-4e8e-6581-a21d-26969ce43c65.png)


---

自動入力が働いた時と同じ名前の入力欄があるページを作って開いてみる。

```html
<form method="POST">
  <div>
    email<input type="text" name="email">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4913.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/c6b0c704-0653-fe80-b1db-95fddc507833.png)


あれ…入力されない…

色々試してみたところpasswdという名前の欄を追加すると再現することが分かった。（現象が発生したページにも存在する）

```html
<form method="POST">
  <div>
    email<input type="text" name="email">
  </div>
  <div>
    passwd<input type="text" name="passwd">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4914.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/89c6d547-cec7-cf25-a7da-7e80621756e3.png)


半端に略されてるのが気になりnameをpasswordにしても同様の動きをした。

ちなみにpasswdのtypeをpasswordにするとパスワードまで補完されてしまった。(name違うのに)

```html
<form method="POST">
  <div>
    email<input type="text" name="email">
  </div>
  <div>
    passwd<input type="password" name="passwd">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4917.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/6c64d56e-c28c-4b1d-414a-a226c06ca3c9.png)


## もう少し調べた
ユーザー名っぽい名前の欄とパスワードっぽい名前の欄があるとログインフォームだと判定されるのか、保存してあるユーザー名をユーザー名っぽい欄に入れることが分かった。

```html
<form method="POST">
  <div>
    foo<input type="text" name="foo">
  </div>
  <div>
    username<input type="text" name="username">
  </div>
  <div>
    bar<input type="text" name="bar">
  </div>
  <div>
    passwd<input type="text" name="passwd">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4915.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/f636933b-9989-4c45-5a42-05c446bcfead.png)


ユーザー名っぽい名前の欄が無ければパスワードっぽい名前の欄の直前に入る模様

```html
<form method="POST">
  <div>
    foo<input type="text" name="foo">
  </div>
  <div>
    bar<input type="text" name="bar">
  </div>
  <div>
    passwd<input type="text" name="passwd">
  </div>
  <div>
    <input type="submit">
  </div>
</form>
```

![IMG_4916.PNG](https://qiita-image-store.s3.amazonaws.com/0/60104/1be9ddb9-0e4d-0b8f-59b4-a211ad544dcb.png)


## 色々試してみた
ユーザー名っぽい名前

* email
* id
* login_id
* user_id
* login_name
* user_name
* username
* loginname

ユーザー名っぽくない名前

* user
* name
* loginid
* userid

パスワードっぽい名前

* passwd
* password
* user_passwd
* login_passwd

パスワードっぽくない名前

* pass
* pwd
* pword
* userpasswd
* loginpasswd

ユーザー名っぽくない文字列同士でも組み合わせるとユーザー名っぽい文字列になったりする。
パスワードはpasswd、passwordあたりが単語として含まれていると認識される？
よくわからない。

## 結局
パスワードっぽかった欄の名前をパスワードっぽくない名前に変更することで凌いだ。

## 関連してそうな記事
[iOS 9.0.1のSafariでログインフォームの自動入力が効かない](http://qiita.com/muro/items/4cc6b0f1f4da6e81a1be)

逆に自動入力してくれない話。
バージョンが近いし何か怪しい…

[Safariのオートコンプリートの不思議な挙動](http://qiita.com/ymrl/items/bd24b9850a5a403b4c0d)

iOSの話ではないけど似た挙動の話。
この記事のオートコンプリートを抑止する方法は、パスワードっぽい欄のtypeがpasswordならiOSでも有効だった。