dword-design / vue-honeypot

A simple honeypot component for Vue.js.
Other
2 stars 0 forks source link

Vue Honeypot not working with autocomplete #19

Open hasidiluk opened 1 year ago

hasidiluk commented 1 year ago

Vue Honeypot not working with autocomplete

Vue Honeypot set data value when we filled the form using auto complete. This issue able to replicate in mac chrome and windows edge browsers. Its works fine with windows chrome autocomplete.

Not able to submit the form we are getting below error message fro catch. Error: Looks like you are a bot. You have filled out the legendary honeypot field!

Screenshot 2023-08-14 at 15 18 10

Possible solution set autocomplete="nope" or pass autocomplete value as prop

<label data-cy="subscribe-form_honeypot" style="position: absolute; top: 0px; left: 0px; z-index: -1; width: 0px; height: 0px; opacity: 0;">
<span>Name</span>
<input autocomplete="off" tabindex="-1" type="text">
</label>
arnoldski commented 1 year ago

I'm having the same issue. When autocomplete is set on a field and you use it to fill it, you get Error: Looks like you are a bot. You have filled out the legendary honeypot field!.

dword-design commented 1 year ago

Hi, I don't know of this feature, where does that value come from that is filled into the honeypot field? Which steps are you doing to get there?

ghost commented 8 months ago

Hello, I ran into this issue today, it seems that it is not because of the basic autofill functionality of browsers, but the saved "address" fields in chrome for example.

So, in chrome for example, you can save Address, that are kind of an hybrid solution to autofill/saved user data. Beacuse the field of the honeypot is named as "Name", Chrome will populate this field with the name of the saved Address. As this functionality differs from the standard autofill in the browser, the autocomplete="off" will not work here.

Another possible solution would be to name the field something else, and or, let the user decide if he wants to use a checkbox or a input field.