一般情況下，網站或者廣告聯盟都會非常想要一種技術方式可以在網絡上精確定位到每一個個體，這樣可以通過收集這些個體的數據，通過分析后更加精准的去推送廣告（精准化營銷）或其他有針對性的一些活動。Cookie技術是非常受歡迎的一種。當用戶訪問一個網站時，網站可以在用戶當前的瀏覽器Cookie中永久植入一個含有唯一標示符（UUID）的信息，並通過這個信息將用戶所有行為（瀏覽了哪些頁面？搜索了哪些關鍵字？對什么感興趣？點了哪些按鈕？用了哪些功能？看了哪些商品？把哪些放入了購物車等等）關聯起來。
而隨着網民對個人隱私的重視，Cookie越來越不受待見。不少安全工具甚至是瀏覽器都開始允許或引導用戶關閉Cookie功能，比如很多主流瀏覽器都有一個“隱私模式瀏覽”功能。這樣以來，網站就很難追蹤用戶行為了。但仍然有一些方法可以讓網站去追蹤每一個訪問者的行為，比如通過flash cookie的方式也可以達到唯一標識和追蹤的目的。
伴隨着html5的成熟，通過canvas fingerprinting技術標識一個唯一的瀏覽器逐漸被接受。它的特點是不通過cookie，用戶基本無法屏蔽它 。
一、原理分析
可以看這篇：HTML5畫布指紋，https://browserleaks.com/canvas#how-does-it-work
“帆布指紋識別”代碼均使用到了HTML5專屬標簽<canvas>的一個現狀：在繪制canvas圖片時，同樣的canvas繪制代碼，不同機器和瀏覽器繪制的圖片特征是相同並且獨一無二的，這樣以來，提取最簡單的md5值便可以唯一標識和跟蹤這個用戶。
一段產生canvas元素的javascript代碼：
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);
獲取繪畫的內容，需要使用到canvas.toDataURL()方法，該方法返回的是圖片內容的base64編碼字符串。對於PNG文件格式，以塊(chunk)划分，最后一塊是一段32位的CRC校驗，提取這段CRC校驗碼便可以用於用戶的唯一標識：
var b64 = canvas.toDataURL().replace("data:image/png;base64,",""); var bin = atob(b64); var crc = bin2hex(bin.slice(-16,-12)); console.log(crc);
同一機器的chrome瀏覽器，無論正常模式還是隱身模式，得到的crc值始終一致。而對於不同機器得到的值是不同的，追蹤效果顯而易見。
看到這里，相信很多人想問，Why？為什么會出現這樣的情況？同樣的js代碼，在不同設備的瀏覽器上，結果是唯一並且各不相同的。這到底是為什么？
其實原因很簡單，同樣的HTML5 Canvas元素繪制操作，在不同的操作系統不同的瀏覽器上，產生的圖片內容其實是不完全相同的。出現這種情況可能是有幾個原因：
1、 在圖片格式上，不同web瀏覽器使用了不同的圖形處理引擎、不同的圖片導出選項、不同的默認壓縮級別等。
2、 在像素級別來看，操作系統各自使用了不同的設置和算法來進行抗鋸齒和子像素渲染操作。
因此，即使是相同的繪圖操作，最終產生的圖片數據在hash層面上依然是不同的。這個具體代碼層面，恐怕要去搞懂各個主流瀏覽器的實現和以及操作系統的渲染。
HTML5 千變萬化，利用canvas 這一特性來實現用戶追蹤，目前並沒有好的對抗方案，未來也只能依靠廣大瀏覽器廠商自行了斷，實現canvas繪圖機制的隨機化或許可以很好的保護用戶隱私，防止被追蹤。
二、使用帆布指紋識別技術的庫fingerprintjs
通過驗證，crc在一定程度上標識了瀏覽器的唯一性，但是，在相同設備，相同瀏覽器上，重復特別嚴重。國外有一個經過優化后的表示瀏覽器的唯一性的js，官網：https://github.com/Valve/fingerprintjs2
它除了利用canvas以外，還加入了其它的影響因素，這些因素包括
- 瀏覽器http請求中的用戶代理－navigator.userAgent
- 瀏覽器的語言(中文、英文……)－navigator.language
- 設備屏幕的色彩信息－screen.colorDepth
- 設備屏幕的寬高－screen.height screen.width
- 格林威治時間和本地時間之間的時差－Date().getTimezoneOffset()
- 是否支持sessionStorage－window.sessionStorage
- 是否支持localStorage－window.localStorage
- 是否支持indexdDB－window.indexedDB
- 是否支持－docment.body.addBehavior(IE5的一個屬性)
- 是否支持調用本地數據庫－window.openDatabase
- 瀏覽器所在系統的CPU等級－navigator.cupClass
- 客戶端的操作系統－navigator.platform
- 是否支持Do not track功能－navigator.doNotTrack
- 獲取瀏覽器部分插件信息－flash plugin、Adobe PDF reader、QuickTime、real players、ShockWave player、Windows media player、Silverlight、Skype
- canvas指紋
官網數據顯示，該標識精准度達94%，基於原理 https://panopticlick.eff.org/browser-uniqueness.pdf