🔑

[React] Chromeでアカウントとパスワード自動入力を禁止する

2023/01/16に公開

概要

Chromeでアカウントとパスワードの自動入力を禁止したいですが、ググるとautocomplete="off"にする方法やautocomplete="new-password"などにする方法などが出てきますが、Chromeではどれも効きませんでした(Safariでは効きました)。

原因

Chromeではinput typeがpasswordになっていると、そのフォームの一個前のinputをアカウントとして、自動入力してくれるらしい。

例えば、このような場合だと自動で入力してくれます。

<form>
	<input type="text" name="account" />
	<input type="password" name="password" />
	...
</form>

普通のログイン画面なら自動入力してくれて問題ないですが、パスワードではないのに、パスワードのように隠したい番号などでtype="password"を使うとログインアカウントで自動入力されます。

例えば、

<form>
	<input type="text" name="user-name" />
	<input type="password" name="security-code" />
	...
</form>

この場合Chromeはsecurity-code入力欄をログイン用のパスワード入力欄だと認識し、一個前の入力欄をアカウントと認識して、自動入力させたくないが、自動的にアカウントとパスワードを入力してくれます。

解決策

1.input type="text"にしてjavascriptでコントロールする。こちらの記事を参照
https://blog.soln-sns.net/how-to-solve-the-google-chrome-autocomplete-off-problem/#JavaScript_のイベント処理で解決する
2.もしReactを使っているのなら、React Input Maskを使う。こちらの記事を参照
https://wp-kyoto.net/react-input-mask/

Discussion