整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
種反爬蟲手段被廣泛應(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)容即可。然而事情并沒有那么簡單，細心的讀者可能發(fā)現(xiàn)了，響應(yīng)正文中顯示的內(nèi)容和頁面中呈現(xiàn)的文字并不完全相同——響應(yīng)正文中少了一些標(biāo)點符號和文字，多了一些 span 標(biāo)簽。例如頁面中顯示的是：
夜幕團隊 NightTeam 于 2019 年 9 月 9 日正式成立，團隊由爬蟲領(lǐng)域中實力強勁的多名開發(fā)者組成：崔慶才、周子淇、陳祥安、唐軼飛、馮威、蔡晉、戴煌金、張冶青和韋世東。
復(fù)制代碼而響應(yīng)正文中看到的是：
<p>夜幕團隊 NightTeam 于 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>團隊由爬蟲領(lǐ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ù)制代碼其他的地方還需要自己踩坑。
修改完后就可以獲取到所有被替換過的字符了，接下來只需要把它們替換進 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)藍色的 《 符號，而后面會出現(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”即可（免費分享哦）希望能對你有所幫助
ava 內(nèi)存模型中的 happen-before 是什么?
Happen-before 關(guān)系，是Java 內(nèi)存模型中保證多線程可見性的機制，也是早期語言規(guī)范中含糊可見性概念的一個精確定義。
它的具體表現(xiàn)形式，包括但遠不止 synchronized,volatile,lock 操作順序等方面。
happen-before 保障了順序執(zhí)行，也包括了內(nèi)存讀寫的操作順序。
image
JMM 可以看作是深入理解Java并發(fā)編程、編譯器和JM內(nèi)部機制的必要條件，但這同時也是個容易讓初學(xué)者無所適從的主題。
Java 是最早嘗試提供內(nèi)存模型的語言，可簡化多線程編程，保障程序可移植。 早期的 C/C++ 不存在內(nèi)存模型的概念，依賴處理器本身的內(nèi)存一致性模型。 但是不同的處理器差異比較大，不能保證 C++ 程序在處理器A 可以運行，在處理器B 上也可以運行。
過于范范的內(nèi)存模型定義，有很多模棱兩可之處，對 synchronized 或者 volatile 產(chǎn)生的指令重排序問題，如果沒有清晰的規(guī)范，不能保證一些多線程程序的正確性。
所以，Java迫切需要一個完善的JMM，能夠讓普通Java開發(fā)者和編譯器、JVM工程師，能夠淸地達成共識。換句話說，可以相對簡單并準(zhǔn)確地判斷岀，多線程程序什么樣的執(zhí)行序列是符合規(guī)范的。
對于編譯器、JVM開發(fā)者，關(guān)注點可能是如何使用類似內(nèi)存屏（ Memory-Barrier）之類技術(shù)，保證執(zhí)行結(jié)果符合JMM的推斷。
對于Java應(yīng)用開發(fā)者，則可能更加關(guān)注 volatile、 synchronized等語義，如何利用類{ happen- before的規(guī)則，寫出可靠的多線程應(yīng)用。
image
包含本地內(nèi)存和主內(nèi)存的定義
image
內(nèi)存屏障能夠在類似變量讀、寫操作之后，保證其他線程對 volatile變量的修改對當(dāng)前線程可見，或者本地修改對其他線程提倛可見性。換句話說，線程寫入，寫屏障會通過類似強迫刷出處理器緩存的方式，讓其他線程能夠拿到最新數(shù)值。
如果你對更多內(nèi)存屏障的細節(jié)感興趣，或者想了解不同體系結(jié)構(gòu)的處理器模型，建議參考JSR-133相關(guān)文檔，我個人認為這些都是和特定硬件相關(guān)的，內(nèi)存屏障之類只是實現(xiàn)JMM規(guī)范的技術(shù)手段，并不是規(guī)范的要求。
class VolatileExample {
int a = 0;
volatile boolean flag= false;
public void writer(){
a=1; // 1
flag = true; //2
}
public void reader(){
if(flag){ //3
int i = a ;//4
...
}
}
假設(shè)線程A執(zhí)行 writer方法之后，線程B執(zhí)行 reader0方法。根據(jù) happens-before規(guī)則，這個過程建立的 happens-before關(guān)系可以分為3類：
上述 happens-before關(guān)系的圖形化表現(xiàn)形式如下:
image
在上圖中，每一個箭頭鏈接的兩個節(jié)點，代表了一個 happens-before關(guān)系。黑色箭頭表示程序順序規(guī)則；橙色箭頭表示 volatile規(guī)則；藍色箭頭表示組合這些規(guī)則后提供的 happens-before保證。 最終讀取到的i 就是 1 。
image
線程A在寫flag變量后，本地內(nèi)存A中被線程A更新過的兩個共享變量的值被刷新到主內(nèi)存中。此時，本地內(nèi)存A和主內(nèi)存中的共享變量的值是一致的。
當(dāng)讀一個 volatile變量時，JMM會把該線程對應(yīng)的本地內(nèi)存置為無效。線程接下來將從主內(nèi)存中讀取共享變量。如圖所示，在讀flag變量后，本地內(nèi)存B包含的值已經(jīng)被置為無效。此時，線程B必須從主內(nèi)存中讀取共享變量。線程B的讀取操作將導(dǎo)致本地內(nèi)存B與主內(nèi)存中的共享變量的值變成一致。
image
有序性，原子性，可見性是線程安全的基本保障。
image
我們經(jīng)常會說 volatile b比synchronized之類更加輕量，但輕量也僅僅是相對的， volatile的讀、寫仍然要比普通的讀寫要開銷更大，所以如果你是在性能高度敏感的場景，除非你確定需要它的語義，不然慎用。
近因為一些網(wǎng)頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發(fā)現(xiàn)原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。
「偽元素」之所以稱作「偽」，除了英文從「Pseudo」翻譯過來之外，就是因為它并不是真正網(wǎng)頁里的元素，但行為與表現(xiàn)又和真正網(wǎng)頁元素一樣，也可以對其使用CSS 操控。
跟偽元素類似的還有「偽類」( Pseudo classes )，在W3C的定義里總共有五個偽元素(其他仍在測試階段)，分別是::before、::after、::first-line、::first-letter和::selection，為了和偽類區(qū)分，偽元素使用兩個冒號「::」開頭，而偽類使用一個冒號「:」開頭(像是:hover、:target...等)。
雖然現(xiàn)在的瀏覽器就算寫一個冒號也可以正常運作，不過為了方便區(qū)分，用兩個冒號還是比較好的，而且不論瀏覽器是什么，::selection必須是兩個冒號才能正常運作。
參考：MDN Pseudo-elements、偽類child和of-type
::before、::after大概是最常使用的偽元素，兩者都是以display:inline-block的屬性存在，::before是在原本的元素「之前」加入內(nèi)容，::after則是在原本的元素「之后」加入內(nèi)容，同時偽元素也會「繼承」原本元素的屬性，如果原本文字是黑色，偽元素的文字也會是黑色。
舉例來說，下面這段程式碼，有一個div 內(nèi)容是「大家好，我是div」，使用::before、::after 之后，會在原本div 的前后各添加一段文字，并且讓這兩段文字都呈現(xiàn)紅色。
div::before{
content:"我是 before";
color:red;
}
div::after{
content:"我是 after";
color:red;
}
上述的內(nèi)容乍看之下很容易理解，比較需要注意的是一定要具備content的屬性，就算是只有content:"";都可以，因為沒有content的偽元素是不會出現(xiàn)在畫面上的，然而content是個很特別的屬性，它可以使用attr直接獲取內(nèi)容元素的屬性值( attribute )，舉例來說，在HTML里有一個超連結(jié)，點擊后會彈出新視窗并連結(jié)至Google：
<a target="_blank">google</a>
使用下列的程式碼用法，將會把超連結(jié)的href 內(nèi)容與target 內(nèi)容，透過偽元素一前一后的顯示出來。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}
此外content內(nèi)容是可以「相加」的，不過用法不像JavaScript使用+號來相連，而是直接用一個空白鍵就可以不斷的累加下去，以下面的程式碼來說，可以在剛剛擷取的超連結(jié)文字后方和target屬性前方，加入標(biāo)點符號。
a::before{
content: "( " attr(href) " ) < ";
color:red;
}
a::after{
content: " > ( " attr(target) " ) ";
color:green;
}
content 甚至可以使用url 放入圖片的功能，下列的程式碼會呈現(xiàn)出三張圖片。
div::before{
content:url(圖片網(wǎng)址) url(圖片網(wǎng)址) url(圖片網(wǎng)址);
}
通過調(diào)整border的屬性，我們可以實現(xiàn)上下左右的三角形，再結(jié)合偽元素before，after，content可以繪制多種多邊形，筆者在這篇文章有過介紹，感興趣的可以看看 ：只用1個div，你能用CSS繪制：正3、4、5、6、7、8邊形嗎？
在CSS里有個不常用的屬性就是quotes，這是做為定義「括號格式」的屬性，也就是如果在一段文字被包住，這段文字的前后就會出現(xiàn)自定義的標(biāo)簽替換（可以是括號、特殊符合、文字等），而且quotes支持多層嵌套，也就是你可以一層層的寫下去，以下面這段HTML文字舉例：
最外層<q>第一層<q>第二層</q><q>第二層<q>第三層</q></q></q>
quotes 的屬性如果只寫一層，就會看到只出現(xiàn)一種括號，前后括號使用空白分隔，兩組為一個單位，前后可以不同符號。
q{
quotes: ' < ' ' > ';
}
如果寫了三層，就會看到出現(xiàn)三種括號，也會把文字當(dāng)作括號使用。
q{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
（請注意開合標(biāo)簽的就近分配原則）
同樣的道理，我們可以應(yīng)用在content里面，而且通過偽元素::before和::after處于前后的預(yù)設(shè)位置，甚至不用就實現(xiàn)前后括號的效果，以下面這段HTML文字舉例，把剛剛的q全部換成span：
最外層<span>第一層<span>第二層</span><span>第二層<span>第三層</span></span></span>
CSS的部分比較特別，在偽元素content里使用了open-quote (啟始括號)和close-quote (結(jié)束括號)這兩個有趣的值，換句話說open-quote對應(yīng)到，close-quote對應(yīng)到，此外也由于括號是在偽元素內(nèi)，就可以指定不同的顏色或樣式了。
span{
quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
content:open-quote;
color:red;
}
span::after{
content:close-quote;
color:#aaa;
}
文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html
原文作者：oxxostudio
由于網(wǎng)頁為繁體內(nèi)容，術(shù)語描述和標(biāo)點話術(shù)的差異的問題，筆者在保證不改變原意的基礎(chǔ)上做了調(diào)整，并且內(nèi)容頁進行了驗證確認無誤，歡迎大家指正。
雖然說偽元素很好用，但偽元素的內(nèi)容實際上不存在網(wǎng)頁里( 如果打開瀏覽器的開發(fā)者工具，是看不到內(nèi)容的)，所以如果在里頭塞了太多的重要的內(nèi)容，反而會影響到SEO 的成效，因此對于使用偽元素的定位，還是當(dāng)作「輔助」性質(zhì)會比較恰當(dāng)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
