作者microloft (微阁)
看板Ajax
标题Re: [问题] 关於填入栏位会消失的状况?
时间Tue Aug 3 23:55:23 2021
※ 引述《secretfly (☠鬼灭·之喵喵)》之铭言：
: 如题目
: 主要有两个问题 第一个目的是自动登入 填入帐号与密码
: 使用方式是:
: document.querySelector("#Pwd").value="";
: 只是在b站使用这个方法後 按下登入 数值会不见
: 我发现的问题是 必须要在栏位中编辑过 里面的value才不会消失
: 想请问其中原理是什麽?该如何解决?
经过测试，如果先用 .value 填帐号，接着再手动输入密码，
则帐号的栏位会被清空。反之，先密码再帐号也是一样情形。
以下稍微说明我的猜测与解决方式。
我猜他内部有一个 JS 物件，专门用来储存对应的帐号、密码资讯。
当你手动输入并触发输入事件时，他会把栏位内的值更新到内部物件。
当你按下登入，或是换栏位输入时，他则会把内部物件的值反写回所有栏位中。
因此，解决方式其实很单纯，用 .value 填完之後，手动触发一次输入事件，
让内部物件根据当下栏位的值进行更新就可以了。
以下是我试过可正确执行的版本。
// 测试网址
//
https://passport.bilibili.com/login
const username = document.getElementById('login-username')
const password = document.getElementById('login-passwd')
username.value = '帐号'
password.value = '密码'
// 触发输入事件
username.dispatchEvent(new InputEvent('input'))
password.dispatchEvent(new InputEvent('input'))
: 另外额外问的第二个问题 : 我用右键检查登入按钮 没发现办法可以用JS操作
: onclick不能使用 也没找到能submit的form
: 又是为什麽呢
: 谢谢
因为他并没有使用传统的 <form>，而是直接使用 XMLHttpRequest 送出资讯。
你如果在 vendor.{随机码}.js 内搜寻一个叫 7GwW 的 function，
就会看到最後送出资讯的实作方式。
你可以看他的 XMLHttpRequest 里包含了哪些相关资讯，并模仿用一样的方式来提交。
--
我个人是认为登入要做到完全自动有点困难，
就算第二点也解决了，中间仍然卡一个图形验证的步骤...
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 140.112.73.202 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1628006125.A.E12.html
1F：推 secretfly: 有神快拜 另外问一下 通常是不是都用cookie阿 08/06 05:16
不敢当...
通常帐号密码经过伺服器验证无误後，
会回传给你一组权杖 (token) 存到 cookie。
下次再拜访网站时，
这组权杖就会跟着其他 cookie 一起送到伺服器，
让你不用再跑一次输入帐号密码的程序 (也就是保持登入状态)。
不知道你是不是指这个。
2F：→ secretfly: 但监看network的操作那一块我都看不懂（晕 08/06 05:17
3F：→ secretfly: 题外话他这样搞一个反写目的何在阿 怎麽感觉故意的 08/06 05:18
其实我也不清楚这样做的目的是什麽，
但若要说是故意，
好像也没什麽防范效果...
4F：→ secretfly: 再额外问 图书馆/博客来那种超废验证码是否好解决呢 08/06 05:19
5F：→ secretfly: 之前我是有在旧版网页用inspect找到里面就有验证值XD 08/06 05:20
那种辨认图片文字的验证，
理论上是可以搭配影像辨识的函式库来自动辨认，
但我没有实际做过就不献丑了。
而你说那种直接把验证码写在网页里的，
感觉是属於不及格的等级，
可能只有极少数网站可以这样简单绕过...
※ 编辑: microloft (140.112.71.140 台湾), 08/06/2021 10:08:54