利用自訂web-font實現資料防採程式碼-php教程-PHP中文網

首頁

後端開發

php教程

利用自訂web-font實現資料防採程式碼

PHPz

Apr 03, 2017 pm 04:26 PM

本文介紹CSS3新特性web-font的使用，並利用自訂web-font實作資料防擷取

web-font介紹

web-font是CSS3中的一種標記@font-face，在@font-face宣告裡，你可以宣告一種字體，指定這種字體字體庫檔案從網頁某個位址下載。

具體寫法如下：

@font-face {    font-family: &#39;字体名称&#39;;    src:  url(&#39;http://www.example.com/字体名称.eot&#39;); /* IE9 Compat Modes */
    src:  url(&#39;http://www.example.com/字体名称.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
    url(&#39;http://www.example.com/字体名称.ttf&#39;) format(&#39;truetype&#39;), /* Safari, Android, iOS */
    url(&#39;http://www.example.com/字体名称.woff&#39;) format(&#39;woff&#39;),  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    url(&#39;http://www.example.com/字体名称.svg?#字体名称&#39;) format(&#39;svg&#39;); /* 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

利用自訂web-font實現資料防採程式碼

#進入everythingfonts.com/ttf-to-svg
上傳ttf文件，將字體文件轉為svg格式，另存為my_webfont.svg

選擇需要使用的字元及設定字體映射關係

利用自訂web-font實現資料防採程式碼

#進入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

利用自訂web-font實現資料防採程式碼

#並且把名字也依照映射關係修改，設定映射關係後，點選右下角download下載字型。

把下載的字型檔案全部命名為my_webfont.*

#2.在網頁中使用web-font顯示資料

首先需要設定@font-face

@font-face {    font-family: &#39;my_webfont&#39;;    src:  url(&#39;fonts/my_webfont.eot?fdipzone&#39;);    src:  url(&#39;fonts/my_webfont.eot?fdipzone#iefix&#39;) format(&#39;embedded-opentype&#39;),    url(&#39;fonts/my_webfont.ttf?fdipzone&#39;) format(&#39;truetype&#39;),    url(&#39;fonts/my_webfont.woff?fdipzone&#39;) format(&#39;woff&#39;),    url(&#39;fonts/my_webfont.svg?fdipzone#my_webfont&#39;) format(&#39;svg&#39;);}

然後需要定義一個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">&#xefab</p>

這樣就可以顯示字元1了。

3.完整的實例代碼

<?php// 字体映射关系function get_font_num($num){
    $result = &#39;&#39;;    $font_map = array(        0 => &#39;e1f2&#39;,        1 => &#39;efab&#39;,        2 => &#39;eba3&#39;,        3 => &#39;ecfa&#39;,        4 => &#39;edfd&#39;,        5 => &#39;effa&#39;,        6 => &#39;ef3a&#39;,        7 => &#39;e6f5&#39;,        8 => &#39;ecb2&#39;,        9 => &#39;e8ae&#39;
    );    for($i=0,$len=strlen($num); $i<$len; $i++){        $n = substr($num, $i, 1);        if(is_numeric($n)){            $result .= &#39;&#x&#39;.$font_map[$n].&#39;;&#39;;
        }else{            $result .= $n;
        }
    }    return $result;
}$data = array(    array(&#39;金刚：骷髅岛&#39;, 4921.98, 5),    array(&#39;美女与野兽&#39;, 971.36, 12),    array(&#39;欢乐喜剧人&#39;, 590.27, 5),    array(&#39;一条狗的使命&#39;, 389.76, 26),    array(&#39;领袖1935&#39;, 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: &#39;my_webfont&#39;;        src:  url(&#39;fonts/my_webfont.eot?fdipzone&#39;);        src:  url(&#39;fonts/my_webfont.eot?fdipzone#iefix&#39;) format(&#39;embedded-opentype&#39;),        url(&#39;fonts/my_webfont.ttf?fdipzone&#39;) format(&#39;truetype&#39;),        url(&#39;fonts/my_webfont.woff?fdipzone&#39;) format(&#39;woff&#39;),        url(&#39;fonts/my_webfont.svg?fdipzone#my_webfont&#39;) format(&#39;svg&#39;);        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 &#39;<tr>&#39;.PHP_EOL;        echo &#39;<td>&#39;.($i+1).&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="left">&#39;.$data[$i][0].&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="my_webfont">&#39;.get_font_num($data[$i][1]).&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="my_webfont">&#39;.get_font_num($data[$i][2]).&#39;天</td>&#39;.PHP_EOL;        echo &#39;</tr>&#39;.PHP_EOL;
    }?>
  </table>
 </body></html>

在瀏覽器存取可以看到正常的資料

利用自訂web-font實現資料防採程式碼

但html原始碼實際上是

<tr><td>1</td><td class="left">金刚：骷髅岛</td><td class="my_webfont">&#xedfd;&#xe8ae;&#xeba3;&#xefab;.&#xe8ae;&#xecb2;</td><td class="my_webfont">&#xeffa;天</td></tr>

利用自訂web-font實現資料防採程式碼

#採集者只能取得到類似 edfd;的數據，並不能知道 edfd;映射的字元是什麼，實現了資料防採集。

當然採集者可以透過分析，知道每一個映射代表的意思，從而進行採集後轉換處理。
我們可以建立多個不同的字型檔案和映射表。每次訪問都隨機使用一種，並定期更新一批字體檔案和映射表，增加採集的難度。
這樣採集者需要把所有的字體檔案和映射表都分析並做轉換處理，才可能採集到數據，這樣採集的成本將會大大增加。

以上是利用自訂web-font實現資料防採程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用數據庫存儲會話的優點是什麼？Apr 24, 2025 am 12:16 AM

使用數據庫存儲會話的主要優勢包括持久性、可擴展性和安全性。 1.持久性：即使服務器重啟，會話數據也能保持不變。 2.可擴展性：適用於分佈式系統，確保會話數據在多服務器間同步。 3.安全性：數據庫提供加密存儲，保護敏感信息。

您如何在PHP中實現自定義會話處理？Apr 24, 2025 am 12:16 AM

在PHP中實現自定義會話處理可以通過實現SessionHandlerInterface接口來完成。具體步驟包括：1)創建實現SessionHandlerInterface的類，如CustomSessionHandler；2)重寫接口中的方法（如open,close,read,write,destroy,gc）來定義會話數據的生命週期和存儲方式；3)在PHP腳本中註冊自定義會話處理器並啟動會話。這樣可以將數據存儲在MySQL、Redis等介質中，提升性能、安全性和可擴展性。

什麼是會話ID？Apr 24, 2025 am 12:13 AM

SessionID是網絡應用程序中用來跟踪用戶會話狀態的機制。 1.它是一個隨機生成的字符串，用於在用戶與服務器之間的多次交互中保持用戶的身份信息。 2.服務器生成並通過cookie或URL參數發送給客戶端，幫助在用戶的多次請求中識別和關聯這些請求。 3.生成通常使用隨機算法保證唯一性和不可預測性。 4.在實際開發中，可以使用內存數據庫如Redis來存儲session數據，提升性能和安全性。

您如何在無狀態環境（例如API）中處理會議？Apr 24, 2025 am 12:12 AM

在無狀態環境如API中管理會話可以通過使用JWT或cookies來實現。 1.JWT適合無狀態和可擴展性，但大數據時體積大。 2.Cookies更傳統且易實現，但需謹慎配置以確保安全性。

您如何防止與會議有關的跨站點腳本（XSS）攻擊？Apr 23, 2025 am 12:16 AM

要保護應用免受與會話相關的XSS攻擊，需採取以下措施：1.設置HttpOnly和Secure標誌保護會話cookie。 2.對所有用戶輸入進行輸出編碼。 3.實施內容安全策略(CSP)限制腳本來源。通過這些策略，可以有效防護會話相關的XSS攻擊，確保用戶數據安全。

您如何優化PHP會話性能？Apr 23, 2025 am 12:13 AM

优化PHP会话性能的方法包括：1.延迟会话启动，2.使用数据库存储会话，3.压缩会话数据，4.管理会话生命周期，5.实现会话共享。这些策略能显著提升应用在高并发环境下的效率。

什麼是session.gc_maxlifetime配置設置？Apr 23, 2025 am 12:10 AM

theSession.gc_maxlifetimesettinginphpdeterminesthelifespanofsessiondata，setInSeconds.1）它'sconfiguredinphp.iniorviaini_set（）.2）abalanceisesneededeededeedeedeededto toavoidperformance andunununununexpectedLogOgouts.3）

您如何在PHP中配置會話名？Apr 23, 2025 am 12:08 AM

在PHP中，可以使用session_name()函數配置會話名稱。具體步驟如下：1.使用session_name()函數設置會話名稱，例如session_name("my_session")。 2.在設置會話名稱後，調用session_start()啟動會話。配置會話名稱可以避免多應用間的會話數據衝突，並增強安全性，但需注意會話名稱的唯一性、安全性、長度和設置時機。

See all articles