374 文字
2 分
Q. autoComplete/autoFillを完全に防ぎたい
A. 現状、まともな手法では完全に防ぐことが出来なさそう
ref: https://bugs.chromium.org/p/chromium/issues/detail?id=1434624
| auto complete | auto fill | |
|---|---|---|
| autocomplete=off | 無効 | 有効 |
| autocomplete=garbage | 有効 | 無効 |
- AutoFill: Chrome では chrome://settings/autofill に保存したデータに基づいてフォームに入力しようとする。
- AutoComplete: フィールドに入力された以前の値に基づいてフィールドに入力しようする。
ちなみに AutoFill/AutoComplete は label や name だけでなく、直近の要素の文字列なども加味する。例えば label を付けていない input 要素を大量に並べて、近くに”名前”という文字列を入れた div を置いておくと、ほとんどの input 要素に名前が補完されるようになる。
ワークアラウンド
ReadOnly 属性を悪用する
当然 readonly 属性を付けたフォーム要素では autoFill も autoComplete も発火しない。これを悪用して、フォーカスが外れている際に readonly を属性を付与し、他のフォームの影響を受けないようにする。
<form onSubmit={(event) => { event.preventDefault(); const formData = new FormData(event.currentTarget); const city = formData.get("city"); // readOnlyの場合、バリデーションが効かなくなるので代わりの手段が必要 if (!city) { new Error("city is requried"); } }}> <label> 市区町村 <input name="city" // readOnlyを付ければautoFill/autoCompleteが効かない（恐らくこの挙動は環境に依らない） readOnly onFocus={(event) => { // お行儀が悪い event.currentTarget.readOnly = false; }} onBlur={(event) => { // お行儀が悪い event.currentTarget.readOnly = true; }} /> </label></form> Q. autoComplete/autoFillを完全に防ぎたい
https://blog.ohirunewani.com/posts/q-autocomplete-autofill/