FingerprintJS

之前有后端小哥問道，前端可否生成瀏覽器唯一標識UUID，發(fā)給后端處理。當時我想都不用想，直接拒絕(手動狗頭)。后來想了想，這是個不錯了研究題材，就google了一把，于是乎發(fā)現(xiàn)了這個寶藏庫(FingerprintJS)。它能夠生成瀏覽器唯一標識來區(qū)別不同的用戶，pro版本的識別率高達99.5%(然而開源版本只有60%,本文簡述的是開源版本)。

FingerprintJS 原理

FingerprintJS 的實現(xiàn)思路挺簡單的，首先找出能區(qū)分瀏覽器不同的部分，我們最常見的就是通過navigator來獲取瀏覽器的詳細信息了。而 FingerprintJS 除了使用 navigator, 還用到了canvas指紋，字體寬高等其他方面，具體看下面代碼：

FingerprintJS 把各個部分當成組件分別實現(xiàn)，然后使用loadBuiltinSources方法獲取所有組件，接著使用componentsToCanonicalString遍歷組件的返回值，系列化拼接成字符串，最后用x64hash128方法把字符串轉(zhuǎn)成一個獨一無二的hash值。

上面的一大坨組件，其實大部分都是查詢navigator對象的，這里就不展開了，除此之外，canvas指紋，字體差和所用到了hash算法倒是有點意思。

canvas指紋

canvas指紋是指：通過canvas接口在頁面上繪制一個隱藏的圖像，在不同的系統(tǒng)，瀏覽器中最終的圖像是存在像素級別的差別的，主要是因為操作系統(tǒng)各自使用了不同的設(shè)置和算法來進行抗鋸齒和子像素渲染操作。即使相同的繪圖操作，產(chǎn)生的圖片數(shù)據(jù)的CRC檢驗也不相同。(CRC是指使用canvas.toDataURL返回的base64數(shù)據(jù)中，最后一段32位的驗證碼)。

canvas指紋并不少見，除此之外，還有使用音頻指紋，甚至使用WebGL指紋和WebGL指紋的。 音頻指紋跟canvas指紋的原理差不多，都是利用硬件或軟件的差異，前者生成音頻，后者生成圖片，然后計算得到不同哈希值來作為標識。音頻指紋的生成方式有兩種：

1. 生成音頻信息流(三角波)，對其進行FFT變換，計算SHA值作為指紋

2. 生成音頻信息流（正弦波），進行動態(tài)壓縮處理，計算MD5值 FingerprintJS 也使用了音頻指紋，使用的貌似是方法一，具體有興趣可以看一下代碼

系統(tǒng)字體

FingerprintJS 通過getFonts()方法獲取系統(tǒng)支持的字體，原理不復雜，大致分為下面的步驟：

1. 定義字體文案const testString = 'mmMwWLliI0O&1';字體大小const textSize = '48px';基本的fontFamilyconst baseFonts = ['monospace', 'sans-serif', 'serif'];和待檢測字體列表fontList(定義了很多字體類型)

2. 分別遍歷baseFonts和fontList，生成span標簽，并設(shè)置對應的fontFamily，注意fontList遍歷的時候，需要同時遍歷baseFonts，這樣設(shè)置fontFamily的時候可以設(shè)置默認的baseFonts字體

3. 比較fontList和baseFonts的字體文案在不同的fontFamily下的寬高，如果不相等說明支持該字體，如果相等，說明系統(tǒng)不支持fontList的字體，使用了默認的baseFonts的字體

murmurHash3

x64hash128使用的hash算法是murmurHash3。代碼比較復雜，有興趣可以去琢磨一下，這里只做簡單介紹。

MurmurHash是一種經(jīng)過廣泛測試且速度很快的非加密哈希函數(shù)。它有Austin Appleby于2008年創(chuàng)建，并存在多種變體，名字來自兩個基本運算，即multiply(乘法)和rotate(旋轉(zhuǎn))（盡管該算法實際上使用shift和xor而不是rotate）。

MurmurHash3可以產(chǎn)生32位或128位哈希，舊版本MurmurHash2產(chǎn)生32位或64位值，MurmurHash2A變體添加了Merkel-Damgard構(gòu)造，以便可以逐步調(diào)用它。MurmurHash64A針對64位處理器進行了優(yōu)化，針對32位處理器進行MurmurHash64B優(yōu)化。