How to make Chrome remember password for an AJAX form?

Question

I'm using AJAX for fast input validation on my login page. If everything is correct, the user is redirected.

Here's the code:

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

It works really well in all browsers. But there's a problem in Chrome. It doesn't offer to save the password.

When JavaScript is turned off, the password is saved, so the problem is definitely in redirection to a new location.

How can I fix that?

If you are using `e.preventDefault()` or `return false`, then it's a bug in Chrome: https://code.google.com/p/chromium/issues/detail?id=282488 — mkurz, Jan 31 '14 at 22:29
I'm experiencing same problem with Chrome Version 50.0.2628.0 Canary. The weird thing is that it suggest password save when I run the website on my localhost. — HasanG, Jan 23 '16 at 23:22

zeitgeist87 · Answer 1 · 2014-08-01T09:02:19.513

13

I have found a dirty workaround for this problem, by inserting an invisible iframe and targeting the form to it:

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

The corresponding JavaScript:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

The trick is, that there are really two requests made. First the form gets submitted to /blank.html, which will be ignored by the server, but this triggers the password save dialog in Chrome. Additionally we make an ajax request and submit the real form to /login. Since the target of the first request is an invisible iframe the page doesn't refresh.

This is of course more useful if you don't want to redirect to another page. If you want to redirect anyway changing the action attribute is a better solution.

Edit:

Here is a simple JSFiddle version of it. Contrary to claims in the comment section, there is no reload of the page needed and it seems to work very reliably. I tested it on Win XP with Chrome and on Linux with Chromium.

edited Aug 01 '14 at 09:02

answered Feb 16 '13 at 23:43

zeitgeist87

131
1
4

1

It's important to highlight that even with this solution, the current page is still reloaded. So although you aren't redirecting to another page, you are reloading your current page. Chrome makes it very difficult for SPAs to get Chrome to remember a user's password. Related question: http://stackoverflow.com/questions/21191336/getting-chrome-to-prompt-to-save-password-when-using-ajax-to-login – EleventyOne Jan 29 '14 at 08:51
This solution works in my app. There's no need to reload whe whole page, only iframe address should change. I've also had to make the target page (blank.html, renamed to blank.php) return a random string to make it work. It' is also wise to use method="post", so that plaintext passwords don't get stored in the server's access log. – hegemon May 29 '14 at 09:15
@hegemon Thanks I added method="post", but you don't have to reload the page or the iframe. Just remove "window.location = data.redirectUrl;" entirely. I just added that, because it was part of the original question. On my server blank.html does not exist, so the server returns an 404 error, but it still works. – zeitgeist87 Jun 16 '14 at 07:41
1

You don't need to create an iframe, just use action="#" – Tiago Sippert Sep 04 '14 at 12:17
On Chrome Version 41.0.2272.104 (64-bit), 1Password prompted, but Chrome didn't – weisjohn Apr 03 '15 at 16:47
I can also confirm that this does not work in Chrome 42.0.2311.90 – Normadize Apr 18 '15 at 18:06
Doesn't seem to work in Chrome Version 42.0.2311.90, even the JSFiddle example doesn't work. – Conan Apr 22 '15 at 16:18
Chrome 46 fixed its wrong behaviour - no workarounds needed anymore. See https://stackoverflow.com/a/33113374/810109 – mkurz Oct 13 '15 at 22:18

score 8 · Answer 2 · answered Mar 29 '11 at 07:50

8

Are you able to change the form's action value to data.redirectUrl and let the form submit as usual? This should trigger the browser's prompt to save the username and password.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

answered Mar 29 '11 at 07:50

Marcel

27,922
9
70
85

This line alone doesn't redirect at all. If I add window.location = data.redirectUrl; after it, nothing changes. Chrome still refuses to save the password... – Alex Mar 31 '11 at 19:16
@Alex: Are you possibly `preventDefault()` or `return false`ing somewhere? Get rid of that to let the form do what it usually does. – Marcel Mar 31 '11 at 21:34
No, I'm not doing that. I guess that's just Chrome's bug and it can't be fixed by a web developer... – Alex Apr 01 '11 at 09:54
2

Have you tried doing this, and then doing a $('form#name').trigger('submit'); – Eivind Apr 02 '11 at 17:45
1

Chrome 46 fixed its wrong behaviour - no workarounds needed anymore. See https://stackoverflow.com/a/33113374/810109 – mkurz Oct 13 '15 at 22:19

score 7 · Answer 3 · edited May 23 '17 at 11:44

7

Have a read here - why doesn't chrome recognize this login form? .

The important comment is:

Yes, it doesn't work when you remove return false. You will need to rewrite your code. Chrome does not offer to save passwords from forms that are not "submitted" as a security feature. If you want the Save Password feature to work, you're going to have to ditch the whole fancy AJAX login.

So you could maybe consider removing the Ajax and just letting the Form post to login, this will probably be the only way for Users that do not have JavaScript enabled to login with your form too.

edited May 23 '17 at 11:44

Community

1
1

answered Apr 04 '11 at 14:18

Johann du Toit

2,609
2
16
31

15

One other thing you can ditch is support for password saving in Chrome, and let the users bug Chrome developers to fix the browser instead. – Roman Starkov May 11 '12 at 17:37
1

Chrome 46 fixed its wrong behaviour - it is working now! See https://stackoverflow.com/a/33113374/810109 – mkurz Oct 13 '15 at 22:19

score 5 · Answer 4 · edited Jan 18 '13 at 07:24

I have fixed it using this way:

<form action="/login"></form>

And the JavaScript:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

score 2 · Answer 5 · answered Feb 18 '13 at 11:55

In my case Chrome didn't remember password because there were two different inputs of type password in one form (create/login in one form). The issue in my case was solved by using javascript manipulation of removing one of the input of type password so that browser could decide which submitted fields contains credential data.

score 2 · Answer 6 · answered Mar 21 '19 at 08:31

So now in 2019 we can do this using Credential Management API.

NOTE: it is experimental API! Check this: https://developers.google.com/web/fundamentals/security/credential-management/save-forms

Essential code:

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}

score 1 · Answer 7 · edited May 23 '17 at 11:44

1

I found that the username and password input fields must have the name tag set in order for Chrome to offer to save the password. This thread is about simple forms, but the same fixed my jquery AJAX form submission.

edited May 23 '17 at 11:44

Community

1
1

answered May 07 '13 at 14:42

Predrag Stojadinović

3,439
6
34
52

score 1 · Answer 8 · answered Jul 11 '13 at 10:03

1

From yesterday, 10/07/2013, Chrome 28, it's now possible without any trick. Seems they fixed that...

answered Jul 11 '13 at 10:03

alex.net

286
1
6

2

Indeed, it did seem so - although it seems to have stopped working again (Chrome 29) – Aaron J Spetner Sep 11 '13 at 10:05
Right it's weird it's like they disabled it again in 29 – alex.net Oct 02 '13 at 09:36
Insanity. Chrome needs to support this! – streetlight Jan 10 '14 at 15:10
1

Chrome 46 fixed its wrong behaviour - no workarounds needed anymore. See https://stackoverflow.com/a/33113374/810109 – mkurz Oct 13 '15 at 22:18

score 0 · Answer 9 · answered Sep 30 '20 at 15:01

0

I had the same issue - how to force browser to store user credentials for AJAX requests. Please see my answer here - https://stackoverflow.com/a/64140352/994289.

Hope it helps. At least it worked fine for me on Chrome on Windows.

answered Sep 30 '20 at 15:01

Aldis

439
4
10

How to make Chrome remember password for an AJAX form?

9 Answers9

Linked