作者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/m.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