最近由于是特殊時(shí)期，這個(gè)寒假無比漫長。在開學(xué)前夕，許多學(xué)校要求學(xué)生每天打卡自己的健康情況。

一開始的時(shí)候，我是用selenium驅(qū)動(dòng)瀏覽器幫助自己填寫每天的健康狀況，并做了一套web程序，可供學(xué)校的其它同學(xué)使用。一想到有可能會(huì)被舉報(bào)，于是就沒有部署到自己的服務(wù)器上面供同學(xué)們使用，于是將它開源了出來，并寫一下博客紀(jì)念一下。

后來學(xué)校健康打卡網(wǎng)站又雙叒叕改版了，全新的界面，只能提交一次。好在這次post提交的結(jié)構(gòu)體比較簡單，api不是很復(fù)雜，考慮不用selenium來做自動(dòng)化。原版的健康打卡提交的post結(jié)構(gòu)體很復(fù)雜，有點(diǎn)難搞定，于是使用selenium驅(qū)動(dòng)瀏覽器來自動(dòng)填寫，這種方式的優(yōu)點(diǎn)就是簡單，但是存在很多缺點(diǎn)。驅(qū)動(dòng)瀏覽器打開和關(guān)閉的過程需要耗費(fèi)一定的時(shí)間，而且有時(shí)候容易崩潰，當(dāng)你需要大量的操作時(shí)，效率很低。而模擬http請求發(fā)送post數(shù)據(jù)包的方式就非常精簡，但是需要你去探索服務(wù)端的API，需要一定的技術(shù)功底，包括前端和后端的技術(shù)。

接下來進(jìn)入正題：

這次的打卡登錄頁面比較簡單，只有賬號(hào)密碼登錄，我必須先通過登錄之后才會(huì)給我填寫健康信息的界面，否則直接訪問信息填寫界面會(huì)被重定向到登錄界面。

F12打開chrome的開發(fā)者工具進(jìn)行調(diào)試，輸入賬號(hào)密碼之后提交，發(fā)現(xiàn)客戶端只是post一個(gè)非常簡單的json，只有username和password兩個(gè)key，username就是我的學(xué)號(hào)，但是password進(jìn)行了加密。

吐槽一下這個(gè)網(wǎng)站的設(shè)計(jì)，沒有用到cookie，你隨時(shí)可以重新登錄，只要打開登錄的url即可，輸入賬號(hào)密碼，判斷一下今天是否填過表，如果填過了，就給你重定向到填寫完成的頁面。如果沒有，就重定向到填寫的頁面。而如果你新開一個(gè)標(biāo)簽并打開填寫頁面，就又回到了登錄頁面，沒有識(shí)別cookie來判斷你的身份的過程。而你在填寫完成的頁面的標(biāo)簽上面的鏈接中輸入填寫的頁面，就給你打開填寫頁面了。因?yàn)檫@個(gè)頁面其實(shí)是有效的，只不過它的程序判斷你填過了就不給你重定向到那個(gè)頁面。

這里需要先研究一下其前端是如何加密的。

點(diǎn)擊Chrome開發(fā)者工具的Sources標(biāo)簽，左邊是這個(gè)網(wǎng)站所有的文件，加密的代碼就在js文件或html的script標(biāo)簽中，只需要研究這些文件就好了。

我們需要監(jiān)聽登錄按鈕綁定的click事件，當(dāng)點(diǎn)擊登錄后，開始斷點(diǎn)調(diào)試點(diǎn)擊按鈕之后執(zhí)行的代碼。我們在Source標(biāo)簽下選擇右邊面板中的Event Listener Breakpoints，里面選擇Mouse，展開選擇click。這樣瀏覽器就會(huì)監(jiān)聽所有的click事件。在輸入賬號(hào)密碼之后進(jìn)行設(shè)置（否則點(diǎn)擊輸入框會(huì)觸發(fā)click事件）。

點(diǎn)擊登錄按鈕開始調(diào)試，我們要找到點(diǎn)擊登錄按鈕之后發(fā)生的加密過程。不過你一直單步調(diào)試是點(diǎn)不完的。一般還是根據(jù)經(jīng)驗(yàn)來找到你想要的代碼片段。

這里講一個(gè)合理的思路：

先找到post用戶名密碼的代碼片段，這里已知點(diǎn)擊登錄之后會(huì)post一個(gè)含有username和password的json給服務(wù)端，我們在代碼文件中搜索username，并找到提交用戶名密碼的代碼段。

基本可以確定是這個(gè)函數(shù)觸發(fā)了post請求，當(dāng)然代碼里面不止一個(gè)類似的post請求函數(shù)，如果不確定是否為這個(gè)函數(shù)，可以在這個(gè)函數(shù)里面set一個(gè)斷點(diǎn)，然后像上面說的一樣監(jiān)聽登錄按鈕的click事件，調(diào)試的時(shí)候看看會(huì)不會(huì)在這個(gè)函數(shù)內(nèi)的斷點(diǎn)內(nèi)停下，如果在斷點(diǎn)處停下了，說明就是這個(gè)函數(shù)。

