js破解-學習筆記
具體的資料如下
檢視頁面原始碼發現，一個好玩的事情，原始碼中使用了大量的CSS3的語法 下圖，我標註的部分就是關鍵的一些資料了，大概在600行之後。
反爬措施展示
原始檔資料
剎車/<span class='hs_kw86_baikeIl'></span>安全系統
頁面顯示資料
一些關鍵資料被處理過了。
爬取關鍵資訊
我們要把原始碼中的關鍵資訊先獲取到，即使他資料是存在反爬的。獲取資料是非常簡單的。通過request模組即可
def get_html(): url = "https://car.autohome.com.cn/config/series/59.html#pvareaid=3454437"headers = { "User-agent": "你的瀏覽器UA" } with requests.get(url=url, headers=headers, timeout=3) as res: html = res.content.decode("utf-8") return html
找關鍵因素
在html頁面中找到關鍵點：
- var config
- var levelId
- var keyLink
- var bag
- var color
- var innerColor
- var option
這些內容你找到之後，你下手就用重點了，他們是什麼？資料啊，通過簡單的正則表示式就可以獲取到了
def get_detail(html): config = re.search("var config = (.*?)};", html, re.S) option = re.search("var option = (.*?)};", html, re.S) print(config,option)
輸出結果
>python e:/python/demo.py <re.Match object; span=(167291, 233943), match='var config = {"message":"<span class=\'hs_kw50_co>>python e:/python/demo.py <re.Match object; span=(167291, 233943), match='var config = {"message":"<span class=\'hs_kw50_co> <re.Match object; span=(233952, 442342), match='var option = {"message":"<span class=\'hs_kw16_op>
處理汽車引數
通過正則表示式的search方法，匹配資料，然後呼叫group(0) 即可得到相關的資料
def get_detail(html): config = re.search("var config = (.*?)};", html, re.S) option = re.search("var option = (.*?)};", html, re.S) # 處理汽車引數 car_info = "" if config and option : car_info = car_info + config.group(0) + option.group(0) print(car_info)
拿到資料之後，沒有完，這是混淆之後的資料，需要解析回去，繼續關注網頁原始碼，發現一段奇怪的JS。這段JS先不用管，留點印象即可~
關鍵字破解
注意到
<span class="hs_kw28_configfH"></span>
hs_kw數字_configfH是一個span的class
我選中span之後的::before
對應的css為
發現實測兩個字出現了，對應的class請記住
.hs_kw28_configfH::before
全域性搜尋一下
雙擊找到來源
確定資料就在html原始碼當中。
格式化html原始碼，在內部搜尋hs_kw，找到關鍵函式
function $GetClassName$($index$) { return '.hs_kw' + $index$ + '_baikeCt'; }
這段JS的來源就是我們剛才保留的那個JS程式碼段，複製所有的JS原始碼，到source裡面新建一個snippet，然後我們執行一下。
在裡面程式碼最後新增一個斷點，ctrl+enter執行
執行到斷點，在右側就能看到一些引數出現
- $ruleDict$:
- $rulePosList$
通過引數去查詢，核心的替換方法
接下來，我們進行替換操作，這部流程需要用到selenium進行替換
核心程式碼如下，主要的註釋，我寫在了程式碼內部，希望能幫助你看懂
def write_html(js_list,car_info): # 執行JS的DOM -- 這部破解是最麻煩的，非常耗時間~參考了網際網路上的大神程式碼 DOM = ("var rules = '2';" "var document = {};" "function getRules(){return rules}" "document.createElement = function() {" " return {" " sheet: {" " insertRule: function(rule, i) {" " if (rules.length == 0) {" " rules = rule;" " } else {" " rules = rules + '#' + rule;" " }" " }" " }" " }" "};" "document.querySelectorAll = function() {" " return {};" "};" "document.head = {};" "document.head.appendChild = function() {};" "var window = {};" "window.decodeURIComponent = decodeURIComponent;") # 把JS檔案寫入到檔案中去 for item in js_list: DOM = DOM + item html_type = "<html><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><head></head><body> <script type='text/javascript'>" # 拼接成一個可以執行的網頁 js = html_type + DOM + " document.write(rules)</script></body></html>" # 再次執行的時候，請把檔案刪除，否則無法建立同名檔案，或者自行加驗證即可 with open("./demo.html", "w", encoding="utf-8") as f: f.write(js) # 通過selenium將資料讀取出來，進行替換 driver = webdriver.PhantomJS() driver.get("./demo.html") # 讀取body部分 text = driver.find_element_by_tag_name('body').text # 匹配車輛引數中所有的span標籤 span_list = re.findall("<span(.*?)></span>", car_info) # car_info 是我上面拼接的字串 # 按照span標籤與text中的關鍵字進行替換 for span in span_list: # 這個地方匹配的是class的名稱 例如 <span class='hs_kw7_optionZl'></span> 匹配 hs_kw7_optionZl 出來 info = re.search("'(.*?)'", span) if info: class_info = str(info.group(1)) + "::before { content:(.*?)}" # 拼接為 hs_kw7_optionZl::before { content:(.*?)} content = re.search(class_info, text).group(1) # 匹配文字內容，返回結果為 "實測""油耗""質保" car_info = car_info.replace(str("<span class='" + info.group(1) + "'></span>"), re.search("\"(.*?)\"", content).group(1)) print(car_info)
執行結果
對比一下原來資料，發現問題不大，完成任務。
入庫操作
剩下的步驟就是資料持久化了，資料拿到之後，其他的都是比較簡單的，希望你可以直接搞定。
小擴充套件：格式化JS
碰到這種JS，直接找到格式化工具處理它
http://tool.oschina.net/codeformat/js/
格式完成之後，程式碼具備一定的閱讀能力
思路彙總
汽車之家用CSS隱藏了部分真實的字型，在解決的過程中，需要首先針對class去查詢，當找到JS位置的時候，必須要搞定它的加密規則，順著規則之後，只需要完成基本的key、value替換就可以拿到真實的資料了。
from: https://cloud.tencent.com/developer/article/1423765