Q. autoComplete/autoFillを完全に防ぎたい
autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。
Table of Contents
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>