利用自訂web-font實現資料防採程式碼
本文介紹CSS3新特性web-font的使用，並利用自訂web-font實作資料防擷取
web-font介紹
web-font是CSS3中的一種標記@font-face，在@font-face宣告裡，你可以宣告一種字體，指定這種字體字體庫檔案從網頁某個位址下載。
具體寫法如下：
@font-face { font-family: '字体名称'; src: url('http://www.example.com/字体名称.eot'); /* IE9 Compat Modes */
src: url('http://www.example.com/字体名称.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://www.example.com/字体名称.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.example.com/字体名称.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('http://www.example.com/字体名称.svg?#字体名称') format('svg'); /* Legacy iOS */}當網頁資料需要使用特別的字體來修飾時，我們就可以使用web-font。因為使用web-font會自動從網路載入字體，並不需要使用者本機有安裝這個字體。
使用自訂web-font實作資料防擷取
防擷取原理：
#使用web-font可以從網頁載入字體，因此我們可以自己建立一套字體，設定自訂的字元對映關係表。
例如設定0xaaa是映射字元1，0xbbb是映射字元2，以此類推。
當需要顯示字元1時，網頁的源碼只會是0xaaa，被採集的也只會是0xaaa，並不是1，使採集者採集不到正確的資料。而對於正常存取的使用者則沒有影響。
對於中文的防採集不適合使用web-font這種方法，因為中文的字體庫太大。而對於數字，英文則適合使用此方法進行防採集。
實例：使用自訂web-font實現數位資料防擷取（例如股票，電影票房等資料）
#1.建立指定字元的自訂字體
首先選擇一款字體，為方便演示，選擇系統自帶的Arial字體。
ttf轉svg
#進入everythingfonts.com/ttf-to-svg
上傳ttf文件，將字體文件轉為svg格式，另存為my_webfont.svg
選擇需要使用的字元及設定字體映射關係
#進入icomoon.io/app/#/select
選擇左上角Import Icons 按鈕，匯入my_webfont.svg
匯入後選擇我們要使用的字符，本例只需要選擇0-9，然後點擊右下角Generate Font 按鈕
設定字元映射
Arial字體字元映射關係(字元與16進位)
0 => 301 => 312 => 323 => 334 => 345 => 356 => 367 => 378 => 389 => 39
我們在這裡修改映射關係，可以盡量複雜一點且沒有規律，使不容易猜出。
例如把映射關係設定為
0 => e1f21 => efab2 => eba33 => ecfa4 => edfd5 => effa6 => ef3a7 => e6f58 => ecb29 => e8ae
#並且把名字也依照映射關係修改，設定映射關係後，點選右下角download下載字型。
把下載的字型檔案全部命名為my_webfont.*
#2.在網頁中使用web-font顯示資料
首先需要設定@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');}然後需要定義一個css的class，font-family使用這個web-font
.my_webfont{ font-family: my_webfont !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}在需要顯示這種數據的地方，填入數據，且容器的class定義為my_webfont
<p class="my_webfont"></p>
這樣就可以顯示字元1了。
3.完整的實例代碼
<?php// 字体映射关系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('欢乐喜剧人', 590.27, 5), array('一条狗的使命', 389.76, 26), array('领袖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实现数据防采集</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>实时票房(万)</td>
<td>上映天数</td>
</tr><?php
for($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>在瀏覽器存取可以看到正常的資料
但html原始碼實際上是
<tr><td>1</td><td class="left">金刚：骷髅岛</td><td class="my_webfont">.</td><td class="my_webfont">天</td></tr>
#採集者只能取得到類似 edfd;的數據，並不能知道 edfd;映射的字元是什麼，實現了資料防採集。
當然採集者可以透過分析，知道每一個映射代表的意思，從而進行採集後轉換處理。
我們可以建立多個不同的字型檔案和映射表。每次訪問都隨機使用一種，並定期更新一批字體檔案和映射表，增加採集的難度。
這樣採集者需要把所有的字體檔案和映射表都分析並做轉換處理，才可能採集到數據，這樣採集的成本將會大大增加。
以上是利用自訂web-font實現資料防採程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
在PHP API中說明JSON Web令牌（JWT）及其用例。
Apr 05, 2025 am 12:04 AM
JWT是一種基於JSON的開放標準，用於在各方之間安全地傳輸信息，主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時，可以生成和驗證JWT，並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大，調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、
會話如何劫持工作，如何在PHP中減輕它？
Apr 06, 2025 am 12:02 AM
會話劫持可以通過以下步驟實現：1.獲取會話ID，2.使用會話ID，3.保持會話活躍。在PHP中防範會話劫持的方法包括：1.使用session_regenerate_id()函數重新生成會話ID，2.通過數據庫存儲會話數據，3.確保所有會話數據通過HTTPS傳輸。
描述紮實的原則及其如何應用於PHP的開發。
Apr 03, 2025 am 12:04 AM
SOLID原則在PHP開發中的應用包括：1.單一職責原則（SRP）：每個類只負責一個功能。 2.開閉原則（OCP）：通過擴展而非修改實現變化。 3.里氏替換原則（LSP）：子類可替換基類而不影響程序正確性。 4.接口隔離原則（ISP）：使用細粒度接口避免依賴不使用的方法。 5.依賴倒置原則（DIP）：高低層次模塊都依賴於抽象，通過依賴注入實現。
在PHPStorm中如何進行CLI模式的調試？
Apr 01, 2025 pm 02:57 PM
在PHPStorm中如何進行CLI模式的調試？在使用PHPStorm進行開發時，有時我們需要在命令行界面（CLI）模式下調試PHP�...
如何在系統重啟後自動設置unixsocket的權限？
Mar 31, 2025 pm 11:54 PM
如何在系統重啟後自動設置unixsocket的權限每次系統重啟後，我們都需要執行以下命令來修改unixsocket的權限：sudo...
解釋PHP中的晚期靜態綁定（靜態：:)。
Apr 03, 2025 am 12:04 AM
靜態綁定（static::）在PHP中實現晚期靜態綁定（LSB），允許在靜態上下文中引用調用類而非定義類。 1）解析過程在運行時進行，2）在繼承關係中向上查找調用類，3）可能帶來性能開銷。
如何用PHP的cURL庫發送包含JSON數據的POST請求？
Apr 01, 2025 pm 03:12 PM
使用PHP的cURL庫發送JSON數據在PHP開發中，經常需要與外部API進行交互，其中一種常見的方式是使用cURL庫發送POST�...
