如何为 Electron WebView 中的表单创建 JavaScript 自动填充脚本以绕过验证问题？

Question

我正在开发一个带有 WebView 组件的 Electron 应用程序，可以呈现各种网站。我的目标是为这些网站内的表单开发一个类似于密码管理器的自动填充脚本。

虽然脚本成功填充表单字段，但我在提交时遇到了表单验证问题。尽管我尝试通过调度事件来绕过验证，但在某些情况下验证仍然失败。

例如，在 Dropbox 登录页面（https://www.dropbox.com/login）的控制台上执行以下脚本时，输入字段会更新，但单击“继续”时，会出现验证错误：

setInterval(() => {
     const element = document.querySelector('form input');
     if(!element || element.value !== "") return;
     console.log('element founded')
     element.value = "[email protected]";
     element.dispatchEvent(new Event("input", { bubbles: true }));
     element.dispatchEvent(new Event("change", { bubbles: true }));
}, 1000);

在我的 Electron 应用程序中，我尝试使用“executeJavascript”方法在 WebView 中执行脚本，但在控制台上执行的结果相同：

const webview = webviewRef.current
webview.executeJavaScript(`
setInterval(() => {
  const element = document.querySelector('form input');
  if(!element || element.value !== "") return;
  console.log('element founded')
  element.value = "[email protected]";
  element.dispatchEvent(new Event("input", { bubbles: true }));
  element.dispatchEvent(new Event("change", { bubbles: true }));
}, 1000);`)

该脚本在 Chrome Web 扩展中成功运行，我将其添加到“内容脚本”（您可以在此处查看）。

是否有一种可靠的方法可以有效地模拟用户输入以绕过 Electron 应用程序的 WebView 中的表单验证？任何见解或替代方法将不胜感激。谢谢！

编辑1：

还尝试模拟用户输入和焦点/模糊事件，但得到相同的结果：

  const element = document.querySelector('form input');
  console.log('element founded')
  const textToType = "[email protected]";
          
  // Simulate focus event
  element.focus();
  element.dispatchEvent(new Event('focus', { bubbles: true }));
      
  let index = 0;
  const typingInterval = setInterval(() => {
    const char = textToType[index];
    element.value += char; // Simulate typing by appending one character at a time
    element.dispatchEvent(new Event('input', { bubbles: true })); // Dispatch input event
    element.dispatchEvent(new Event("change", { bubbles: true }));
    index++;
      
    if (index === textToType.length) {
      clearInterval(typingInterval); // Stop when all characters are typed
      
      // Simulate blur event after typing
      element.blur();
      element.dispatchEvent(new Event('blur', { bubbles: true }));
    }
  }, 100);

Answer 1

我尝试自己看看在这种情况下出了什么问题，并且通过调用

value

原始 setter 而不是使用其特定的 setter 来实现目标。我必须假设该输入的设置器已更改以拦截恶意意图并成为验证策略的一部分。

const textToType = "[email protected]";      
var element = document.querySelector('form input');

//gets the value property setter from the original HTMLInputElement
var originalValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;

//invokes the original setter over the specific element
originalValueSetter.call(element, textToType);

//fires the change event on the input element
element.dispatchEvent(new Event('change', { bubbles: true }));

//clicks the continue button...
document.querySelector('button.email-submit-button').click();