利用自定义web-font实现数据防采集
?
From：https://blog.csdn.net/fdipzone/article/details/68166388
完整源碼：https://download.csdn.net/download/fdipzone/9798142
?
?
web-font介紹
web-font 是?CSS3?中的一種標(biāo)記 @font-face，
在 @font-face 聲明里，你可以聲明一種字體，指定這種字體字體庫(kù)文件從網(wǎng)絡(luò)某個(gè)地址下載。
具體寫(xiě)法如下：
@font-face {font-family: '字體名稱(chēng)';src: url('http://www.example.com/字體名稱(chēng).eot'); /* IE9 Compat Modes */src: url('http://www.example.com/字體名稱(chēng).eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('http://www.example.com/字體名稱(chēng).ttf') format('truetype'), /* Safari, Android, iOS */url('http://www.example.com/字體名稱(chēng).woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */url('http://www.example.com/字體名稱(chēng).svg?#字體名稱(chēng)') format('svg'); /* Legacy iOS */ }當(dāng)網(wǎng)頁(yè)數(shù)據(jù)需要使用特別的字體來(lái)修飾時(shí)，我們就可以使用web-font。因?yàn)槭褂脀eb-font會(huì)自動(dòng)從網(wǎng)絡(luò)中加載字體，并不需要用戶本機(jī)有安裝這個(gè)字體。
?
使用自定義web-font實(shí)現(xiàn)數(shù)據(jù)防采集
防采集原理：
使用web-font可以從網(wǎng)絡(luò)加載字體，因此我們可以自己創(chuàng)建一套字體，設(shè)置自定義的字符映射關(guān)系表。
例如設(shè)置0xaaa是映射字符1，0xbbb是映射字符2，以此類(lèi)推。
當(dāng)需要顯示字符1時(shí)，網(wǎng)頁(yè)的源碼只會(huì)是0xaaa，被采集的也只會(huì)是0xaaa，并不是1，使采集者采集不到正確的數(shù)據(jù)。而對(duì)于正常訪問(wèn)的用戶則沒(méi)有影響。
對(duì)于中文的防采集不適合使用web-font這種方法，因?yàn)橹形牡淖煮w庫(kù)太大。而對(duì)于數(shù)字，英文則適合使用此方法實(shí)現(xiàn)防采集。
?
實(shí)例：使用自定義web-font實(shí)現(xiàn)數(shù)字?jǐn)?shù)據(jù)防采集（例如股票，電影票房等數(shù)據(jù)）
1.創(chuàng)建指定字符的自定義字體
首先選擇一款字體，為方便演示，選擇系統(tǒng)自帶的Arial字體。
ttf轉(zhuǎn)svg
進(jìn)入 https://everythingfonts.com/ttf-to-svg
上傳ttf文件，將字體文件轉(zhuǎn)為svg格式，另存為my_webfont.svg
?
選擇需要使用的字符及設(shè)置字體映射關(guān)系
進(jìn)入 https://icomoon.io/app/#/select
選擇左上角 Import Icons 按鈕，導(dǎo)入my_webfont.svg
導(dǎo)入后選擇我們要使用的字符，本例只需要選擇0-9，然后點(diǎn)擊右下角 Generate Font 按鈕
設(shè)置字符映射
Arial字體字符映射關(guān)系(字符與16進(jìn)制)
我們這里修改映射關(guān)系，可以盡量復(fù)雜一點(diǎn)且沒(méi)有規(guī)律，使不容易猜出。
例如把映射關(guān)系設(shè)置為
0 => e1f2 1 => efab 2 => eba3 3 => ecfa 4 => edfd 5 => effa 6 => ef3a 7 => e6f5 8 => ecb2 9 => e8ae?
并把名字也按映射關(guān)系修改，設(shè)置映射關(guān)系后，點(diǎn)擊右下角download下載字體。
把下載的字體文件全部命名為my_webfont.*
?
2.在網(wǎng)頁(yè)中使用web-font顯示數(shù)據(jù)
首先需要設(shè)置 @font-face
@font-face {font-family: 'my_webfont';src: url('fonts/my_webfont.eot?fdipzone');src: url('fonts/my_webfont.eot?fdipzone#iefix') format('embedded-opentype'),url('fonts/my_webfont.ttf?fdipzone') format('truetype'),url('fonts/my_webfont.woff?fdipzone') format('woff'),url('fonts/my_webfont.svg?fdipzone#my_webfont') format('svg'); }然后需要定義一個(gè)css的class，font-family使用這個(gè)web-font
.my_webfont{font-family: my_webfont !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }在需要顯示這種數(shù)據(jù)的地方，填入數(shù)據(jù)，且容器的class定義為my_webfont
<p class="my_webfont"></p>這樣就可以顯示字符1了。
?
3.完整的實(shí)例代碼
<?php // 字體映射關(guān)系 function get_font_num($num){$result = '';$font_map = array(0 => 'e1f2',1 => 'efab',2 => 'eba3',3 => 'ecfa',4 => 'edfd',5 => 'effa',6 => 'ef3a',7 => 'e6f5',8 => 'ecb2',9 => 'e8ae');for($i=0,$len=strlen($num); $i<$len; $i++){$n = substr($num, $i, 1);if(is_numeric($n)){$result .= '&#x'.$font_map[$n].';';}else{$result .= $n;}}return $result; }$data = array(array('金剛：骷髏島', 4921.98, 5),array('美女與野獸', 971.36, 12),array('歡樂(lè)喜劇人', 590.27, 5),array('一條狗的使命', 389.76, 26),array('領(lǐng)袖1935', 271.27, 1), );?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>利用自定義web-font實(shí)現(xiàn)數(shù)據(jù)防采集</title><style type="text/css">@font-face {font-family: 'my_webfont';src: url('fonts/my_webfont.eot?fdipzone');src: url('fonts/my_webfont.eot?fdipzone#iefix') format('embedded-opentype'),url('fonts/my_webfont.ttf?fdipzone') format('truetype'),url('fonts/my_webfont.woff?fdipzone') format('woff'),url('fonts/my_webfont.svg?fdipzone#my_webfont') format('svg');font-weight: normal;font-style: normal;}.my_webfont{font-family: my_webfont !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}td{padding: 0px 5px 0px 5px;text-align: center;}.left{text-align: left;}</style></head><body><table><tr><td>排名</td><td>片名</td><td>實(shí)時(shí)票房(萬(wàn))</td><td>上映天數(shù)</td></tr> <?phpfor($i=0,$len=count($data); $i<$len; $i++){echo '<tr>'.PHP_EOL;echo '<td>'.($i+1).'</td>'.PHP_EOL;echo '<td class="left">'.$data[$i][0].'</td>'.PHP_EOL;echo '<td class="my_webfont">'.get_font_num($data[$i][1]).'</td>'.PHP_EOL;echo '<td class="my_webfont">'.get_font_num($data[$i][2]).'天</td>'.PHP_EOL;echo '</tr>'.PHP_EOL;} ?></table></body> </html>在瀏覽器訪問(wèn)可以看到正常的數(shù)據(jù)
但html源碼實(shí)際上是
<tr> <td>1</td> <td class="left">金剛：骷髏島</td> <td class="my_webfont">.</td> <td class="my_webfont">天</td> </tr>?
采集者只能獲取到類(lèi)似&#x edfd;的數(shù)據(jù)，并不能知道&#x edfd;映射的字符是什么，實(shí)現(xiàn)了數(shù)據(jù)防采集。
當(dāng)然采集者可以通過(guò)分析，知道每一個(gè)映射代表的意思，從而進(jìn)行采集后轉(zhuǎn)換處理。
我們可以創(chuàng)建多個(gè)不同的字體文件和映射表。每次訪問(wèn)都隨機(jī)使用一種，并定期更新一批字體文件和映射表，加大采集的難度。
這樣采集者需要把所有的字體文件和映射表都分析并做轉(zhuǎn)換處理，才可能采集到數(shù)據(jù)，這樣采集的成本將會(huì)大大增加。
?
?
?
總結(jié)
以上是生活随笔為你收集整理的利用自定义web-font实现数据防采集的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： tcp四次挥手，为什么是四次？
- 下一篇： CompletableFuture详解~