3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SPA のログインフォームでパスワード保存確認ダイアログを出す条件

Posted at

結論から言うと、シングルページアプリケーション(SPA)でブラウザ標準のID・パスワード保存機能に依存しない方が無難。セキュリティ的な観点を無視するなら LocalStorage を使って独自実装するのが良いかもしれない。

全ブラウザ共通

  • プライベートモードでない
  • フォームに ID およびパスワード入力欄が含まれている
    • <input type="text" /> または <input type="email" />
    • <input type="password" />
    • 保存される項目は上記の 2 つのみ。これ以外は cookie 等を用いて工夫する

ブラウザごと

Chrome (Win / Mac / Android)

  • submit または click イベント発火
  • フォームの DOM が削除される
  • URL 遷移(History API を用いて同じ URL に履歴書換でも可)
  • 備考
    • 保存確認ダイアログが出なくなったら、ユーザー切替機能を使って新規ユーザーで再度試す

Chrome (iOS)

  • SPA では不可能かもしれない
  • 完全なページ読み込みが必須(window.location ではなく、form の action 指定による遷移)
  • onLoad 後に動的に生成または変更されたフォーム不可

IE 11 / Edge (Win)

  • フォームの submit イベント発火(click イベント不可)
  • パスワード欄の value 属性を書き換えてはいけない(キーやマウス入力に応じて JavaScript から value を代入する方法など)

Safari (Mac / iOS)

  • submit または click イベント発火
  • URL 遷移(History API を用いて同じ URL に履歴書換でも可)
  • 備考
    • iOS 10 以降だけかも。iOS 9 ではダイアログを出せず

Firefox (Win / Mac / iOS / Android)

  • フォームの submit イベント発火(click イベント不可)

Android 標準ブラウザ

  • SPA では不可能かもしれない
  • 完全なページ読み込みが必須(History API 不可)
3
5
0

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
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?