こんにちは、開発部の渡辺です。
「最近、パスワードインプットのautocomplete属性周りが盛り上がってるよ、ちょっと調べてよ」という話を頂いたので、現時点での各ブラウザの挙動をさっくりと調べて結果を記します。
背景
6月にリリースされたFirefox 30の対応によって、ほとんどのモダンブラウザではautocomplete=offにしてもパスワードマネージャへの保存を禁止することはできなくなりました1。
しかし、保存されたパスワードがインプットにフィルインされる挙動はブラウザごとに微妙に異なります。すでに幾つかの記事2で言及されている内容ではありますが（二番煎じ感に溢れててごめんなさい）、複数のブラウザで動作を確認する中で、様々な条件があったので、それらをまとめてみようと思います。
調査内容
今回調べる具体的な内容は、「ブラウザに保存されたパスワードが自動フィルインされる条件」です。
本稿では、自動フィルインとは、特定のWebページを開いた時に、テキストインプットとパスワードインプットに保存していた値が自動で入力される機能のことを指します。ユーザー操作による、テキストインプットの候補の選択を必要とするものは、自動フィルインとは呼びません。
自動フィルインの例
ユーザーの操作が必要な例
また、ブラウザのパスワード保存の設定が有効になっていることを前提とします。
対象ブラウザ
調査に利用したブラウザの一覧を示します。
| ブラウザ | 詳細バージョン | 環境 |
|---|---|---|
| IE11 | 11.0.9600.16518 | Windows7 |
| Chrome | 35.0.1916.153 | OS X 10.9.4 |
| Safari | 7.0.5(9537.77.4) | OS X 10.9.4 |
| Firefox | 30.0 | OS X 10.9.4 |
準備
まず、ブラウザにパスワードを保存するため、ログイン画面によく見られるフォームを含むHTMLを用意しました。
<form action="/login" method="POST">
<input type="text" name="username">
<input type="password" name="password" autocomplete="off">
<input type="submit">
</form>また、ログインのリクエストを処理する簡易なサーバも用意しました。サーバはログインのリクエストを受け取ると、別画面へのリダイレクトレスポンスを返します。（よくあるログイン処理のフローです）
調査条件
複数のブラウザでの挙動を確認していく中で、自動フィルインの動作に影響する条件を幾つか確認することができました。今回は、以下の３つの条件において、各ブラウザに自動フィルインが発生するかどうかを調べます。
- パスワードインプットのautocomplete属性のON/OFF
- 複数のパスワードが保存されているかどうか
- ページに複数のフォームが含まれるかどうか
手順と結果
各項目における手順は、ブラウザに保存されているパスワードをリセットした後に実施しています。
autocomplete属性のON/OFF
以下の手順を実施しました。
- ログインフォームにユーザー名とパスワードを入力し、送信ボタンを押す
- パスワードマネージャーにパスワードの保存を確認されるので、保存するを選択する
- ログインフォームのページにURL直打ちで遷移する
手順3において、自動フィルインされるかどうかを、パスワードインプットのautocomplete属性を切り替えて確認しました。結果は以下です。
◯＝自動フィルインされる ☓＝自動フィルインされない
| autocomplete=ON | autocomplete=OFF | |
|---|---|---|
| IE11 | ☓ | ☓ |
| Chrome | ◯ | ◯ |
| Safari | ◯ | ◯ |
| Firefox | ◯ | ☓ |
複数パスワードが保存されている場合
以下の手順を実施しました。
- ログインフォームにユーザー名とパスワードを入力し、送信ボタンを押す
- パスワードマネージャーにパスワードの保存を確認されるので、保存するを選択する
- 手順1,2を別のユーザー名で繰り返し、２つ目のパスワードを保存する
- ログインフォームのページにURL直打ちで遷移する
手順4において、自動フィルインされるかどうかを確認しました。結果は以下です。
| 複数パスワード | |
|---|---|
| IE11 | ☓ |
| Chrome | ◯ |
| Safari | ◯ |
| Firefox | ☓ |
※Chrome,Safariでは最後にログインに利用したパスワードが自動フィルインされる
ページに複数フォームが含まれる場合
以下のフォームを用意します。
<form id="form1" action="/login" method="POST">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
</form>
<form id="form2" action="/login2" method="POST">
<input type="text" name="username2">
<input type="password" name="password2">
<input type="submit">
</form>このフォームに対し、以下の手順を実施しました。
- form1にユーザー名とパスワードを入力し、送信ボタンを押す
- パスワードマネージャーにパスワードの保存を確認されるので、保存するを選択する
- ログインフォームのページにURL直打ちで遷移する
手順3において、自動フィルインされるかどうかを、手順1においてform1とform2を切り替えて確認しました。結果は以下です。
| form1を送信 | form2を送信 | |
|---|---|---|
| IE11 | ☓ | ☓ |
| Chrome | ◯（form1,form2に自動フィルイン） | ◯（form1,form2に自動フィルイン） |
| Safari | ◯（form1に自動フィルイン） | ◯（form1に自動フィルイン） |
| Firefox | ◯（form1,form2に自動フィルイン） | ◯（form1,form2に自動フィルイン） |
一覧
| ac=ON | ac=OFF | 複数パスワード | 複数フォーム | |
|---|---|---|---|---|
| IE11 | ☓ | ☓ | ☓ | ☓ |
| Chrome | ◯ | ◯ | ◯ | ◯（両方のフォーム） |
| Safari | ◯ | ◯ | ◯ | ◯（一つ目のフォーム） |
| Firefox | ◯ | ☓ | ☓ | ◯（両方のフォーム） |
- IE11でパスワードをフィルインするためにはユーザー操作が必要
- autocomplete=OFFだとFirefoxでは自動フィルインされない
- 複数のパスワードが保存されている場合、Chrome,Safariでは保存されているパスワードの内、最後に利用されたものが自動フィルインされる
- 複数フォームがある場合、SafariはHTML上で一番上のフォームに自動フィルインする。ChromeとFirefoxは全てのフォームに自動フィルインする
まとめ
本稿では、ブラウザに保存されたパスワードの自動フィルインについて、各ブラウザの挙動の違いを調べました。自動フィルインが動作するかどうかは、各ブラウザによってその条件が異なります。ブラウザの動作を確認する際に、自動フィルインの挙動に疑問を感じた時など、本稿が少しでも参考になればと思います。あるいは、飲み会の席で、autocompleteについて熱く語りあう話のネタにでもなれば幸いです。