接下來，我們要找一下login1函數(shù)在哪里被調(diào)用，逐步往上找，知道找到密碼加密過程。同理，js文件中有多處地方用到了login1函數(shù)，可以通過設(shè)置斷點(diǎn)調(diào)試的方式確定login1函數(shù)在哪里被調(diào)用。

經(jīng)過分析，可以確定的是，login1函數(shù)就是在上圖中的黃色高亮部分被調(diào)用，而其所在行前兩行就是對密碼的加密。

這里可能看起來有點(diǎn)迷惑，為什么前端開發(fā)的代碼命名這么亂七八糟，用t代表密碼，而且怎么好像兩個(gè)login1函數(shù)聲明一樣，不會(huì)沖突嗎。這個(gè)，就不要管那么多啦，因?yàn)?#xff0c;這些代碼根本不是寫出來的，而是通過一些打包工具進(jìn)行了轉(zhuǎn)換。從這些js文件的文件名都有個(gè)bundle可以大概猜出來，應(yīng)該是用webpack/browserify之類的工具打包的。比如用browserify工具能夠讓npm包能夠在瀏覽器代碼中被使用，而且將代碼格式化成一行，變量名采用一個(gè)字母的形式…..,使得代碼文件的字符變少，提高傳輸效率，但是沒有可讀性。

可以知道，前兩行中的this.encrypt對密碼進(jìn)行了加密，并保存在了t變量中，我們轉(zhuǎn)到encrypt代碼看一下

了解過密碼學(xué)的話可以推斷這里代碼使用AES加密算法，變量CRYPTOJSKEY是密鑰。

如果使用過nodejs的crypto-js包的話，可以看出這里的函數(shù)是使用了crypto-js包中的函數(shù)，這個(gè)模塊包含了許多常用的加密，解密算法可以調(diào)用。看到這里的時(shí)候我是認(rèn)為，開發(fā)人員不可能自己去實(shí)現(xiàn)這個(gè)加密算法得啦，估計(jì)就是找一下有沒有現(xiàn)成的包然后調(diào)用。于是我用搜索引擎搜一下Lo.enc.Utf8.parse這個(gè)函數(shù)，就知道這其實(shí)是調(diào)用了crypto-js包。參考這篇文章：https://blog.csdn.net/Rice_kil/article/details/103685034。這里的代碼用變量Lo來表示crypto-js庫的命名空間，估計(jì)是代碼打包工具干的。

我們還要了解一下這個(gè)密鑰是哪里來的，搜索變量CRYPTOJSKEY，可以很容易找到

ok，到這一步，我們就了解了密碼的加密過程，可以用爬蟲模擬登陸過程了。

也可以用postman來模擬測試。返回的json中的jnuid需要記下來，后續(xù)填表提交數(shù)據(jù)的時(shí)候需要用到，用來作為身份驗(yàn)證的數(shù)據(jù)。

OK，我們在表格填寫的頁面先把信息填好，F12打開開發(fā)者工具，然后對數(shù)據(jù)進(jìn)行提交，在開發(fā)者工具的Network標(biāo)簽中找到提交的post數(shù)據(jù)包，檢查一下post請求的數(shù)據(jù)的body中都有哪些內(nèi)容。

我們復(fù)制數(shù)據(jù)包的內(nèi)容并在VsCode中打開，可以看一下這個(gè)數(shù)據(jù)包有哪些字段。然后用Postman偽造數(shù)據(jù)包發(fā)送給服務(wù)端，看看能否得到相同的響應(yīng)。這個(gè)數(shù)據(jù)包中的mainTable字段就是上面填寫表格的內(nèi)容，還有一個(gè)jnuid字段，就是我們登陸成功后返回的身份標(biāo)識(shí)，只需要這兩個(gè)字段就可以提交數(shù)據(jù)給到服務(wù)端。這里服務(wù)端的身份驗(yàn)證設(shè)計(jì)得比較簡單，沒有用到cookie，只通過jnuid字段來驗(yàn)證身份。

我們打開Postman，嘗試模擬數(shù)據(jù)包發(fā)送給服務(wù)端，header中只加了一個(gè)Content-Type: application/json，然后將數(shù)據(jù)包得json內(nèi)容復(fù)制到Body中，發(fā)送出去。

最終我們收到了跟瀏覽器一樣得響應(yīng)，填表成功。

OK，現(xiàn)在我們可以嘗試設(shè)計(jì)自動(dòng)程序，每天幫自己填表打卡，再也不用每天忍受學(xué)校的龜速服務(wù)器。

在設(shè)計(jì)程序時(shí)需要用正則表達(dá)式捕獲網(wǎng)頁中的登陸密鑰，因?yàn)楹髞戆l(fā)現(xiàn)這個(gè)密鑰隔一段時(shí)間就會(huì)變一次。

每天程序填寫完表格后，需要將填寫完成后的響應(yīng)信息通過郵件的形式發(fā)送給自己查看，因?yàn)橛锌赡軙?huì)填寫失敗，比如后臺(tái)api改了。

總結(jié)

以上是生活随笔為你收集整理的前端js自动填写 点击_爬虫自动填写学生健康打卡表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。