Implementing 'fingerprint identification' technology based on HTML Canvas_html/css_WEB-ITnose

作者：zhanhailiang 日期：2015-01-31

Description

The so-called fingerprint identification refers to identifying a unique identifier (hereinafter referred to as UUID) for each device. Apps such as mobile native apps can obtain the corresponding UUID by calling the relevant device API. However, the WebAPP in the browser cannot directly access the device API due to the operating environment. In this case, other methods need to be used to set the UUID.

Generate UUID based on persistent cookies

Principle

When a user visits a website, the website can plant a cookie containing UUID in the user's current browser cookie, and Through this information, all user behaviors (which pages were browsed? What keywords were searched? What are you interested in? Which buttons were clicked? What functions were used? What products were viewed? What were put into the shopping cart, etc.) stand up.

Implementation

function rand(len) {    var hex = "0123456789abcdef",        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();// 写持久化cookie，两年后过期// setcookie('uuid', uuid, 732 * 24 * 60 * 60);

Disadvantages

UUID can then be used to implement user tracking technology to facilitate subsequent data analysis.

However, as the Internet attaches more importance to personal privacy, Cookies are becoming less and less popular. Many security tools and even browsers have begun to allow or guide users to turn off cookie functions. For example, many mainstream browsers have a "privacy mode" function. In this way, it is difficult for websites to track user behavior through cookies. But there are still some ways for websites to track the behavior of each visitor. For example, flash cookies can also be used to achieve unique identification and tracking purposes.

Implementing "fingerprint recognition" technology based on HTML Canvas

Principle

Draw a picture with specific content based on Canvas, and use the canvas.toDataURL() method to return the base64 encoding of the picture content String. For the PNG file format, it is divided into chunks. The last chunk is a 32-bit CRC check code. Extracting this CRC check code can be used to uniquely identify the user.

The test results show that the CRC check code generated by the same browser when accessing this domain always remains unchanged. It can be simply understood as the same HTML Canvas element drawing operation. On different operating systems and different browsers, the image content generated is actually not exactly the same. There may be several reasons for this situation:

1. In terms of image formats, different web browsers use different graphics processing engines, different image export options, different default compression levels, etc.
2. At the pixel level, operating systems each use different settings and algorithms for anti-aliasing and sub-pixel rendering operations.
3. Even if it is the same drawing operation, the final image data generated is still different at the hash level.

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, which is currently not available Effective countermeasures.

More reading

1. Client-Side: HTML5 Canvas Fingerprinting
2. Website tracking technology that replaces cookies: A preliminary study on "canvas fingerprinting"
3. JavaScript bin2hex function
4. Comparison of existing IOS device unique identifier solutions
5. Is there a unique Android device ID?