頭條：如何獲取瀏覽器指紋信息

❝
本文收錄於 GitHub 日問: DailyQuestion，內含大廠內推機會、面經大全及若干面試題，每天學習五分鐘，一年進入大廠中。
大廠面經大全
大廠內推
❞

由於不同的系統顯卡繪製 canvas 時渲染參數、抗鋸齒等算法不同，因此繪製成圖片數據的 CRC 校驗也不一樣。

function getCanvasFp () {
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '14px Arial'
ctx.fillStyle = '#ccc'
ctx.fillText('hello, shanyue', 2, 2)
return canvas.toDataURL('image/jpeg')
}

因此根據 canvas 可以獲取瀏覽器指紋信息。

繪製 canvas，獲取 base64 的 dataurl
對 dataurl 這個字符串進行 md5 摘要計算，得到指紋信息

但是對於常見的需求就有成熟的解決方案，若在生產環境使用，可以使用以下庫

fingerprintjs2

它依據以下信息，獲取到瀏覽器指紋信息

canvas
webgl
UserAgent
AudioContext
對新式 API 的支持程度等

requestIdleCallback(function () {
Fingerprint2.get((components) => {
const values = components.map((component) => component.value)
const fp = Fingerprint2.x64hash128(values.join(''), 31)
})
})