feat(suggest): disable autocomplete

[Jolg42]

Closes #1167

Set attributes to avoid autocompletion on the form This is to avoid private data to be submitted (e.g. via a Password Manager)

[welcome]

Thank you for making your first PR on website!

We are glad about every contribution!

Feel free to add yourself to our AUTHORS file to appear as a contributor on our websites.

[mal-tee]

Wow, can you read my mind? I was just thinking about this the other day. In the end I discarded the idea since I thought that autocomplete is ignored by browsers anyways. But I guess this semantically more correct. :)

Can anybody confirm if the vendor-specific attributes work? I am using keepass myself.

Edit: Oh, ofc we had an old issue about this. :D

[Jolg42]

@mal-tee Indeed I read minds 😄 (here what someone's mind added in an old issue). By the way, the website is awesome 💚

It looks like the deployment to try out is https://deploy-preview-1208--datenanfragen.netlify.app/

TODO (I guess it's ok if we don't try them all but at least 2)

• try with 1Password
• try with Proton Pass
• try with Keepass
• try with LastPass (who is still using that after the data leaks and weak encryption 😅)

[baltpeter]

I'm using 1Password and just gave this a quick test. Since the attributes currently aren't actually being set as @mal-tee said, I manually added them using the Firefox dev tools. The autocomplete still appeared both when setting data-1p-ignore on the form as well as an input. So, this could either be a bug in 1Password or the attributes have to be set already when the form is loaded and can't be added later (which would make sense I guess if 1PW has already injected its scripts into the form).

[Jolg42]

I love specs edition (MDN):

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the element.

So it could be that too, which is annoying.

[baltpeter]

With the change, the attributes are now being set on the form element. However, 1Password unfortunately still autocompletes:

[baltpeter]

Just played around with this a little. If I set data-1p-ignore on the individual inputs as @mal-tee suggested (i.e. change the selector to form.brutusin-form input, form.brutusin-form textarea), 1Password does stop autocompleting.

[baltpeter]

While I was at it, I'll also do some more testing.

LastPass

On master, without the attribute set:

When setting data-lpignore="true" on the individual inputs, it initially didn't work. The user additionally has to set an extension preference that is fairly hidden (source):

If I do that, it does work:

[baltpeter]

Proton Pass

On master: I haven't been able to get it to try and fill in the details from the identity I created, but it really wants to input my account email into the webform field:

With data-protonpass-ignore="true" set on the individual elements, it doesn't anymore:

[baltpeter]

Bitwarden

A comment under the StackOverflow answer lists data-bwignore="true", so let's try that as well.

On master:

With the attribute set:

[baltpeter]

Firefox native autofill

On master:

With the attributes set on the individual elements, it still wants to autofill…

Setting autocomplete="off" on the form itself doesn't work, either:

[baltpeter]

Chromium

On master:

Chromium also doesn't respect the attribute set on the individual inputs:

Or on the form:

[baltpeter]

Okay, to summarize:

• The specific attributes for the password managers work. LastPass is annoying because the user has to enable a hidden setting to allow us to do that, but there's nothing we can do about that.
• We still need to test KeePass. Do you want to do that, @mal-tee?
• autocomplete="off" doesn't appear to have any effect. The changes here didn't work for any of the browser-native autofills I tested. We should find a way to fix that.

I've pushed a comment changing the code to set the attributes on the individual inputs instead of on the form since that clearly works better. That commit also adds Bitwarden support. And I've added comments with the sources for the different attributes.

[mal-tee]

Regarding autocomplete=off: I think the tag is practically deprecated by browser vendors. Do you see a way to fix this as a web page?

[baltpeter]

So you think it isn't possible to stop Firefox and Chromium from autocompleting?

[mal-tee]

Maybe I misunderstood. I don't think we can get the autocomplete attribute to work. I think we should set it, to take the high road though. :D

This attribute is a hint to browsers; some may not comply with it.
https://developer.mozilla.org/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion

https://wiki.selfhtml.org/wiki/HTML/Attribute/autocomplete

However, as Joël mentioned, we could and should try to obfuscate the form such that the heuristics do not match, i.e., assign some random garbage names and IDs.

Ref. to., e.g.,

But if you want Chrome (and other browsers) to stop autofilling fields then you need to use a name, id and autocomplete value that the browser doesn’t recognise.
https://adamsilver.io/blog/stopping-chrome-from-ignoring-autocomplete-off/

[mal-tee]

• We still need to test KeePass. Do you want to do that, @mal-tee?

At least with KeePassXC I am not aware of autofills for personal data. I tried to test this by adding an email in my "Vorlagen" folder, but the browser extension won't trigger the autofill for our email field on /suggest.