Use Html5-canvas to track users, Chrome stealth mode killed

Some of China's precision marketing companies are going to steal the music. = = from the previous tracking cookie to the trailing Flashcookie, some businesses are always tracking user behavior and even privacy, turning it into so-called "business value." We are forced to face the "deteriorating, moral perish" dilemma, but the author later let go, anyway in China online there is no privacy. After all, the state machinery is still working legally ...

In other words, the core principle of the Html5-canvas tracking user is actually a sentence: when drawing canvas pictures, the same canvas drawing code, different machines and browsers to draw the picture characteristics are the same and unique, so since, The simplest CRC value can be extracted to uniquely identify and track the user. The reason, in fact, when the HTML5 canvas element drawing operation, on different operating systems on different browsers, the resulting picture content is actually not exactly the same. Of course, since it is not exactly the same, there is a case of collision repetition, but it seems that some optimizations can significantly reduce the repetition rate, such as validating more projects such as browser plugins, adding UID, and so on.

Inadvertently inserted willow-lined, originally used to verify the function of the picture is used to track users, the reality is so interesting ~

Original Rices "HTTP://SECURITY.TENCENT.COM/INDEX.PHP/BLOG/MSG/59"

Objective

In general, Web sites or ad networks will want a technical way to pinpoint each individual on the Web, so you can collect data from these individuals to push ads more accurately (precision marketing) or other targeted activities through analysis. Cookie technology is a very popular one. When a user visits a website, the site can permanently embed a unique identifier (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.

And as netizens pay more attention to personal privacy, cookies are becoming more and more unpopular. Many security tools and even browsers begin to allow or direct users to turn off cookies, for example, many major browsers have a "Privacy mode browsing" feature. This makes it difficult for websites to track user behavior. 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.

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

"Principle Analysis"

I collected a lot of well-known sites of similar code, see Appendix 4, from these "canvas fingerprint identification" code can be seen, are used to the HTML5 exclusive label <canvas> A status quo: when the canvas picture, the same canvas drawing code, The picture features that are drawn by different machines and browsers are the same and unique, so that the simplest MD5 value can be extracted to uniquely identify and track the user.

A piece of JavaScript code that produces a canvas element:

var canvas = document.createElement(‘canvas‘);var ctx = canvas.getContext(‘2d‘);var txt = ‘http://security.tencent.com/‘;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);

To get the content of the painting, you need to use the Canvas.todataurl () method, which returns the Base64 encoded string of the picture content. For PNG file format, block (chunk) partition, the last piece is a 32-bit CRC check, extract this CRC check code can be used for the user's unique identity:

var b64 = canvas.toDataURL().replace("data:image/png;base64,","");var bin = atob(b64);var crc = bin2hex(bin.slice(-16,-12));console.log(crc);

Chrome Stealth Mode test:

The same machine's Chrome browser, whether normal mode or stealth mode, the resulting CRC value is always consistent. And for different machines the values are different, the tracking effect is obvious.

See here, believe a lot of people want to ask, why? Why is there such a situation? The same JS code, on different device browsers, the results are unique and different. Why the hell is that? In fact, the reason is very simple, the same HTML5 canvas element drawing operation, on 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 picture 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.

Therefore, even the same drawing operations, the resulting image data at the hash level is still different. This specific code level, I am afraid to understand the implementation of the various mainstream browsers and operating system rendering. The author's energy limit, short-term difficult to give. You can find your own, welcome to the AC J

Something

HTML5 ever-changing, the use of canvas this feature to achieve user tracking, there is no good confrontation, the future can only rely on the majority of browser manufacturers to end their own, the implementation of the canvas mapping mechanism of randomization may be good to protect user privacy, to prevent being traced.

The code and technical details involved in this article are for technical exchanges only and should not be used for illegal purposes. In addition, if you want to study more user tracking technology, it is recommended to study the famous open source project focused on visitor tracking: Evercookie "Appendix 5", This wretched gadget, through almost all the ways you think and imagine (cookies, Flash, Silverlight, Web history, HTTP etags, Web cache, Window.name caching, UserData storage, HTML5, even Java vulnerabilities, etc.) to track user behavior of visiting websites.

Appendix

[1] Http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

[2] Https://securehomes.esat.kuleuven.be/~gacar/sticky/index.html

[3] Https://panopticlick.eff.org/browser-uniqueness.pdf

[4] section "Canvas fingerprint identification code" address list:

Http://ct1.addthis.com/static/r07/core130.js
Http://i.ligatus.com/script/fingerprint.min.js
Http://src.kitcode.net/fp2.js
Http://admicro1.vcmedia.vn/fingerprint/figp.js
Http://shorte.st/js/packed/smeadvert-intermediate-ad.js
Http://stat.ringier.cz/js/fingerprint.min.js
Http://cya2.net/js/STAT/89946.js
http://images.revtrax.com/RevTrax/js/fp/fp.min.jsp
Http://rackcdn.com/mongoose.fp.js

[5] Evercookie official website http://samy.pl/evercookie/

[6] Use of canvas fingerprint Identification Technology Library Fingerprintjs official website Https://github.com/Valve/fingerprintjs

[7] Https://www.browserleaks.com/canvas#how-does-it-work

Use Html5-canvas to track users, Chrome stealth mode killed