パスワード入力欄で強力なパスワードが提案されるようにしたい。

解決したいこと。

HTMLを使って、パスワード入力欄にフォーカスが当たったときに、強力なパスワードが提案されるようにしたいです。
JavaScriptを使わなければできないのであれば、それでもよいですが、できればOSやブラウザで一般的に提供されているもので解決したいです。

強力なパスワードの提案とは

アカウント新規登録時などにパスワードを設定しますが、その際にブラウザから提案（表示）されるランダムな文字列のことを指します。

環境

Windows10
Chrome 92.0.4515.131（Official Build）（64 ビット）
FireFox 90.0.2（64ビット）
Edge バージョン 92.0.902.67 (公式ビルド) (64 ビット)

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

試したこと

以下のコードを使って、パスワードが提案されないか検証しています。パスワード入力欄は2種類で検証してます。

   <form method="POST">
     <label for="password">パスワード</label>
     <input id="password" name="password" type="password" />  // 1種類目
     <input type="submit" value="Submit" />
   </form>
   <label for="password">パスワード</label>
   <input id="password" type="password" autocomplete="new-password" />  // 2種類目

詳細

FireFoxでは、2種類目のパスワード入力欄で強力なパスワードが提案されていることは確認してます。
ChromeやEdgeでも同じようにならないものかと困っています。

chrome://flags で「password」や「autofill」でオプションをフィルタの上、すべて「Enabled」にして試してもChromeやEdgeはパスワードを提案しませんでした。

hentaiman

2021/08/08 02:40

・autocomplete関係ない・パスワードが提案の意味の定義・強力なパスワードの定義をしてから必ずサーバーサイドで実装しましょう

int32_t

2021/08/08 04:51 編集

Chrome でパスワードフィールドで右クリックすると「パスワードを自動生成…」というメニュー項目がありますが、これ以外のどういう動作をご所望でしょうか。

NagaseTomohiko

2021/08/08 05:26

hentaimanさんご指摘ありがとうございます。 autocompleteに関しては、この属性の設定有無で少し挙動が変わるので、関係ある認識です。設定あり）フォーカスを当てると、パスワードが提案されます。設定なし）フォーカスを当てても、パスワードが提案されない。パスワードの提案についての追記をしました。結果としてサーバサイドが必要になるかもしれませんが、現状は不要の認識です。

NagaseTomohiko

2021/08/08 05:32

int32_tさん質問ありがとうございます。私の環境では、Chromeでパスワードフィールドで右クリックしても「パスワードを自動生成...」のようなメニューはでてきません。FireFoxであれば出てきましたが。今回の質問では、フォーカスを当てるとパスワードを提案される動作を期待しています。Chromeだとそれができなかったので、何が問題なのか解決したいということになります。ご提示いただいている右クリックに関しても調べてみます。

退会済みユーザー

2021/08/08 05:56 編集

。

hentaiman

2021/08/08 05:56

> 少し挙動が変わるので、関係ある認識ですそれは > 強力なパスワードの定義は自分ではしないし制限もかけないから問題無いという意味ならそうですね質問内容から想像出来た最低限必要な機能と質問者の求めるものに違いがあったようで、失礼しました

行動規範の内容に同意します

回答2件

ベストアンサー

Chromeで、下記のHTMLを http:// か https:// でアクセスしたら、右クリックなしでパスワード提案されました。file:/// だとダメなようです。<form>はなくても良いようでうす。

ChromeとGoogleアカウントの紐付けとパスワード同期は必須でしょう。

html
1<!DOCTYPE html>
2<form>
3<input type="password" autocomplete="new-password">
4</form>

投稿2021/08/08 05:55

編集2021/08/08 05:57

int32_t

総合スコア21695

NagaseTomohiko

2021/08/10 23:55

回答いただきありがとうございます。自分で確認するための環境を構築するため、その作業に手間取り、返事遅れました。今後のため、少し詳細を記載します。 file://ではパスワード提案されない点は盲点でした。 http、httpsで、formタグなしてもパスワード提案されることを確認しました。Chromeに限らず、Safari（on iPhone）でも同様です。Safariの場合はiCloudキーチェーンをオン、パスワードの自動入力をオンにする必要はあります。Chrome系の場合は、他の回答でいただいているようにパスワード系の設定が必要です。 autocomplete="new-password"がないと、パスワード入力欄にフォーカスを当てただけではパスワードが提案されませんでした。やり方が悪いかもしれませんが、オレオレ証明書ではパスワード提案されませんでした。（これは別に問題ではありません。）（証明書関係なく）localhostでもパスワード提案はされませんでした。

行動規範の内容に同意します