Chrome Autofill on ASP.NET Partial Postback (Update Panel) - javascript

I understand there are many questions and answers surrounding autocomplete and autofill for web browsers. I haven't seen this specific issue raised.
UPDATE: the autofill specifically happens when a partial postback executes inside an update panel
Recently, (chrome versions 70+?), Chrome has begun aggresively autofilling input fields in our webapp when a partial postback is executed. (We use asp.net web forms)
We use the partial postback to dynamically load a user control and add it to the DOM inside an update panel.
Specifically, inputs like the following simple snippet are being populated with an email:
<input type="search" class="newH4" placeholder="Search">
I've tried adding the autocomplete attribute with different values to no avail.
Here is a screenshot of the autofill:
Additionally I have other fields like entering a dollar amount which gets populated with the email as well. Is there a way to prevent this on the latest versions of chrome?

If you have a password field in your form you can add this attribute -
autocomplete="new-password"
<input type="password" placeholder="Password" autocomplete="new-password">

autocomplete="off" should be working, but in lieu of that working and given that it is not a password or email, you could feed it some random string to see if that helps
For example autocomplete="rjftgh"

Note: simply changing the autocomplete attribute to a random string, or even a special one like 'new-password' does NOT work for this issue.
Ultimately I found a solution. It is more of a hack so I'm not too satisfied with it, but it comes from Mike Nelson's answer to the following question: Disabling Chrome Autofill
His solution involves adding input elements with their display property set to 'none' above the inputs that are being autofilled. The idea is that these hidden fields absorb the autofill instead.
I did also learn a bit more about the problem with ASP.NET and Update Panels as well. When the Update Panel triggers a partial postback, it uses an AJAX library. The library contacts the server to complete the update. Whatever AJAX is doing in the background, it is also triggering chrome's autofill logic to reexecute. In other words, whenever I dynamically add a user control, the first input field in that user control's html structure was being autofilled with the user's stored email.
Again, very strange and bad behavior, but the display 'none' input fields did the trick.
If Chrome changes their autofill logic again (they will), I'll update my answer with hopefully a better solution.

Related

Populate state with values from autocomplete (react)

I have a component with inputfields and a button which is disabled unless the correct values are entered in the inputfields. This works fine but when chrome autocompletes those values on page load, the state isn't changed and thus the button stays disabled. If you click inside the form or change a value the state changes correctly.
How can I get the value from autocomplete when the component load? Autocomplete doesn't trigger the onChange or onBlur events and autocomplete="off" doesn't work either. (also I'd prefer not to turn off autocomplete anyways)
I recently came across this problem while working on my login page. After a bit of research, I came across this issue reported on the ReactJS github. To quote the key part:
If we are able to access autofilled values once the page loads, it would become very easy to write malicious code to extract information on a form intended for phishing. Giving the user no chance to react. Probably part of the reason why autocomplete="off" is ignored by browsers.
To overcome this problem we need to:
Accept the fact that we won't (and never will) have access to autofilled values when the DOM node mounts
Embrace the security concerns which are brought up by the browsers
tl;dr - It's intentional for security reasons, and it's better to validate the inputs upon submit instead.

insert value into input tag from chrome extension

I have written a chrome extension which can successfully insert value into input tags on many pages by simple jquery code
$("#myId").val('myvalue');`
except this page`
I have tried using javascript jquery but nothing works, Though chromes built in autofill and autofill extension can insert value efficiently.
From my chrome extension I want to insert value into these two input ID's "#loginEmailMobile" and "#clientpassword" . When I use .val() method it shows the value there but seems like floating. And don't work when I click on sign in. So how I can make it work? Please help.
The page is listening for keyboard events to update the UI as well, your method is only changing the .value property. If you want the page to "know" something changed, you should send a keyboard event to the inputs as well. The AutoFill extension seems to do this by calling someelement.dispatchEvent(new Event('input')) on the inputs, which seems to do the job.
Is the url permissions and schemes set for the website it is not working for?

Hidden field validation

I have a hidden value in my form, but when I tried a security scan using HP WebInspect tool, its getting manipulated and shows vulnerability. I tried validating this hidden field but still this tool can manipulate the value. What to do for this?
First of all, check if you're using the last version of HP WebInspect tool (from this point forward HPWT).
Marking a hidden field of one html form as a vulnerability and manipulate it's value cannot be called a good tool.
Check the settings page of HPWT. In the Scan Settings / Method there are options related with forms. Check the autofill web forms options for the forms, and if it don't works set the checkbox for Prompt for web forms values during scan ...
If you don't want the manipulated data affect your code don't try to use this $("#someId").text();.
Hope it help.

No additional postbacks work if validation fails on first postback

I have never noticed that ASP.NET automatically shuts down all subsequent postbacks until the field that validated as false is fixed by the user.
My scenario:
I have a form with 3 fields. One of them is a Textbox (txtCarName) with a required field validator and then I have a dropdown(ddlCarMake) with AutoPostBack=true, that filters and enables another dropdown (ddlCarModel) OnSelectedIndexChange.
Lets say the user clicks the save button without filling out the required textbox (txtCarName). They will be notifed that it is a required field.
Before they go and add a value to the required textbox lets say they decide to edit the ddlCarMake because they change their mind. In this case the filter does not happen since all subsequent postbacks are disabled. The user would be extremely confused.
How do ASP.NET developers avoid something like this from creating a poor user experience?
UPDATE:
After contacting Telerik they told me this is a known issue and is currently fixed in their internal build. The next release it will be fixed.
set the dropdownlist CausesValidation="False"

Textarea Autocomplete

Autocomplete="off" on textarea fields doesn't seem to work as it does with input fields. I couldn't find anything about this on Google. Is there a difference?
Specifically, I have a page that has half normal input fields, and the other half dynimically generated via javascript. When I navigate away from the page and then navigate back, the text that was in the dynamically generated fields overwrites that which is in the normal fields. This only happens when I navigate away and then click back. If I just refresh the page, it doesn't happen. Autocomplete="false" solved this problem for input fields, but it did not for textareas.
The autocomplete attribute or property is limited to input elements, both according to Microsoft description of the feature and according to the HTML5 draft description proposed to standardize the feature. So you should expect browsers to ignore it for other elements, including textarea.
Apparently, autocomplete is not the real question, just an assumed approach, which is a wrong one. But the real problem was not really described.

Categories