Web tracking technology will replace cookies with "canvas fingerprint recognition"

Objective

In general, a website or ad league would like to have a technology that can pinpoint each individual on the web, so that by collecting the data from these individuals, it is more accurate to push advertising (precision marketing) or other targeted activities through analysis. Cookie technology is a very popular one. When a user visits a Web site, the site can permanently embed a unique identifier (UUID) in the user's current browser cookie and use this information to view all user behavior (which pages are browsed). What keywords were searched for? Interested in what? What buttons did you click? What features are used? What are the items you saw, the ones you put into your shopping cart and so on?

And as netizens attach importance to personal privacy, cookies are increasingly invisible. Many security tools and even browsers are starting to allow or direct users to turn off cookies, such as a "Privacy mode browsing" feature in many mainstream browsers. This makes it hard for websites to track user behavior. But there are still ways to get the site to track the behavior of each visitor, such as by using flash cookies to uniquely identify and track.

The author recently noted that foreign media reported a very difficult to get rid of a new online tracking tool is used to follow from the White House website to pornographic sites youporn.com popular site visitors. After analysis, this is another relatively new visitor tracking technology: "Canvas fingerprint identification" technology, specific code see Appendix 6. The unique thing about this technique is that it's not like using cookies or flash cookies, and so on, you basically can't block it.

"Principle Analysis"

The author collects and collates the similar code of many well-known sites, see Appendix 4, from these "the canvas fingerprint identifies" the code can be seen, all use to HTML5 a status of the exclusive label: When drawing canvas picture, the same canvas draws the code, The image features of different machines and browsers are identical and unique, so extracting the simplest MD5 value can uniquely identify and track the user.

Produces the canvas element, gets the content of the painting, needs to use the Canvas.todataurl () method, which returns the Base64 encoded string of the picture's contents. For PNG file format, block (chunk), the last piece is a 32-bit CRC checksum, the extraction of this CRC code can be used for the user's unique identification:

function Bin2Hex (s) {
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;
}

var canvas = document.createelement (' canvas ');
var ctx = Canvas.getcontext (' 2d ');
var txt = ' http://chenpeng.info/';
Ctx.textbaseline = "Top";
Ctx.font = "14px ' Arial '";
Ctx.textbaseline = "Chenpeng.info";
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));
Console.log (CRC);

Ab99cca6

Chrome Stealth Mode test:

The same machine Chrome browser, regardless of normal mode or stealth mode, the resulting CRC value is always the same. And for different machines to get the value is different, the tracking effect is obvious.

See here, I believe a lot of people want to ask, Why? Why is this happening? The same JS code, in different device browsers, the result is unique and different. What the hell is this? In fact, the reason is very simple, the same HTML5 canvas element drawing operations, different operating systems in different browsers, the resulting picture content is not exactly the same. There may be several reasons for this:

1. In the picture format, different Web browsers use different graphics processing engines, different picture export options, different default compression levels, and so on.

2. At the pixel level, the operating system uses different settings and algorithms for anti-aliasing and sub-pixel rendering operations.

Therefore, even the same drawing operations, the resulting picture data at the hash level is still different. This specific code level, I am afraid to understand the implementation of the mainstream browser and the operating system and rendering. The writer is limited in the short term. We can explore it by ourselves, welcome to Exchange J

Something

HTML5 ever-changing, the use of canvas this feature to achieve user tracking, there is no good confrontation scheme, the future can only rely on the vast number of browser manufacturers to kill themselves, the realization of canvas mapping mechanism of randomization may be a good protection of user privacy, to prevent tracking.

The code and technical details involved in the article are limited to technological exchanges and are not used for illegal purposes. In addition, if you want to study more user-tracking techniques, it is recommended to study the famous Open-source project focused on visitor tracking: Evercookie "Appendix 5", This wretched gadget, through almost every way you think of and unexpected (cookies, Flash, Silverlight, Web History, HTTP ETags, Web cache, Window.name caching, UserData storage, HTML5, and even Java vulnerabilities to track the behavior of users accessing the site.