平常的樣式排版中,我們經常遇到將某個模塊隱藏,下面我整理了一下隱藏元素的多種方法以及對比(有的占據空間,有的不占據空間。有的可以點擊,有的不能點擊。):
( 一 ) display: none;
特點:元素不可見,不占據空間,無法響應點擊事件。
.hide{ display: none; }
( 二 ) opacity: 0; ( IE8以下版本:filter:Alpha(opacity=50) )
特點:改變元素透明度,元素不可見,占據頁面空間,可以響應點擊事件。
.hide{ opacity: 0; filter:Alpha(opacity=0); }
( 三 ) visibility: hidden;
特點:元素不可見,占據頁面空間,無法響應點擊事件。
.hide{ visibility: hidden; }
( 四 ) transform: scale(0);
( 1 ) zoom: 0.1; transform: scale(0);
特點:元素不可見,IE 6 7 9 不占據頁面空間,IE8 谷歌 火狐 歐朋 等瀏覽器占據空間,無法響應點擊事件。
.hide{ zoom: 0.1; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }
( 2 ) position: absolute; zoom: 0.1; transform: scale(0);
特點:元素不可見,不占據頁面空間,無法響應點擊事件。
.hide{ position: absolute; zoom: 0.1; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }
( 五 ) width: 0; height: 0; 配合overflow: hidden;
特點:元素不可見,不占據頁面空間,無法響應點擊事件。但 padding值 和 margin值 依然存在,需要將內外邊距都調整為0。
.hide{ display: inline-block; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
( 六 ) position: absolute; left: -200%; 或者 top: -200%;等,父級需要相對定位,這種left top值可以根據具體的實際情況去定義
特點:元素不可見,不占據頁面空間,無法響應點擊事件。
. father{ position: relative; overflow: hidden; } .hide{ position: absolute; left: -200%;//或top: -200%; }
( 七 ) clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
特點:元素不可見,占據頁面空間,無法響應點擊事件。
.hide{ float: left; width: 150px; margin: 20px; clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); }
( 八 ) margin: top | right | bottom | left ;父級添加overflow: hidden; (margin的值 一定要小于(子級的寬度加上邊距的總和的負數))
特點:元素不可見,不占據頁面空間,無法響應點擊事件。
.father{ width: 400px; height: 400px; overflow: hidden; } .hide{ display: inline-block; width: 200px; height: 200px; margin-left: -200px; }
以上就是幾種隱藏元素的方法,我在以前的面試中,也碰到了面試官提出的一些關于隱藏元素css的對比,查閱了一些資料,做了以下整理:
( 一 ) display: none 和 visibility: hidden 的區別
1. 占據頁面空間( display: none 將元素隱藏后,在頁面是是不占有空間位置的,而visibility: hidden 將元素隱藏后,還保留著元素大小的空間位置 ) ;
2. display: none 影響了 reflow和repaint(回流與重繪),而visibility: hidden并沒有影響
3. 某個模塊添加了display: none; 它下面的任何子級都會被隱藏,而添加了visibility: hidden,子級一旦有添加visibility: visible的css,該子級將不會被隱藏。
( 二 ) display: none 和 opacity: 0的區別
1. 占據頁面空間( display: none 將元素隱藏后,在頁面是是不占有空間位置的,而opacity: 0 只是改變了元素的透明度將其隱藏,還保留著元素大小的空間位置 ) ;
2. display: none 不會被子類繼承,但是子類一樣不會顯示。 opacity: 0 會被子類繼承,但不能像visibility的屬性一樣,給子類添加opacity:1,并不能將子類顯示。
3. css3 transition 屬性對display:none 并無效果,但對opacity 則有效果。(附加一句,對visibility: hidden也無效果)
avaScript奇技淫巧:隱形字符
本文,分享一種奇特的JS編程技巧,功能是:可以使字符串“隱形”、不可見!
如下圖所示,一個字符串經物別的操作之后,其長度有621字節,但內容卻是“隱形”不可見的!
這個技術可以應用到很多領域,非常具有實用性。
比如:代碼加密、數據加密、文字隱藏、內容保密、隱形水印,等等。
實現字符串隱形,技術原理是“零寬字符”。
什么是“零寬字符”呢?
在Unicode編碼中,有一類奇怪的字符格式,它們不可見、不可打印,主要用于調整字符的顯示格式。
常見零寬字符類型:
空格符:格式為U+200B,用于較長字符的換行分隔;
非斷空格符:格式為U+FEFF,用于阻止特定位置的換行分隔;
連字符:格式為U+200D,用于阿拉伯文與印度語系等文字中,使不會發生連字的字符間產生連字效果;
斷字符:格式為U+200C,用于阿拉伯文、德文、印度語系等文字中,阻止會發生連字的字符間的連字效果;
左至右符:格式為U+200E,用于在混合文字方向的多種語言文本中,規定排版文字書寫方向為左至右;
右至左符:格式為U+200F : 用于在混合文字方向的多種語言文本中,規定排版文字書寫方向為右至左;
在編程實現隱形字符功能時,先將字符串轉為二進制,再將二進制中的1轉換為\u200b;0轉換為\u200c;空格轉換為\u200d,最后使用\ufeff 零寬度非斷空格符作分隔符。這幾種unicode字符都是不可見的,因此最終轉化完成并組合后,就會形成一個全不可見的“隱形”字符串。
function text_2_binary(text){
return text.split('').map(function(char){ return char.charCodeAt(0).toString(2)}).join(' ');
}
function binary_2_hidden_text(binary){
return binary.split('').map(function (binary_num){
var num = parseInt(binary_num, 10);
if (num === 1) {
return '\u200b';
} else if(num===0) {
return '\u200c';
}
return '\u200d';
}).join('\ufeff')
}
var text = "jshaman是專業且強大的JS代碼混淆加密工具";
var binary_text = text_2_binary(text);
var hidden_text = binary_2_hidden_text(binary_text);
console.log("原始字符串:",text);
console.log("二進制:",binary_text);
console.log("隱藏字符:",hidden_text,"隱藏字符長度:",hidden_text.length);
接下來介紹“隱形”后的內容如何還原。
在了解上文內容之后,知道了字符隱形的原理,再結合源代碼可知:還原隱形內容,即進行逆操作:將隱形的unicode編碼轉化成二進制,再將二進制轉成原本字符。
直接給出源碼:
function hidden_text_2_binary(string){
return string.split('\ufeff').map(function(char){
if (char === '\u200b') {
return '1';
} else if(char === '\u200c') {
return '0';
}
return ' ';
}).join('')
}
function binary_2_Text(binaryStr){
var text = ""
binaryStr.split(' ').map(function(num){
text += String.fromCharCode(parseInt(num, 2));
}).join('');
return text.toString();
}
console.log("隱形字符轉二進制:",hidden_text_2_binary(hidden_text));
console.log("二進制轉原始字符:",binary_2_Text(hidden_text_2_binary(hidden_text)));
運行效果:
如果在代碼中直接提供“隱形”字符內容,比如ajax通信時,將“隱形”字符由后端傳給前端,并用以上解密方法還原,那么這種方式傳遞的內容會是非常隱秘的。
但還是存在一個安全問題:他人查看JS源碼,能看到解密函數,這可能引起加密方法泄露、被人推導出加密、解密方法。
對此問題,可以采用JS代碼混淆加密,進一步提升整體JS代碼安全性。
用JShaman對上面兩個解密函數進行代碼混淆加密。
如下圖,來到JShaman網站,貼入要加密的JS代碼:
使用如下配置:
得到加密的JS代碼:
將代碼粘貼回源文件中:
加密的JS代碼,運行起來跟之前完全一樣。
但此時,已不再是裸露的透明JS代碼,從這混亂復雜的代碼中很難看出功能邏輯。
注:“隱形字符”技術,可用于前后端JS執行環境,即可在Node.JS中執行,也可在瀏覽器中使用。
這篇文章我翻譯自:https://github.com/JonasCz/How-To-Prevent-Scraping,因為最近在看一些反爬的資料,無意間在 Github 發現這篇文章,我覺得寫的很全面,所以想要翻譯一下,順便進行吸收。另外讓我覺得非常贊的是這個文章從服務端和前端的角度都做了分析,我們應該從哪些點去做優化,而且每個點都舉了例子,有些還給出了注意點。雖然文中有些提到的一些點很基礎,也有很多我們目前在業務中也在使用,但是我還是從中吸收到了一些新東西,里面文中外部鏈接有很多,但是公眾號這里不允許外鏈,所以大家可以點擊文末最后的"閱讀原文"到 Github 去查看,Github Markdown 的排版可能也比這里更好 : )。
(最后,有些倉促,可能有些注意不到的措別字,還請多多包涵)
提示:這篇文章是我 Stack Overflow 這個問題回答的擴展,我把它整理在 Github 因為它實在是太長了,超過了 Stack Overflow 的字數限制(最多 3 萬個字,這文章已經超過 4 萬字)
歡迎大家修改、完善還有分享,本文使用 CC-BY-SA 3.0 許可。
不幸的是這挺難的,你需要在防抓和降低真實用戶以及搜索引擎的可訪問性之間做一下權衡。
為了防爬(也稱為網頁抓取、屏幕抓取、網站數據挖掘、網站收割或者網站數據獲?。?,了解他們的工作原理很重要,這能防止他們能高效爬取,這個就是這篇文章的主要內容。
通常情況下,抓取程序的目的是為了獲取你網站特定的信息,比如文章內容、搜索結果、產品詳情還有網站上藝術家或者相冊信息。他們爬取這些內容用于維護他們自己的網站(甚至通過你的內容賺錢?。?,或者制作和你網站不一樣的前端界面(比如去做移動 APP),還有一些可能作為個人研究或分析使用。
實際上,有特別多的爬蟲類型,而且他們的爬取方式都不太相同:
以上不同的爬蟲類型有很多相同點,很多爬蟲的行為也很相似,即使他們使用了不同的技術或者方案去爬取你的內容。
這些大多數都是我自己的想法,我在寫爬蟲時也遇到許多困難,還有一些是來源于網絡。
一些常見的檢測和防止爬蟲的方法:
周期性的檢查你的日志,如果發現有異?;顒颖砻魇亲詣优廊。ㄅ老x),類似某一個相同的 IP 很多相同的行為,那你就可以阻止或限制訪問。
一些常用的方法:
舉個例子,如果某個 IP 請求了你網站很多次,所有的訪問都有相同的 UserAgent 、屏幕尺寸(JavaScript 檢測),還有全都使用同樣的方式和固定的時間間隔點擊同一個按鈕,那它大概是一個屏幕爬蟲;你可以臨時限制相似的請求(比如 只限制來自那個 IP 特定 User-Agent 和 屏幕尺寸的請求),這樣你不會誤傷同樣使用這個 IP 的真實用戶,比如共享網絡鏈接的用戶。
更進一步,當你發現相似的請求,但是來自不同的 IP 地址,表明是分布式爬蟲(使用僵尸網絡或網絡代理的爬蟲)。如果你收到類似大量的請求,但是他們來自不同的 IP 地址,你可以拒絕訪問。再強調一下,小心不經意限制了真實用戶。
這種方法對那種運行 JavaScript 的屏幕爬蟲比較有效,因為你可以獲得他們大量的信息。
Stack Exchange 上關于 Secruity 的相關問題:
How to uniquely identify users with the same external IP address?
Why do people use IP address bans when IP addresses often change? 關于僅使用 IP 的其他限制
如果可行,要求創建用戶才可以查看你的內容。這個可以很好的遏制爬蟲,但很容易遏制真實用戶:
為了防止爬蟲創建大量的用戶,你應該:
要求注冊用戶對用戶和搜索引擎來說不友好;如果你要求必須注冊才可以看文章,那用戶也可能直接離開。
有時爬蟲會被運行在云服務商,比如 Amazon Web Services 或 Google App Engine,或者其他 VPS。限制這些來自云服務商的 IP 地址訪問你的網站(或出驗證碼)。你可以可以直接對來自爬取服務的 IP 地址限制訪問。
類似的,你也可以限制來自代理或 VPN 的 IP 地址,因為很多爬蟲會使用它們來防止被檢測到。
但是要知道限制來自代理服務器或 VPN 的 IP,也很容易影響到真實用戶。
如果你要封禁或限制訪問,你應該確保不要把導致封禁的原因告訴爬蟲,他們會根據提示修改自己的爬蟲程序。所以下面的這些錯誤最好不要出現:
想法的,展示一些不包含原因的友好信息會更好,比如下面的信息會更好:
如果真實用戶看到這個錯誤頁面,這個對真實用戶來說也十分友好。在后續訪問中,你也可以考慮展示驗證碼而不是直接封禁,如果真實用戶看到這個錯誤信息,對于合法用戶也會聯系你。
驗證碼(Captcha,“Completely Automated Test to Tell Computers and Humans Apart”)對于防爬十分有效。不幸的是,它也很容易惹惱用戶。
因此,如果你發現疑似爬蟲,而且想要阻止它的爬取行為,而不是封禁它以免它是真實用戶。你可以考慮顯示驗證碼在你再次允許訪問之前。
使用驗證碼的注意事項:
你可以在服務端將文字渲染成圖片顯示,他將防止簡單的爬蟲去獲取文字內容。
然而,這個對于屏幕閱讀器、搜索引擎、性能還有一些其他一些事情都不太好。這個在某些方面也是不違法的(源于訪問性問題,eg. the Americans with Disabilities Act),而且對于一些 OCR 爬蟲也能非常簡單的規避,所以不要采用這種方式。
你也可以用 CSS sprites 做類似的事情,但是也有相同的問題。
如果可以的話,不要讓腳本/爬蟲能獲取你所有的數據。舉個例子:你有一個新聞站,有大量的個人文章。你應該確保文章只能通過你自己網站的搜索到,如果你網站不是到處都有你的文章還有鏈接,那么確保它們只能被搜索功能訪問到。這意味著如果一個腳本想要獲取你網站的所有文章,就必須通過你站點文章中所有可能的短語去進行搜索,從而獲取所有的文章列表,但是這個會非常耗時,而且低效,從而讓爬蟲放棄。
以下操作會讓你完全暴露:
確保你不會暴露你的任何 API,很多時候都是無意間暴露。舉個例子,如果你正在使用 AJAX 或 Adobe Flash 的網絡請求 或 Java Applet(千萬不要用?。﹣砑虞d你的數據,從這些網絡請求中找到要請求的 API 十分簡單,比如可以進行反編譯然后在爬蟲程序中使用這些接口。確保你混淆了你的 API 并且其他人要用它會非常難破解。
由于 HTML 解析器是通過分析頁面特定結構去獲取內容,我們可以故意修改這些結構來阻止這類爬蟲,甚至從根本上他們獲取內容。下面大多數做法對其他類型爬蟲如搜索引擎蜘蛛、屏幕爬蟲也有效。
處理 HTML 的爬蟲通過分析特定可識別的部分來處理 HTML。舉個例子:如果你所有的頁面都有 id 為 article-content 的 div 結構,然后里面有你的文章內容,那要獲取你站點所有文章內容是十分簡單的,只要解析那個 article-content 那個 div 就可以了,然后有這個結構的爬蟲就可以把你的文章隨便用在什么地方。
如果你常常修改 HTML 還有你頁面的結構, 那這類爬蟲就不能一直使用。
本質上來說,就是確保爬蟲從相似頁面獲取想要的內容變得不那么容易。
可以參考這個 PHP 的實現:How to prevent crawlers depending on XPath from getting page contents
這個和前一個類似。如果你根據不同用戶的位置/國家(根據 IP 獲?。﹣硖峁┎煌?HTML,這個可能會破壞將站點 HTML 給用戶的爬蟲。比如,如果有人寫了一個移動 APP 來抓取你的站點,一開始可以用,但是對于不同地區的用戶就不起作用了,因為他們會獲取到不同的 HTML 結構,嵌入式的 HTML 將不不能正常使用。
舉個例子:你有一個包含搜索功能的網站, example.com/search?query=somesearchquery 的搜索結果是下面的 HTML 結構:
<div class="search-result">
<h3 class="search-result-title">Stack Overflow has become the world's most popular programming Q & A website</h3>
<p class="search-result-excerpt">The website Stack Overflow has now become the most popular programming Q & A website, with 10 million questions and many users, which...</p>
<a class"search-result-link" href="/stories/stack-overflow-has-become-the-most-popular">Read more</a>
</div>
(And so on, lots more identically structured divs with search results)
你可以猜到這個非常容易爬?。阂粋€爬蟲需要做的就只是訪問搜索鏈接,然后從返回的 HTML 分析想要的數據。除了定期修改上面 HTML 的內容,你也可以 保留舊結構的 id 和 class,然后使用 CSS 進行隱藏,并使用假數據進行填充,從而給爬蟲投毒 。比如像下面這樣:
<div class="the-real-search-result">
<h3 class="the-real-search-result-title">Stack Overflow has become the world's most popular programming Q & A website</h3>
<p class="the-real-search-result-excerpt">The website Stack Overflow has now become the most popular programming Q & A website, with 10 million questions and many users, which...</p>
<a class"the-real-search-result-link" href="/stories/stack-overflow-has-become-the-most-popular">Read more</a>
</div>
<div class="search-result" style="display:none">
<h3 class="search-result-title">Visit example.com now, for all the latest Stack Overflow related news !</h3>
<p class="search-result-excerpt">EXAMPLE.COM IS SO AWESOME, VISIT NOW! (Real users of your site will never see this, only the scrapers will.)</p>
<a class"search-result-link" href="http://example.com/">Visit Now !</a>
</div>
(More real search results follow)
這意味著基于 id 或 class 獲取特定數據的爬蟲仍然能繼續工作,但是他們將會獲取假數據甚至廣告,而這些數據真實用戶是看不到的,因為他們被 CSS 隱藏了。
對上個例子進行補充,你可以在你的 HTML 里面增加不可見的蜜罐數據來抓住爬蟲。下面的例子來補充之前說的搜索結果:
<div class="search-result" style="display:none">
<h3 class="search-result-title">This search result is here to prevent scraping</h3>
<p class="search-result-excerpt">If you're a human and see this, please ignore it. If you're a scraper, please click the link below :-)
Note that clicking the link below will block access to this site for 24 hours.</p>
<a class"search-result-link" href="/scrapertrap/scrapertrap.php">I'm a scraper !</a>
</div>
(The actual, real, search results follow.)
一個來獲取所有內容的爬蟲將會被找到,就像獲取其他結果一樣,訪問鏈接,查找想要的內容。一個真人將不會看到(因為使用 CSS 隱藏),而且更不會訪問這個鏈接。而正規或者期望的蜘蛛比如谷歌的蜘蛛將不會訪問這個鏈接,因為你可以將 /scrapertrap/ 加入你的 robots.txt 中(不要忘記增加)
你可以讓你的 scrapertrap.php 做一些比如限制這個 IP 訪問的事情,或者強制這個 IP 之后的請求出驗證碼。
如果你確定某個訪問是爬蟲,你可以提供假的或者無用的數據;這將破壞爬蟲從你網站獲取的數據。你還應該把它和真實數據進行混淆,這樣爬蟲就不知道他們獲取的到底是真的還是假的數據。
舉個例子:如果你有一個新聞站,你檢測到了一個爬蟲,不要去直接封禁它,而是提供假的或者隨機生成的文章,那爬蟲獲取的數據將會被破壞。如果你將假數據和真實的數據進行混淆,那爬蟲很難獲取到他們想要的真實文章。
很多懶惰的程序員不會在他們的爬蟲發請求時帶上 UserAgent,而所有的瀏覽器包括搜索引擎蜘蛛都會攜帶。
如果請求你時沒有攜帶 UserAgent header 頭,你可以展示驗證碼,或者直接封禁或者限制訪問(或者像上面說的提供假數據或者其他的)
這個非常簡單去避免,但是作為一種針對書寫不當的爬蟲,是值得去做的。
很多情況下,爬蟲將會使用真實瀏覽器或搜索引擎爬蟲絕對不會使用的 UserAgent,比如:
如果你發現一些爬蟲使用真實瀏覽器或合法蜘蛛絕對不會使用的 UserAgent,你可以將其添加到你的黑名單中。
對上一章節的補充,你也可以檢查 [Referer] (https://en.wikipedia.org/wiki/HTTP_referer header) (是的,它是 Referer,而不是 Referrer),一些懶惰的爬蟲可能不會攜帶的這個,或者只是每次都攜帶一樣的(有時候是 “google.com”)。舉個例子,如果用戶是從站內搜索結果頁點擊進入文章詳情的,那要檢查 Referer 這個 header 頭是否存在還要看搜索結果頁的打點。
注意:
還是,作為一種防止簡單爬蟲的方法,也值得去實現。
一個真實瀏覽器(通常)會請求和下載資源比如 CSS 和 圖片。HTML 解析器和爬取器可能只關心特定的頁面和內容。
你可以基于訪問你資源的日志,如果你看到很多請求只請求 HTML,那它可能就是爬蟲。
注意搜索引擎蜘蛛、舊的移動設備、屏幕閱讀器和設置錯誤的設備可能也不會請求資源。
訪問你網站時,你可以要求 cookie 必須開啟。這個能識別沒有經驗和爬蟲新手,然而爬蟲要攜帶 Cookie 也十分簡單。如果你要求開啟 Cookie,你能使用它們來追蹤用戶和爬蟲的行為,然后基于此來實現頻率限制、封禁、或者顯示驗證碼而不僅僅依賴 IP 地址。
舉個例子:當用戶進行搜索時,設置一個唯一的 Cookie。當搜索結果加載出來之后,驗證這個 Cookie。如果一個用戶打開了所有的搜索結果(可以從 Cookie 中得知),那很可能就是爬蟲
使用 Cookie 可能是低效的,因為爬蟲也可以攜帶 Cookie 發送請求,也可以根據需要丟棄。如果你的網站只能在開啟 Cookie 時使用,你也不能給關閉 Cookie 的用戶提供服務。
要注意如果你使用 JavaScript 去設置和檢測 Cookie,你能封禁那些沒有運行 JavaScript 的爬蟲,因為它們沒辦法獲取和發送 Cookie。
你可以在頁面加載完成之后,使用 JavaScript + AJAX 來加載你的內容。這個對于那些沒有運行 JavaScript 的 HTML 分析器來說將無法取得數據。這個對于沒有經驗或者新手程序員寫的爬蟲非常有效。
注意:
如果你用 Ajax 和 JavaScript 加載你的數據,在傳輸的時候要混淆一下。比如,你可以在服務器端 encode 你的數據(比如簡單的使用 base64 或 負載一些的多次混淆、位偏移或者是進行加密),然后在客戶端在 Ajax 獲取數據之后再進行 decode。這意味著如果有人要抓包獲取你的請求就不能直接看到你頁面如何加載數據,而且那些人也不能直接通過 API 獲得你的數據,如果想要獲取數據,就必須要去解密你的算法。
下面是一些這個方式的缺點:
比如,CloudFlare 提供反蜘蛛和反爬蟲的防御,你只需要直接啟用它就可以了,另外 AWS 也提供類似服務。而且 Apache 的 mod_evasive 模塊也能讓你很輕松地實現頻率限制。
你應該直接告訴人們不要抓取你的網站,比如,在你的服務條款中表明。有些人確實會尊重它,而且不在你允許的情況下不會再去抓取數據。
律師們知道如何處理侵犯版權的事情,而且他們可以發送律師函。DMCA(譯者注:Digital Millennium Copyright Act,數字千年版權法案,是一個美國版權法律) 也能提供援助。
這看起來適得其反,但是你可以要求標明來源并包含返回你站點的鏈接。甚至也可以售賣你的 API 而賺取費用。
還有就是,Stack Exchange 提供了 API,但是必須要標明來源。
以我自己寫和幫忙別人寫爬蟲的經驗,我認為最有效的方法是:
擴展閱讀:
作者:h1z3y3
來源:微信公眾號: 360搜索技術團隊
出處:https://mp.weixin.qq.com/s?__biz=MzA5ODIxODE2Ng==&mid=2651137205&idx=1&sn=664a46d66f132c96780750d4e9b206eb
*請認真填寫需求信息,我們會在24小時內與您取得聯系。