search
LoginSignup
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

input type password の autocomplete="new-password" 調査

Firefox 70から新しい属性機能が追加されました。

以下の状況で、安全に生成されたパスワードを Firefox がユーザーに提案できるようになりました:

autocomplete="new-password" 属性を設定した 要素。
新しいパスワードを意図したかにかかわらず、パスワード入力要素でユーザーがコンテキストメニューを開いた。

Firefox 70 for developers - Mozilla | MDN

developersで失礼。リリース版は
Firefox 70.0, See All New Features, Updates and Fixes

便利そうでちょっと気になったのでテスト

簡易テスト

コード

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
    </head>
    <body>
        <input type="password" autocomplete="new-password" name="test">
    </body>
</html>

実行結果

pass.png

表示されたパスワードを選択した時点で、可視化された状態でinputに入力され、

pass2.png

フォーカスを外すと●の表示になる。

また、選択時点でFirefoxにパスワードが記録される。

pass3.png

pass4.png

input上での右クリックからでも提案を受けることができるが、この場合は選択するまでどのような値が入るかは不明。
ただし値はクリックで提案されるものと同一である。

pass5.png

このパスワードはサイトリロードや記録されたパスワードの削除を行っても、再び同一のパスワードが提案される。
そのため毎回ランダムな値を生成しているわけではなさそう。

patternテスト

pattern属性で制限された場合、考慮してくれるかを見ておく

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
    </head>
    <body>
        <form>
            <input pattern="\d+" type="password" autocomplete="new-password" name="test">
        </form>
    </body>
</html>

大方の予想通り値は変わらなかったので、使えない場合も多々ありそう。
まあサーバー側のパターン制限が見えないのでたいした意味はありませんね。

pass6.png

textでテスト

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
    </head>
    <body>
        <form>
            <input pattern="\d+" type="text" autocomplete="new-password" name="test">
        </form>
    </body>
</html>

typeをpassword以外にしても動作するかをみましたが、これは当然動作せず。

匿名ユーザーの一時ユーザー名生成などに使えるかなと思ったのですが、かなり用途外ですね。

補完条件

MDNでは

HTML の autocomplete 属性 - HTML: HyperText Markup Language | MDN

自動補完を提供するために、ユーザーエージェントは // 要素に次のことを要求することがあります。

name や id 属性を持つこと

要素の子孫であること
フォームが submit ボタンを持つこと

とあるが、サンプルコードでは単体のinptutで動作した。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1
Help us understand the problem. What are the problem?