Zenn
Closed2

Chromeでメールアドレス/パスワードの自動入力を無効にしたい

Chrome
Next.js
React
misawamisawa

Next.jsで会員登録画面を実装する時に、Chromeだとメールアドレスとパスワードが自動入力されてしまうので、無効にしたいです。

環境は以下になります。

  • Google Chrome:116.0.5845.140
  • React:18.2.0
  • Next.js:13.2.4
  • Mantine:6.0.13

autocomplete="off"にすれば自動入力を無効にできると言われていますが、自動入力されてしまいます。

<form
  onSubmit={form.onSubmit((values) => {
    void handleSubmit(values);
  })}
+ autoComplete="off"
>
  <Paper withBorder shadow="md" p={30} mt={30} radius="md">
    <TextInput
      label="ユーザー名"
      required
      {...form.getInputProps("name")}
    />
    <TextInput
      label="メールアドレス"
      required
      {...form.getInputProps("email")}
    />
    <PasswordInput
      label="パスワード"
      required
      mt="md"
      {...form.getInputProps("password")}
    />
    <PasswordInput
      label="確認パスワード"
      required
      mt="md"
      {...form.getInputProps("confirmPassword")}
    />
    <Button fullWidth mt="xl" type="submit">
      ユーザー登録
    </Button>
  </Paper>
</form>

ReactなのでキャメルケースでautoComplete="off"としています。

misawamisawa

MDN Web Docsを確認すると下記のように記載されています。

  • ウェブサイトが autocomplete="off" を <form> に設定しており、かつそのフォーム内にユーザー名とパスワードの入力欄が含まれていた場合、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。
    -ウェブサイトが autocomplete="off" をユーザー名とパスワードの <input> 欄に設定していた場合でも、ブラウザーはログイン情報を記憶するか尋ねてきて、ユーザーが同意すれば、次回の訪問時にログイン欄を自動入力します。
    この挙動は Firefox 38 以降、 Google Chrome 34 以降、 Internet Explorer 11 以降で共通です。
    ログイン情報を記憶している場合は、autocomplete="off"としても自動入力がされるようです。

また、MDN Web Docsには自動入力を抑止する方法も記載されていました。

他人のパスワードを指定するようなユーザー管理ページを定義していて、パスワード欄の自動入力を抑止したい場合は、 autocomplete="new-password" を使用することができます。

これはヒントであり、ブラウザーは守る必要はありません。しかし、最近のブラウザーは <input> 要素に autocomplete="new-password" を設定すると自動入力を停止します
パスワード欄にautocomplete="new-password"を追加すれば、自動入力を無効にできるようです。

<form
  onSubmit={form.onSubmit((values) => {
    void handleSubmit(values);
  })}
- autoComplete="off"
>
  <Paper withBorder shadow="md" p={30} mt={30} radius="md">
    <TextInput
      label="ユーザー名"
      required
      {...form.getInputProps("name")}
    />
    <TextInput
      label="メールアドレス"
      required
      {...form.getInputProps("email")}
    />
    <PasswordInput
      label="パスワード"
      required
      mt="md"
      {...form.getInputProps("password")}
    />
    <PasswordInput
      label="確認パスワード"
      required
      mt="md"
      {...form.getInputProps("confirmPassword")}
+    autoComplete="new-password"
    />
    <Button fullWidth mt="xl" type="submit">
      ユーザー登録
    </Button>
  </Paper>
</form>

上記の通り、変更したら自動入力を無効にできました！

このスクラップは2023/08/31にクローズされました