整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一)nodeName屬性含有某個節(jié)點的名稱。
元素節(jié)點的nodeName是標(biāo)簽名稱
屬性節(jié)點的nodeName是屬性名稱
文本節(jié)點的nodeName永遠(yuǎn)是#text
文檔節(jié)點的nodeName永遠(yuǎn)是#document
注釋：nodeName所包含的XML元素的標(biāo)簽名稱永遠(yuǎn)是大寫的
(二)nodeValue
對于文本節(jié)點, nodeValue屬性包含文本。
對于屬性節(jié)點, nodeValue屬性包含屬性值。
nodeValue屬性對于文檔節(jié)點和元素節(jié)點是不可用的。
(三)nodeType
nodeType屬性可返回節(jié)點的類型。
最重要的節(jié)點類型是：
元素element 1
屬性attr 2
文本text 3
注釋comments 8
文檔document 9
文檔類型(DocumentType) 10: <!DOCTYPE HTML PUBLIC"...">
(四)tagName
tagName屬性返回元素的標(biāo)簽名。
在HTML中, tagName屬性的返回值始終是大寫的。
tagName只能用在元素節(jié)點上
Hyper Text Markup Language, 超文本標(biāo)記語言
標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來解釋和執(zhí)行該網(wǎng)頁
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.
常見編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)
utf-8: 國際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對頁面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁標(biāo)題, 顯示在瀏覽器選項卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁面上帶格式渲染
small: 比當(dāng)前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯誤時的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對地址, 如: img/cc.jpg
2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>
目標(biāo)窗口:
_self: 目標(biāo)頁面在當(dāng)前窗口打開
_blank: 目標(biāo)頁面在新窗口中打開
如果是在頁面具有frameset/frame/iframe的場景下:
_top: 在頂級窗口中打開
_parent: 在父級窗口中打開
_自定義名稱: 在指定的特定窗口中打開
三種用法:
1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個容器, 常用于頁面的布局
標(biāo)簽的分類:
1. 塊級標(biāo)簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨占容器中的一行, 其寬度是容器的100%
2. 行級標(biāo)簽/行級元素
如: span, img, strong, em, a
特征1: 多個行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級元素設(shè)置其width/height無效
ctrl + D : 刪除當(dāng)前行
ctrl + PgUp : 當(dāng)前行上移
ctrl + PgDown : 當(dāng)前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復(fù)制當(dāng)前行
ctrl + X : 剪切當(dāng)前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當(dāng)前文件
ctrl + shift + S : 保存項目中全部文件
ctrl + Enter : 在當(dāng)前行的下方插入新行
ctrl + shift + Enter : 在當(dāng)前行的上方插入新行
以上知識能做的效果圖
部分效果
種反爬蟲手段被廣泛應(yīng)用在一線互聯(lián)網(wǎng)企業(yè)的產(chǎn)品中，例如汽車資訊類網(wǎng)站、小說類網(wǎng)站等文字密度較大的站點。在開始學(xué)習(xí)之前，我們先來看看具體的現(xiàn)象。打開網(wǎng)址：
https://implicit-style-css_0.crawler-lab.com
復(fù)制代碼呈現(xiàn)在我們眼前的是這樣一個界面：
這次的任務(wù)，就是拿到頁面上所呈現(xiàn)的內(nèi)容的文本。在編寫爬蟲代碼之前，我們要做幾件事：
其實就是最基本的觀察和分析。
網(wǎng)絡(luò)請求方面，打開瀏覽器調(diào)試工具并切換到 Network 面板后，看到頁面只加載了 2 個資源：
一個 html 文檔和一個 js 文件，想必我們要的內(nèi)容就在 html 文檔中。點擊該請求，瀏覽器開發(fā)者工具就會分成兩欄，左側(cè)依然是請求記錄列表，右側(cè)顯示的是指定請求的詳情。右側(cè)面板切換到 Response，就可以看到服務(wù)器響應(yīng)的內(nèi)容：
看樣子，我們要的東西就在這次響應(yīng)正文中。咋一看，我們直接取 class 為 rdtext 的 div 標(biāo)簽下的 p 標(biāo)簽中的文本內(nèi)容即可。然而事情并沒有那么簡單，細(xì)心的讀者可能發(fā)現(xiàn)了，響應(yīng)正文中顯示的內(nèi)容和頁面中呈現(xiàn)的文字并不完全相同——響應(yīng)正文中少了一些標(biāo)點符號和文字，多了一些 span 標(biāo)簽。例如頁面中顯示的是：
夜幕團(tuán)隊 NightTeam 于 2019 年 9 月 9 日正式成立，團(tuán)隊由爬蟲領(lǐng)域中實力強(qiáng)勁的多名開發(fā)者組成：崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。
復(fù)制代碼而響應(yīng)正文中看到的是：
<p>夜幕團(tuán)隊 NightTeam 于 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>團(tuán)隊由爬蟲領(lǐng)域中實力強(qiáng)勁<span class="context_kw1"></span>多<span class="context_kw21"></span>開發(fā)者組成：崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東<span class="context_kw2"></span>
</p>
復(fù)制代碼這句話中，被 span 標(biāo)簽替代的有逗號、的字、名字。整體看一遍，發(fā)現(xiàn)這些 span 標(biāo)簽都帶有 class 屬性。
明眼人一看就知道，又是利用了瀏覽器渲染原理做的反爬蟲措施。不明所以的讀者請去翻閱《Python3 反爬蟲原理與繞過實戰(zhàn)》。
既然跟 span 和 class 有關(guān)，那我們來看一下 class 屬性到底設(shè)置了什么。class 名為 context_kw0 的 span 標(biāo)簽樣式如下：
.context_kw0::before {
content: "，";
}
復(fù)制代碼再看看其他的，class 屬性為 context_kw21 的 span 標(biāo)簽樣式如下：
.context_kw21::before {
content: "名";
}
復(fù)制代碼原來被替換掉的文字出現(xiàn)在這里！看到這里，想必聰明的你也知道是怎么回事了！
解決這個問題的辦法很簡單，只需要提取出 span 標(biāo)簽 class 屬性名稱對應(yīng)的 content 值，然后將其恢復(fù)到文本中即可。
屬性名有個規(guī)律：context_kw + 數(shù)字。也就是說 context_kw 有可能是固定的，數(shù)字是循環(huán)出來的，或者是數(shù)組中的下標(biāo)？大膽猜想一下，假設(shè)有這么一個字典：
{0: "，", 1: "的", 21: "名"}
復(fù)制代碼那么將 context_kw 與字典的鍵組合，就得到了 class 的名稱，對應(yīng)的值就作為 content，這好像很接近了。中高級爬蟲工程師心中都明白：在網(wǎng)頁中，能干出如此之事唯有借助 JavaScript。不明白的讀者請去翻閱《Python3 反爬蟲原理與繞過實戰(zhàn)》。
那就搜一下吧！
喚起瀏覽器調(diào)試工具的全局搜索功能，輸入 context_kw 并會車。然后在搜索結(jié)果中尋找看上去有用的信息，例如：
發(fā)現(xiàn) JavaScript 代碼中出現(xiàn)了 context_kw，關(guān)鍵的信息是 .context_kw + i + _0xea12('0x2c')。代碼還混淆了一下！看不出的讀者可以找作者韋世東報名《JavaScript 逆向系列課》，學(xué)完就能夠很快找到看上去有用的代碼，并且看懂代碼的邏輯。
這里手把手帶讀一下這些 JavaScript 代碼。第一段，也就是 977 行代碼原文如下：
var _0xa12e = ['appendChild', 'fromCharCode', 'ifLSL', 'undefined', 'mPDrG', 'DWwdv', 'styleSheets', 'addRule', '::before', '.context_kw', '::before{content:\x20\x22', 'cssRules', 'pad', 'clamp', 'sigBytes', 'YEawH', 'yUSXm', 'PwMPi', 'pLCFG', 'ErKUI', 'OtZki', 'prototype', 'endWith', 'test', '8RHz0u9wbbrXYJjUcstWoRU1SmEIvQZQJtdHeU9/KpK/nBtFWIzLveG63e81APFLLiBBbevCCbRPdingQfzOAFPNPBw4UJCsqrDmVXFe6+LK2CSp26aUL4S+AgWjtrByjZqnYm9H3XEWW+gLx763OGfifuNUB8AgXB7/pnNTwoLjeKDrLKzomC+pXHMGYgQJegLVezvshTGgyVrDXfw4eGSVDa3c/FpDtban34QpS3I=', 'enc', 'Latin1', 'parse', 'window', 'location', 'href', '146385F634C9CB00', 'decrypt', 'ZeroPadding', 'toString', 'split', 'length', 'style', 'type', 'setAttribute', 'async', 'getElementsByTagName', 'NOyra', 'fgQCW', 'nCjZv', 'parentNode', 'insertBefore', 'head'];
(function (_0x4db306, _0x3b5c31) {
var _0x24d797 = function (_0x1ebd20) {
while (--_0x1ebd20) {
_0x4db306['push'](_0x4db306['shift']());
}
};
復(fù)制代碼往下延伸閱讀，還能看到 CryptoJS 這個詞，看到它就應(yīng)該曉得代碼中使用了一些加密解密的操作。
第二段，1133 行代碼原文如下：
for (var i = 0x0; i < words[_0xea12('0x18')]; i++) {
try {
document[_0xea12('0x2a')][0x0][_0xea12('0x2b')]('.context_kw' + i + _0xea12('0x2c'), 'content:\x20\x22' + words[i] + '\x22');
} catch (_0x527f83) {
document['styleSheets'][0x0]['insertRule'](_0xea12('0x2d') + i + _0xea12('0x2e') + words[i] + '\x22}', document[_0xea12('0x2a')][0x0][_0xea12('0x2f')][_0xea12('0x18')]);
}
}
復(fù)制代碼這里循環(huán)的是 words，然后將 words 元素的下標(biāo)和對應(yīng)元素組合，這和我們猜想的是非常接近的，現(xiàn)在要找到 words。
怎么找？
又不會嗎？
搜索就可以了，順著搜索結(jié)果看，找到了定義 words 的代碼：
var secWords = decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words = new Array(secWords[_0xea12('0x18')]);
復(fù)制代碼按照這個方法，我們最后發(fā)現(xiàn) CSS 的 content 的內(nèi)容都是數(shù)組 _0xa12e 中一個經(jīng)過加密的元素先經(jīng)過 AES 解密再經(jīng)過一定處理后得到的值。
捋清楚邏輯之后，就可以開始摳出我們需要的 JS 代碼了。
這個代碼雖然經(jīng)過混淆，但還是比較簡單的，所以具體的摳代碼步驟就不演示了，這里提示一下在摳出代碼之后兩個需要改寫的點。
第一個是下圖中的異常捕獲，這里判斷了當(dāng)前的 URL 是否為原網(wǎng)站的，但調(diào)試時，在 Node 環(huán)境下執(zhí)行是沒有 window 對象、document 對象的，如果不做修改會出現(xiàn)異常，所以需要把帶有這些對象的代碼注釋掉，例如下面 if 判斷語句：
try {
if (top[_0xea12('0x10')][_0xea12('0x11')][_0xea12('0x12')] != window[_0xea12('0x11')]['href']) {
top['window'][_0xea12('0x11')]['href'] = window[_0xea12('0x11')][_0xea12('0x12')];
}
復(fù)制代碼其他的地方還需要自己踩坑。
修改完后就可以獲取到所有被替換過的字符了，接下來只需要把它們替換進(jìn) HTML 里就可以還原出正常的頁面，replace 就不演示了噢。
例子中用到的是 ::before，下方文字描述了它的作用：
在 CSS 中，::before 用于創(chuàng)建一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素添加修飾性的內(nèi)容。
引用自：developer.mozilla.org/zh-CN/docs/…
舉個例子，新建一個 HTML 文檔，并在里面寫上如下內(nèi)容：
<q>大家好，我是咸魚</q>，<q>我是 程序員中的一員</q>
復(fù)制代碼然后為 q 標(biāo)簽設(shè)置樣式：
q::before {
content: "?";
color: blue;
}
q::after {
content: "?";
color: red;
}
復(fù)制代碼完整代碼如下（寫給沒有 HTML 基礎(chǔ)的朋友）：
<style>
q::before {
content: "?";
color: blue;
}
q::after {
content: "?";
color: red;
}
</style>
<q>大家好，我是咸魚</q>，<q>我是 程序員中的一員</q>
復(fù)制代碼我們在樣式中，為 q 標(biāo)簽加上了 ::before 和 ::after 屬性，并設(shè)置了 content 和對應(yīng)的顏色。于是乎，在被q 標(biāo)簽包裹著的內(nèi)容前會出現(xiàn)藍(lán)色的 《 符號，而后面會出現(xiàn)紅色的 》 符號。
簡單易懂吧！
本文簡單介紹了隱式 Style–CSS 在反爬蟲中的應(yīng)用，并通過一個簡單的實例學(xué)習(xí)了如何應(yīng)對這種情況，相信嘗試過的你已經(jīng)清楚地知道下次碰到這種反爬的時候該如何破解了。
當(dāng)然呢，這個例子還不夠完善，沒有完全覆蓋到隱式 Style–CSS 在反爬蟲中的所有應(yīng)用方式，如果讀者朋友對這類反爬蟲有興趣的話，不妨多找?guī)讉€例子自己動手試試，也歡迎通過留言區(qū)與我交流討論。
最后，小編想說：我是一名python開發(fā)工程師，
整理了一套最新的python系統(tǒng)學(xué)習(xí)教程，
想要這些資料的可以關(guān)注私信小編“01”即可（免費分享哦）希望能對你有所幫助
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
