Google Chromeのパスワード保存についての条件

Question

Google Chromeのパスワード保存の条件について
サブドメインで運用している複数のサイトがあます。

https://a.example.com/login/
https://b.example.com/login/

このように各サイトにログインフォームがあるのですが、
Aのログインフォームで保存したログインIDとパスワードが、
Bのログインフォームにオートコンプリートされて困っています。

GoogleChromeに違うサイトと認識させることができる方法があれば教えて頂けますでしょうか。
各HTMLファイルは別々のファイルなので変更することができます。

<form method="post">
<h1>User Login</h1>
<input name="loginId" type="text" placeholder="ログインID">
<input name="password" type="password" placeholder="パスワード">
<button type="submit">ログイン</button>
</form>

今は上記のようなシンプルなHTMLを使用しています。
よろしくお願い致します。

Comments

[x_x]

name属性値が同じだったりするのでしょうか？

[m.ts10806]

autocomplete=offにするという選択肢は考えられてませんか？

[keisuu]

レスありがとうございます！

[keisuu]

>name属性値が同じだったりするのでしょうか？
nameは同じ文字列を指定しています。

>autocomplete=offにするという選択肢は考えられてませんか？
受託案件なのですが、クライアント的にはautocomplete=onで使用したい意向なので なんとかうまくできないかなと調べているところです。

Answer 1

name属性値を変更するのが手っ取り早いです。
ただ、これだとサーバー側の変更も必要になってくるでしょう。
jQuery disableAutoFill プラグインのような考えで、入力時は別名にしておき、送信前に本来のnameに変更するようにすれば、サーバーを変えずに対応できます。

https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields#Use_jQuery_disableAutoFill_Plugin

-- 実装例追加

document.addEventListener('DOMContentLoaded', event => {
  const sx = '-' + btoa(location.pathname);
  document.querySelectorAll('input[name]').forEach(v => { v.dataset['name'] = v.name; v.name += sx; });
  document.addEventListener('submit', event => {
    document.querySelectorAll('input[name][data-name]').forEach(v => v.name = v.dataset['name']);
  });
});

Comments

[keisuu]

name属性の変更の方向で考えてみます。
色々調べて頂きありがとうございます。