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

一開始的時候，我是用selenium驅動瀏覽器幫助自己填寫每天的健康狀況，并做了一套web程序，可供學校的其它同學使用。一想到有可能會被舉報，于是就沒有部署到自己的服務器上面供同學們使用，于是將它開源了出來，并寫一下博客紀念一下。

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

接下來進入正題：

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

F12打開chrome的開發者工具進行調試，輸入賬號密碼之后提交，發現客戶端只是post一個非常簡單的json，只有username和password兩個key，username就是我的學號，但是password進行了加密。

吐槽一下這個網站的設計，沒有用到cookie，你隨時可以重新登錄，只要打開登錄的url即可，輸入賬號密碼，判斷一下今天是否填過表，如果填過了，就給你重定向到填寫完成的頁面。如果沒有，就重定向到填寫的頁面。而如果你新開一個標簽并打開填寫頁面，就又回到了登錄頁面，沒有識別cookie來判斷你的身份的過程。而你在填寫完成的頁面的標簽上面的鏈接中輸入填寫的頁面，就給你打開填寫頁面了。因為這個頁面其實是有效的，只不過它的程序判斷你填過了就不給你重定向到那個頁面。

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

點擊Chrome開發者工具的Sources標簽，左邊是這個網站所有的文件，加密的代碼就在js文件或html的script標簽中，只需要研究這些文件就好了。

我們需要監聽登錄按鈕綁定的click事件，當點擊登錄后，開始斷點調試點擊按鈕之后執行的代碼。我們在Source標簽下選擇右邊面板中的Event Listener Breakpoints，里面選擇Mouse，展開選擇click。這樣瀏覽器就會監聽所有的click事件。在輸入賬號密碼之后進行設置（否則點擊輸入框會觸發click事件）。

點擊登錄按鈕開始調試，我們要找到點擊登錄按鈕之后發生的加密過程。不過你一直單步調試是點不完的。一般還是根據經驗來找到你想要的代碼片段。

這里講一個合理的思路：

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

基本可以確定是這個函數觸發了post請求，當然代碼里面不止一個類似的post請求函數，如果不確定是否為這個函數，可以在這個函數里面set一個斷點，然后像上面說的一樣監聽登錄按鈕的click事件，調試的時候看看會不會在這個函數內的斷點內停下，如果在斷點處停下了，說明就是這個函數。

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

經過分析，可以確定的是，login1函數就是在上圖中的黃色高亮部分被調用，而其所在行前兩行就是對密碼的加密。

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

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

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

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

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

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

也可以用postman來模擬測試。返回的json中的jnuid需要記下來，后續填表提交數據的時候需要用到，用來作為身份驗證的數據。

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

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

我們打開Postman，嘗試模擬數據包發送給服務端，header中只加了一個Content-Type: application/json，然后將數據包得json內容復制到Body中，發送出去。

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

OK，現在我們可以嘗試設計自動程序，每天幫自己填表打卡，再也不用每天忍受學校的龜速服務器。

在設計程序時需要用正則表達式捕獲網頁中的登陸密鑰，因為后來發現這個密鑰隔一段時間就會變一次。

每天程序填寫完表格后，需要將填寫完成后的響應信息通過郵件的形式發送給自己查看，因為有可能會填寫失敗，比如后臺api改了。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。