Is using a browser's autofill safe?

Most modern browsers have some form of autofill for convenience. I don't use it a ton, although I do use the autofill from 1Password (a completely different implementation, but similar functionality), and it got me thinking... are these autofill features safe? Is there any chance of handing over more information than I meant to?

First off, if you're not familiar with how this works and you're interested, check this out:

HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

MDN Web Docs.logo-m{fill:var(--text-link)}

Now that you're all learned and whatnot, let's say some random website has two visible input fields - name and email. You want to use the "profile" or "address" or whatever you set in the browser, which might hold other details like your phone number, address, date of birth, etc. The exact fields vary between browsers.

What if a site had other input fields that were hidden? Could they collect the other details without you even knowing it? Would the browsers catch it somehow?

The easiest thing to do is just set some input fields to display:none or visibility:hidden or visibility:collapse. In all those cases though, when I chose to autofill and then displayed the fields, they were empty! Impressive. If the fields are hidden, they don't autofill.

But there are more ways to hide a field than just those, and I didn't have to look far. I'm not remotely a CSS expert, and it only took a few minutes to stumble on opacity:0; height:0px; which makes the input field transparent and not take up any space. The results?

I selected the test profile in each browser, and then "revealed" the fields... basically just made them opaque and gave them a height again. In all cases, I ended up sharing my address and phone number when I didn't think I had. Oops.

Even worse, when I setup a profile (aka "identity") in 1Password (a separate service from any particular browser), their implementation simply matches the input field name in the HTML to the fields in the "identity", and hands over the world. Fields like "reminder question" and "reminder answer" are defaults, while I chose to add others like "ssn" and "license #".

If someone setup a couple dozen or so fields with the default properties and some other probable entries, you could end up handing over waaaay more than you ever intended.

So after seeing all the above behavior, I'll say this at the very least:

ONLY USE AUTOFILL FEATURES ON SITES YOU TRUST!

It's incredibly easy for a site to take advantage of this, and to end up handing over more information than you meant to. Even if browser's block this method too, I'm sure there's a dozen other ways to achieve the same effect.

If you want to try it out yourself, have at it. Try it in different browsers, or with different password managers.

If you're curious about the simple html/javascript I used, check out the source for the page or view it below. I don't collect anything, and there's no submitting of data, but you could copy the following onto your own page and try it from there if you like.

<div>
  <label for="name">Enter your name:</label>
  <input name="name" id="name">
</div>
<div>
  <label for="email">Enter your email:</label>
  <input name="email" id="email">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="street-address">Your street address:</label>
  <input name="street-address" id="street-address">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="tel">Your phone number:</label>
  <input name="tel" id="tel">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="bday">Your birthday:</label>
  <input name="bday" id="bday">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="ssn">Your SSN:</label>
  <input name="ssn" id="ssn">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="whatever">Whatever!</label>
  <input name="whatever" id="whatever">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="licnum">License:</label>
  <input name="license #" id="licnum">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="home">Phone:</label>
  <input name="home" id="home">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="cell">Cell:</label>
  <input name="cell" id="cell">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="question">Reminder question:</label>
  <input name="reminder question" id="question">
</div>
<div class="hidden4" style="opacity:0; height:0px;">
  <label for="answer">Reminder answer:</label>
  <input name="reminder answer" id="answer">
</div>
<button type="button" class="button" onclick="document.querySelectorAll('.hidden4').forEach(x => {x.style.opacity=1; x.style.height='25px'})">Reveal hidden fields
</button>