以编程方式设置的输入被忽略答案

【问题标题】：Programmatically set inputs are ignored以编程方式设置的输入被忽略
【发布时间】：2020-03-11 16:12:01
【问题描述】：

对于 Google Chrome 的自动完成功能不起作用的网站，我经常通过书签、（未发布的）Chrome 扩展程序或（对于某些边缘情况）直接复制/粘贴到浏览器控制台中编写自己的 Javascript 注入来自动完成表单。

这样的网站是 NatWest Bankline：https://www.bankline.rbs.com/CWSLogon/logon.do

本网站的用户界面最近已更改。虽然仍然可以通过 Javascript 设置输入值（见下文），但当单击继续按钮时，这些值将被忽略。

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

请注意，任何未在该银行注册的用户都应该可以仅使用随机值测试网站。您会看到它忽略了通过 Javascript 输入的值。

我认为这是银行为提高安全性而有意采取的措施（即机器人无法在此页面发送垃圾邮件以识别有效登录）。

我很想知道是否有可能规避这一新限制（虽然可能不会为机器人提供便利）。还有它正在使用什么技术（例如，是否有用于安全登录的 Javascript 库？）。

【问题讨论】：

作为一般概念，您无法在前端构建安全登录，因此像安全登录库这样的东西没有多大意义。至于网站本身，他们似乎正在使用 React，这可以解释为什么直接设置输入值不起作用。
谢谢尼特。现在我知道这是一个 React 的事情，我已经能够找到一些其他问题（例如stackoverflow.com/questions/40894637/…）。不知道为什么我会对此投反对票 - 对我来说这是一个有效的问题。我希望投反对票的人能够解释自己，而不仅仅是通过判断。
我还发现 Wappalyzer 浏览器扩展是一个有用的工具，可以找出网站正在使用哪些框架

标签： javascript validation input

【解决方案1】：

已将 Web 框架识别为 React（感谢 Nit）。我已经能够在 Stack Overflow (How to programmatically fill input elements built with React?) 上找到类似的问题，并使用它的答案解决了登录问题。

修改后的代码如下：

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 }));

【讨论】：