說說這個網站
汽車之家，反爬神一般的存在，字體反爬的鼻祖網站，這個網站的開發團隊，一定擅長前端吧，2019年4月19日開始寫這篇博客，不保證這個代碼可以存活到月底，希望後來爬蟲coder，繼續和汽車之間對抗。
CSDN上關於汽車之家的反爬文章千千萬萬了，但是爬蟲就是這點有意思，這一刻寫完，下一刻還能不能用就不知道了，所以可以一直不斷有人寫下去。希望今天的博客能幫你學會一個反爬技巧。
今天要爬去的網頁
https://car.autohome.com.cn/config/series/59.html#pvareaid=3454437
我們要做的就是爬取汽車參數配置
具體的數據如下
查看頁面源代碼發現，一個好玩的事情，源代碼中使用了大量的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運行
運行到斷點，在右側就能看到一些參數出現
- :
![在這裏插入圖片描述]()
通過參數去查找，核心的替換方法
接下來，我們進行替換操作，這部流程需要用到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替換就可以拿到真實的數據了。
關注公衆賬號：非本科程序員
關注之後，發送【汽車】獲取源碼
