未分類
25 8 月 2020

tampermonkey 如何自动填充密码 并通过前端的表单检查

tampermonkey 如何自动填充密码 并通过前端的表单检查

資深大佬 : cy97cool 8

需求：类似 LastPass 这种可以自动填充用户名密码，点击提交

难点：很多现代化的页面前端做了表单校验，直接赋值 input 的 value 不能通过表单校验

关键在于没能触发人家框架的 event listener

查资料咯，发现了这个解答 https://stackoverflow.com/a/35807417 就是触发 input 、keyup 、change 事件，但实际测试仍然不行，甚至我把在开发人员工具能看到的 event listner 全触发了一边都没用 sad

function fireChangeEvents(element){     var changeEvent = null;     for(var i of ["keypress","focus", "input", "keydown", "keyup", "change", "blur", "click", "invalid", "mouseover", "popstate", "reset", "scroll", "selectionchange", "submit", "transitionend"]){         changeEvent = document.createEvent ("HTMLEvents");         changeEvent.initEvent (i, true, true);         element.dispatchEvent (changeEvent);     } } fireChangeEvents(document.querySelectorAll("input")[0])

然后接着找，发现一个能模拟用户交互的 npm 包： https://github.com/testing-library/user-event

然后折腾了一下 browserify 打包成浏览器可以用的 js 文件，实际测试可行：

userEvent.type(document.querySelectorAll("input")[0], USERNAME); userEvent.type(document.querySelectorAll("input")[1], PASSWORD);

问题是解决了，但觉得为了一个触发 event 引入一个 500KB 的 js 文件有点蠢（ uglify 之后也有 300KB ），问问大佬们有没有更好的方案，不需要引入这么重的 js 库的

大佬有話說 (5)

  • 資深大佬 : iNaru

    input.dispatchEvent(new Event(‘input’, { bubbles: true }));

  • 主 資深大佬 : cy97cool

    @iNaru 没有用呢 仍然要求“请输入用户名!”
    initEvent 的第二个参数就是 bubbles

  • 主 資深大佬 : cy97cool

    https://ant.design/components/form-cn/
    找到一个可以用来验证的例子，这个页面中的 嵌套结构与校验信息 部分，Username 右边有个 Need Help?的链接

    对这个 input 右键 检查元素，在 Console 里输入 $0.value=”1″ ， 然后点击这个表单的 Submit，会报错“Username is required”。

    问题就是：在 Console 里输入啥神奇的代码，能成功通过这个表单的检查

  • 資深大佬 : CoolSpring

    如果是 React，似乎可以用这个： https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js

    var input = document.getElementById(“complex-form_username”);

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, “value”).set;
    nativeInputValueSetter.call(input, ‘react 16 value’);

    var ev2 = new Event(‘input’, { bubbles: true});
    input.dispatchEvent(ev2);

  • 主 資深大佬 : cy97cool

    @CoolSpring 感谢 确实有用