瀏覽器指紋是什麼？
像人類的指紋一樣，瀏覽器指紋也是用於唯一身份認證的一種標識。
這東東常被廣告商用於用户跟蹤，比如 A、B 網站都添加了一個廣告商，如果用户訪問了 A 網站，查看了些商品或文章，然後再訪問 B 網站，那麼廣告商就知道用户對哪些東西感興趣，就可以在 B 網站中投放一些感興趣的廣告。
瀏覽器指紋起的作用就是給用户打上唯一標識，用户每次訪問網頁都會被獲取到這個唯一標識符，這樣就實現了用户未登錄情況下跟蹤用户行為，從而繪製用户畫像。
所以其實用户所有的操作行為都會被跟蹤，雖然説瀏覽器提供了無痕模式，其實有很多瀏覽器的指紋特徵與是不是無痕模式沒太大關係，非無痕模式訪問網站獲取到的指紋特徵是一個值 xxxx，無痕模式再訪問獲取的指紋還是這個 xxxx。
指紋特徵
1、IP 地址
用户發起請求到服務器時，都會攜帶一個網絡IP，這個 IP 一般會固定一段時間（與運營商有關），有些大型商用網絡還會購買固定 IP 地址，而請求中的這個 IP 地址，就有可能被用於指紋特徵計算。
2、Canvas指紋
利用每個瀏覽器 Canvas 繪圖的不同，也可以生成一個指紋特徵。
3、WebGL 與 WebGPU 指紋
與 Canvas 類似，利用 3D 圖形渲染差異來生成指紋特徵。
4、字體指紋
通過檢測瀏覽器的特定字體大小，判斷是否已安裝某個字體，從而獲得一種指紋特徵。
5、Client Rects
由於瀏覽器渲染 HTML 存在差異性，可通過獲取某個元素的上下左右位置及寬度和高度等信息，可生成指紋特徵。
6、音頻指紋
利用不同瀏覽器的 AudioContext 在處理音頻數據的差異性，可生成一種指紋特徵。
7、瀏覽器語言
瀏覽器配置的語言信息也可以用作指紋特徵算法。
8、屏幕分辨率
瀏覽器的窗口大小信息，在指紋算法中，也可納入特徵庫。
9、時區與當地時間
不同國家的時區與時間都存在差異，也可以通過此特徵來獲取指紋。
10、User-Agent
瀏覽器的 UA 信息，每個瀏覽器都不同，相同瀏覽器的不同版本也存在差異，完全可以當做一種指紋特徵。
11、設備內存
雖然 navigator.deviceMemory 獲取到的值不一定是準確的內存值，但此屬性用作指紋特徵算法是完全可行的。
12、CPU 數量
navigator.hardwareConcurrency 獲取 CPU 數量，也可投入到指紋算法中。
13、SpeechSynthesis
利用 SpeechSynthesis 瀏覽器的語音合成功能，由於語音、發音、口音、語速等差異性，可作為指紋特徵算法。
14、地理位置
如果隨手點了同意獲取地理位置，那瀏覽器背後就可以開始用地理位置信息來生成指紋特徵了，畢竟每個位置信息是有差異性的。
15.媒體設備
利用 MediaDevices API 獲取媒體設備信息，如攝像頭、麥克風、設備類型、標籤名字、鏈接類型等，這些信息也可用於指紋特徵算法。
與地理位置一樣需要用户同意，同意後就可以開始搞事情。
FingerprintJS 插件生成指紋
瀏覽器開源插件 FingerprintJS，截止發文有 24.5k Star，github 地址：https://github.com/fingerprintjs/fingerprintjs
FingerprintJS 3.0 版本可免費使用， 4.0 版本之後商業用途需要付費，測試、個人學習用途無需付費。
瀏覽器端的 FingerprintJS 準確性僅有 40% - 60%，如果需要更高的準確性，可付費使用 Fingerprint Pro，官網：https://fingerprint.com/github/。
此插件獲取了瀏覽器 41 個特徵用於指紋算法：
[
'fonts', 'domBlockers', 'fontPreferences', 'audio',
'screenFrame', 'canvas', 'osCpu', 'languages',
'colorDepth', 'deviceMemory', 'screenResolution',
'hardwareConcurrency', 'timezone', 'sessionStorage',
'localStorage', 'indexedDB', 'openDatabase', 'cpuClass',
'platform', 'plugins', 'touchSupport', 'vendor',
'vendorFlavors', 'cookiesEnabled', 'colorGamut',
'invertedColors', 'forcedColors', 'monochrome',
'contrast', 'reducedMotion', 'reducedTransparency',
'hdr', 'math', 'pdfViewerEnabled', 'architecture',
'applePay', 'privateClickMeasurement', 'audioBaseLatency',
'dateTimeLocale', 'webGlBasics', 'webGlExtensions'
]
參考地址：https://fingerprintjs.github.io/fingerprintjs/
使用方法
方法一：script 引入
<script src="https://openfpcdn.io/fingerprintjs/v3/iife.min.js"></script>
<script>
// 獲取標識符
FingerprintJS.load()
.then(fp => fp.get())
.then(result => {
const visitorId = result.visitorId
console.log(visitorId)
})
</script>
方法二：npm 安裝
npm install --save @fingerprintjs/fingerprintjs
# 安裝指定版本 3.4.2
npm install --save @fingerprintjs/fingerprintjs@3.4.2
import FingerprintJS from '@fingerprintjs/fingerprintjs';
// 獲取標識符
FingerprintJS.load()
.then(fp => fp.get())
.then(result => {
const visitorId = result.visitorId
console.log(visitorId)
})
方法三：模塊化引入
<script>
// 也可使用此地址： https://openfpcdn.io/fingerprintjs/v3/esm.min.js
const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
.then(FingerprintJS => FingerprintJS.load())
// 獲取標識符
fpPromise
.then(fp => fp.get())
.then(result => console.log(result.visitorId))
</script>
配置項
FingerprintJS.load({
delayFallback?: number, // 為不支持 requestIdleCallback 的瀏覽器設置回退時間
debug?: boolean, // 是否打印調試信息
monitoring?: boolean, // 是否發送使用統數據到FingerprintJS服務器
}): Promise<Agent>
文檔
V3 文檔：https://github.com/fingerprintjs/fingerprintjs/blob/v3/docs/api.md
最新版本文檔：https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md
寫在最後
瀏覽器指紋可以讓網站記住您是誰，也讓廣告商能實現精準投放廣告。互聯網不是法外之地，每一次訪問，技術上都有辦法跟蹤，所以説大數據讓人毫無隱私~~
