序言：
前兩天有接收到一下問題，如何拿到瀏覽器指紋中的位置信息和CPU，在這之前完全沒有接觸過瀏覽器指紋，抱着學習和好奇的心態，就去網上查了大量的資料。下面我將學習過程和成果貼出來給大家。
步驟
1、什么是瀏覽器指紋？
一般情況下，網站或者廣告商都想要一種技術可以在網絡上精確的定位到每一個個體，這樣就可以通過收集這些個體的數據，然后加以分析之后更加精確的去推送廣告和其他的一些活動。Cookie技術是非常受歡迎的一種。當用戶訪問一個網站時，網站可以在用戶當前的瀏覽器Cookie中永久植入一個含有唯一標示符（UUID）的信息，並通過這個信息將用戶所有行為（瀏覽了哪些頁面？搜索了哪些關鍵字？對什么感興趣？點了哪些按鈕？用了哪些功能？看了哪些商品？把哪些放入了購物車等等）關聯起來。
而隨着網民對個人隱私的重視，Cookie越來越不受待見。不少安全工具甚至是瀏覽器都開始允許或引導用戶關閉Cookie功能，比如很多主流瀏覽器都有一個“隱私模式瀏覽”功能。同時，我們可以很方便的使用瀏覽器的快捷鍵清除緩存，這樣在兩次訪問的區間也就無法識別是否是同一個用戶，這樣一來，網站就很難追蹤用戶行為了。
這個時候瀏覽器指紋也就應運而生。什么是瀏覽器指紋呢？而隨着網民對個人隱私的重視，Cookie越來越不受待見。不少安全工具甚至是瀏覽器都開始允許或引導用戶關閉Cookie功能，比如很多主流瀏覽器都有一個“隱私模式瀏覽”功能。這樣以來，網站就很難追蹤用戶行為了。
2、瀏覽器指紋追蹤
2.1、基本指紋
基本指紋是任何瀏覽器都具有的特征標識，比如硬件類型（Apple）、操作系統（Mac OS）、用戶代理（User agent）、系統字體、語言、屏幕分辨率、瀏覽器插件 (Flash, Silverlight, Java, etc)、瀏覽器擴展、瀏覽器設置 (Do-Not-Track, etc)、時區差（Browser GMT Offset）等眾多信息，這些指紋信息“類似”人類的身高、年齡等，有很大的沖突概率，只能作為輔助識別。
硬件類型：
操作系統：navigator.platform
用戶代理（瀏覽器類型）：navigator.userAgent
瀏覽器版本號：navigator.appVersion
瀏覽器是否啟動cookie：navigator.cookieEnabled
cpu等級：navigator.cpuClass
cpu虛擬核心數：navigator.hardwareConcurrency
系統語言：navigator.language
屏幕分辨率：window.screen
瀏覽器插件：navigator.plugins
時差區：new Date().getTimezoneOffset() //-480 （負值是東區，480分鍾為8小時，所以中國是東八區）
顏色質量：window.screen.colorDepth
flash插件情況：
//判斷是否IE
function isIe(){
var i=navigator.userAgent.toLowerCase().indexOf("msie");
return i>=0;
}
//判斷是否firefox
function isFireFox(){
var i=navigator.userAgent.toLowerCase().indexOf("firefox");
return i>=0;
}
//拿到瀏覽器指紋的位置
navigator.geolocation.getCurrentPosition(success, error, options)
var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }; function success(pos) { var crd = pos.coords; console.log('Your current position is:'); console.log('Latitude : ' + crd.latitude); console.log('Longitude: ' + crd.longitude); console.log('More or less ' + crd.accuracy + ' meters.'); }; function error(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }; navigator.geolocation.getCurrentPosition(success, error, options);
注意：拿到位置信息，在PC端的時候必須在打開VPN的情況。
2.2、高級指紋
基本指紋就像是人的外貌特征，外貌可以用男女、身高、體重區分，然而這些特征不能對某個人進行唯一性標識，僅使用基本指紋也無法對客戶端進行唯一性判定，基於HTML5的諸多高級指紋對此提供了新思路。
（1）在cookie中種入UUID
下面是具體的實現方法
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越來越不受待見，不少安全工具甚至是瀏覽器都開始允許或引導用戶關閉Cookie功能。這就導致使用cookie的收效甚微。這時候，人們看到了Canvas指紋。
（2）Canvas指紋
從根本上來說，每一種瀏覽器都會使用不同的圖像處理引擎，不同的導出選項，不同的壓縮等級，所以每一台電腦繪制出的圖形都會有些許不同，這些圖案可以被用來給用戶設備分配特定編號（指紋），也就是說可以用來識別不同用戶。
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; } 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("https://www.baidu.com/"));
測試結果表明，同一瀏覽器訪問該域時生成的CRC校驗碼總是不變。可以簡單理解為同樣的HTML Canvas元素繪制操作，在不同的操作系統不同的瀏覽器上，產生的圖片內容其實是不完全相同的。出現這種情況可能是有幾個原因：
- 在圖片格式上，不同web瀏覽器使用了不同的圖形處理引擎、不同的圖片導出選項、不同的默認壓縮級別等。
- 在像素級別來看，操作系統各自使用了不同的設置和算法來進行抗鋸齒和子像素渲染操作。
- 即使是相同的繪圖操作，最終產生的圖片數據在hash層面上依然是不同的。
2.3、硬件指紋
硬件指紋主要通過檢測硬件模塊獲取信息，作為對基於軟件的指紋的補充，主要的硬件模塊有：GPU’s clock frequency、Camera、Speakers/Microphone、Motion sensors、GPS、Battery等。
未完待續...