狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

FingerprintJS

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

FingerprintJS 原理

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

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

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

canvas指紋

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

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

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

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

系統字體

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

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

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

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

murmurHash3

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

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

MurmurHash3可以產生32位或128位哈希，舊版本MurmurHash2產生32位或64位值，MurmurHash2A變體添加了Merkel-Damgard構造，以便可以逐步調用它。MurmurHash64A針對64位處理器進行了優化，針對32位處理器進行MurmurHash64B優化。