"Fingerprint recognition" technology based on HTML canvas

zhanhailiang 日期：2015-01-31

Description

Fingerprint identification refers to identifying a unique identifier (the UUID) for each device. Apps such as mobile native can get the appropriate UUID by invoking the associated device API. However, in-browser WebApp is limited to the operating environment can not directly prevent the device API, at this time need to use other methods to set the UUID.

The principle of generating UUID based on persistent cookie

When a user visits a website, the Web site can type a cookie containing the UUID in the user's current browser cookie, and through this information, the user's behavior (which pages are viewed?). what keywords were searched? Interested in what? What buttons are clicked? What features are used? What products have you seen? Put in a shopping cart, and so on) to link up.

Realize

function Rand(Len) {varHex=  "0123456789abcdef" Str= "", index= 0; for(len=Len||  +; Len>Index Index++) {str+=Hex.charAt(Math.Ceil(1e8 * Math.Random())%Hex.length); }returnSTR;}varUuid=(New Date).GetTime()+ "_" +Rand ();//write persistent cookie, expire after two years//Setcookie (' uuid ', uuid, 732 * *);

Disadvantages

The UUID can then be used to implement the user tracking technology and facilitate the subsequent data analysis work.

But with the Internet's emphasis on personal privacy, cookies are becoming more and more unpopular. Many security tools, even browsers, begin to allow or direct users to turn off cookies, such as a "privacy mode" feature in many major browsers. This makes it difficult for websites to track user behavior through cookies. However, there are still ways to keep the site track of the behavior of each visitor, such as by means of a flash cookie, which can also be used for unique identification and tracking purposes.

Realization of "fingerprint recognition" technology based on HTML canvas

Draws a picture of a specific content based on the canvas, using the Canvas.todataurl () method to return the Base64 encoded string of the picture's contents. For PNG file format, block (chunk) division, the last piece is a 32-bit CRC check, extract this CRC check code can be used for the user's unique identity.

The test results show that the CRC checksum generated by the same browser when accessing the domain is always the same. Can be simply understood as the same HTML canvas element drawing operations, in different operating systems on different browsers, the resulting picture content is actually not exactly the same. This can happen for several reasons:

1. In the picture format, different Web browsers use different graphics processing engines, different image export options, different default compression levels, and so on.
2. At the pixel level, the operating system uses different settings and algorithms for antialiasing and sub-pixel rendering operations.
3. Even with the same drawing operation, the resulting image data is still different on the hash level.

Realize

function Bin2Hex(s) {//Discuss at:http://phpjs.org/functions/bin2hex/  //Original By:kevin van Zonneveld (http://kevin.vanzonneveld.net)  //bugfixed By:onno Marsman  //bugfixed By:linuxworld  //Improved By:ntoniazzi (http://phpjs.org/functions/bin2hex:361#comment_177616)  //Example 1:bin2hex (' Kev ');  //returns 1: ' 4b6576 '  //Example 2:bin2hex (String.fromCharCode (0x00));  //returns 2: ' XX '  varI, L, O=  "' N S+=  "' ; for(I= 0, l=S.length; I<L I++) {n=S.charCodeAt(i).toString( -); O+=N.length < 2 ?  '0'  +N:N }returno;}function Getuuid(Domain) {varCanvas= Document.createelement( 'canvas' );varCTx=Canvas.getcontext ( "2d" );varTxt=Domain Ctx.textbaseline=  "top" ; Ctx.font=  "14px ' Arial '" ; Ctx.textbaseline=  "Tencent" ; Ctx.fillstyle=  "#f60" ; Ctx.fillrect ( the,1, +, -); Ctx.fillstyle=  "#069" ; Ctx.filltext (TXT,2, the); Ctx.fillstyle=  "Rgba (102, 204, 0, 0.7)" ; Ctx.filltext (TXT,4, -);varB64=Canvas.todataurl ().Replace( "data:image/png;base64," ,"");varBin= Atob(B64);varCrc=Bin2Hex (bin.Slice(- -,- A));returnCRC;}Console. Log(Getuuid ( "http://m.vip.com/" ));

Advantages

The UUID generated by the HTML canvas can be used effectively for the user tracking technology, and there is no effective countermeasure.

Read more

1. CLIENT-SIDE:HTML5 Canvas Fingerprinting
2. Web site tracking technology in place of cookies: A preliminary study on "Canvas fingerprint recognition"
3. JavaScript Bin2Hex function
4. Scenario comparison for existing iOS device unique identifiers
5. Is there a unique Android device ID?

"Fingerprint recognition" technology based on HTML canvas