Implement "fingerprint recognition" technology based on HTML Canvas

Implement "fingerprint recognition" technology based on HTML Canvas

Description

Fingerprint Recognition refers to the unique identifier (UUID) of each device ). For example, mobile native apps can call related device APIs to obtain the corresponding UUID. However, the WebAPP in the browser is restricted by the running environment and cannot directly guard against the API of the local device. In this case, you need to set the UUID using other methods.

UUID Generation Based on persistent cookies

When a user accesses a website, the website can input a Cookie containing UUID in the Cookie of the user's current browser, and use this information to view all user behaviors (which pages are browsed? What keywords are searched? What are you interested in? What buttons are clicked? What functions are used? What products have you read? Which are put into the shopping cart and so on.

Implementation

Function rand (len) {var hex = 0123456789 abcdef, str =, index = 0; for (len = len | 32; len> index; index ++) {str + = hex. charAt (Math. ceil (1e8 * Math. random () % hex. length);} return str;} var uuid = (new Date ). getTime () + _ + rand (); // write persistence cookie. It expires two years later. // setcookie ('uuid ', uuid, 732*24*60*60 );

Disadvantages

Then you can use UUID to Implement User tracking technology to facilitate subsequent data analysis.

However, as the Internet attaches importance to personal privacy, cookies become increasingly invisible. Many security tools and even browsers have begun to allow or guide users to disable the Cookie function. For example, many mainstream browsers have a "privacy mode" function. In this way, it is difficult for websites to track user behavior through cookies. However, there are still some ways for websites to track the behavior of each visitor. For example, flash cookies can also achieve unique identification and tracking.

Technical Principle of "fingerprint recognition" based on HTML Canvas

Use Canvas. toDataURL () to return the base64 encoded string of the image content. For PNG files, block (chunk) is divided. The last part is a 32-bit CRC verification. The extracted CRC verification code can be used for the unique identification of users.

Test results show that the CRC verification code generated when the same browser accesses the domain remains unchanged. It can be simply understood as the same HTML Canvas Element painting operation. The image content generated on different browsers of different operating systems is actually not exactly the same. There may be several reasons for this:

1. In terms of image formats, different web browsers use different Graphics Processing engines, different image export options, and different default compression levels.
2. At the pixel level, the operating system uses different settings and Algorithms for anti-aliasing and sub-pixel rendering operations.
3. Even for the same Drawing operation, the resulting image data remains different in the hash layer. Implementation

   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: '00'  var i, l, o = '',    n;  s += '';  for (i = 0, l = s.length; i < l; i++) {    n = s.charCodeAt(i)      .toString(16);    o += n.length < 2 ? '0' + n : n;  }  return o;}function getUUID(domain) {    var canvas = document.createElement('canvas');    var ctx = canvas.getContext(2d);    var txt = domain;    ctx.textBaseline = top;    ctx.font = 14px 'Arial';    ctx.textBaseline = tencent;    ctx.fillStyle = #f60;    ctx.fillRect(125,1,62,20);    ctx.fillStyle = #069;    ctx.fillText(txt, 2, 15);    ctx.fillStyle = rgba(102, 204, 0, 0.7);    ctx.fillText(txt, 4, 17);    var b64 = canvas.toDataURL().replace(data:image/png;base64,,);    var bin = atob(b64);    var crc = bin2hex(bin.slice(-16,-12));    return crc;}console.log(getUUID(http://m.vip.com/));

   Advantages

   UUID generated based on HTML Canvas can be effectively used for User tracking technology. Currently, there is no effective countermeasure.

   Read more
   1. Client-Side: HTML5 Canvas Fingerprinting
   2. Website tracking technology replacing cookies: A Preliminary Study on "canvas fingerprint recognition"
   3. JavaScript bin2hex function
   4. Comparison of the unique identifier of an existing IOS device
   5. Is there a unique Android device ID?