O hirunewani blog

Q. autoComplete/autoFillを完全に防ぎたい

Created at

autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。

A. 現状、まともな手法では完全に防ぐことが出来なさそう

ref: https://bugs.chromium.org/p/chromium/issues/detail?id=1434624

auto completeauto 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>