Programmatically set inputs are ignored

Question

For websites where Google Chrome's autocomplete doesn't work I have often written my own Javascript injection to autocomplete forms, either via a bookmarklet, (unpublished) Chrome extension or (for some edge cases) direct copy/paste into browser console.

One such website is NatWest Bankline: https://www.bankline.rbs.com/CWSLogon/logon.do

The user interface of this website has recently been changed. Whilst it's still possible to set the inputs' values via Javascript (see below), these values are ignored when the Continue button is clicked.

document.getElementById("customerId").value = "<<put customer ID here>>";
document.getElementById("userId").value = "<<put user ID here>>";

Note that it should be possible for any user that is not registered with this bank to test the website just with random values. You will see that it ignores values input via Javascript.

I am presuming that this is a deliberate measure on the bank's part to improve security (i.e. bots cannot spam this page to identify valid logins).

I am curious to know whether it's possible to circumvent this new restriction (whilst perhaps not facilitating bots). And also what technology it's using (e.g. is there a Javascript library for secure logins that they're using?).

As a general concept, you can't build secure logins on the frontend, so a thing like a secure login library wouldn't make much sense. As for the site itself, it appears they're using React which would explain why directly setting the input value wouldn't work. — Etheryte, Nov 15 '19 at 13:38
Thanks Nit. Now that I know it's a React thing I've been able to find some other questions (e.g. https://stackoverflow.com/questions/40894637/how-to-programmatically-fill-input-elements-built-with-react). Not sure why I'm getting downvotes on this - to me it's a valid question. I wish people who are downvoting would explain themselves rather than just passing judgement. — user1379351, Nov 15 '19 at 13:45
I've also found that the Wappalyzer browser extension is a useful tool in finding out what frameworks a website is using — user1379351, Nov 15 '19 at 14:36

score 2 · Accepted Answer · answered Nov 15 '19 at 14:31

Having identified the web framework as React (thanks Nit). I've been able to find a similar question on Stack Overflow (How to programmatically fill input elements built with React?), and used the answer to it solve the login problem.

The adapted code is included below:

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

var input = document.getElementById("customerId");
setNativeValue(input, "<<put customer ID here>>");
input.dispatchEvent(new Event('input', { bubbles: true }));

input = document.getElementById("userId");
setNativeValue(input, "<<put user ID here>>");
input.dispatchEvent(new Event('input', { bubbles: true }));

Programmatically set inputs are ignored

1 Answers1