Implement data anti-capture code with custom Web-font

This paper introduces the use of CSS3 new feature Web-font, and uses the custom Web-font to realize data anti-collection

Web-font Introduction

Web-font is a marker in CSS3 @font-face, in the @font-face declaration, you can declare a font that specifies that the font library file is downloaded from a network address.

The specific wording is as follows:

@font-face {    font-family: ' Font name ';    src:  url (' http://www.example.com/font name. EoT ');/* IE9 Compat Modes */    src:  url (' http://www.example.com/ Font name. EoT? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */    URL (' http://www.example.com/font name. TTF ') format (' TrueType '),/* Safari, Android, IOS *    /url (' http://www.example.com/font name. Woff ') format (' Woff '),/  * Chrome 6+, Firefox 3.6+, IE + +, Safari 5.1+ * *    url (' http://www.example.com/font name. svg #字体名称 ') format (' SVG ');/* Legacy IOS */}

When Web page data needs to be decorated with special fonts, we can use Web-font. Because using Web-font will automatically load fonts from the network, there is no need for the user to have this font installed natively.

Data anti-capture using custom Web-font

Anti-collection principle:
Using Web-font, you can load fonts from the network, so we can create our own set of fonts and set a custom character mapping relationship table.
For example, setting 0xaaa is the mapping character 1,0xbbb is the mapping character 2, and so on.
When the need to display characters 1 o'clock, the source of the Web page will only be 0XAAA, the acquisition will only be 0xaaa, not 1, so that the collector can not collect the correct data. For users with normal access, there is no impact.

Anti-collection for Chinese is not a good way to use Web-font because the Chinese font library is too large. In the case of numbers, English is suitable for the use of this method to achieve anti-acquisition.

Example: Using a custom Web-font to achieve digital data protection (e.g. stock, movie box office, etc.)

1. Create a custom font for the specified character

First select a font, for the convenience of demonstration, select the system comes with Arial font.

TTF to SVG

Enter Everythingfonts.com/ttf-to-svg
Upload TTF file, convert font file to SVG format, save as My_webfont.svg

Select the characters you want to use and set the font mapping relationship

Enter Icomoon.io/app/#/select
Select the upper left corner of the import Icons button, importing My_webfont.svg
After importing select the characters we want to use, this example just needs to select 0-9and then click the Generate Font button in the lower right corner

Set Character Mappings
Arial Font character mapping relationship (characters with 16 binary)

0 = 301 = 312 = 323 = 334 = 345 = 356 = 367 = 378 = 389 = 39

We modify the mapping relationship here, can be as complex and irregular as possible, so it is not easy to guess.

For example, set the mapping relationship to

0 = E1F21 = efab2 = Eba33 = ECFA4 = Edfd5 = Effa6 = Ef3a7 = e6f58 = Ecb29 = E8ae

And the name also according to the mapping relationship modified, after setting the mapping relationship, click on the lower right corner download download fonts.

Name all downloaded font files as my_webfont.*

2. Using Web-font to display data in a Web page

First you need to set @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 ');}

Then you need to define a CSS for the class,font-family to use this Web-font

. my_webfont{    Font-family:my_webfont!important;    -webkit-font-smoothing:antialiased;    -moz-osx-font-smoothing:grayscale;}

Fill in the data where this data is to be displayed, and the container's class is defined as My_webfont

<p class= "My_webfont" >& #xefab </p>

This will allow the character 1 to be displayed.

3. Full instance Code

<?php//Font mapping Relationship function Get_font_num ($num) {$result = '; $font _map = Array (0 = ' e1f2 ', 1 = ' Efab ', 2 = ' Eba3 ', 3 = ' ECFA ', 4 =& Gt    ' 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 (' King Kong: Skull Island ', 4921.98, 5), Array (' Belle and Beast ', 971.36, '), Array (' Happy comedy Man ', 590.27, 5), Array (' A dog's Mission ', 389.76, +), Array (' leader 1935 ', 271.27, 1),);? ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Normal data can be seen in browser access


But the HTML source is actually

<TR><TD>1</TD><TD class= "left" > King Kong: Skull Island </td><td class= "My_webfont" >& #xedfd ;& #xe8ae;& #xeba3;& #xefab;. & #xe8ae;& #xecb2, </td><td class= "My_webfont" >& #xeffa; days </td></tr>

Collectors can only obtain similar & #x EDFD; The data, and do not know & #x EDFD; What is the mapped character, which realizes the data anti-collection.

Of course, the collector can be analyzed to know the meaning of each map representation, so that after the acquisition of conversion processing.
We can create several different font files and mapping tables. Each access is randomly used, and regularly update a batch of font files and mapping tables, increasing the difficulty of acquisition.
In this way, the collector needs to analyze all the font files and mapping tables and do the conversion processing, before the data can be collected, so the cost of acquisition will be greatly increased.