❝
本文收錄於 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
摘要計算,得到指紋信息
但是對於常見的需求就有成熟的解決方案,若在生產環境使用,可以使用以下庫
它依據以下信息,獲取到瀏覽器指紋信息
canvas
webgl
UserAgent
AudioContext
對新式 API 的支持程度等
requestIdleCallback(function () {
Fingerprint2.get((components) => {
const values = components.map((component) => component.value)
const fp = Fingerprint2.x64hash128(values.join(''), 31)
})
})
簡答
根據 canvas
可以獲取瀏覽器指紋信息
繪製 canvas
,獲取base64
的 dataurl對 dataurl 這個字符串進行 md5
摘要計算,得到指紋信息
若在生產環境使用,可以使用 fingerprintjs2
更多面試
關注我
我是山月,正致力於「每天用五分鐘能夠看完的簡短答案回答一個大廠高頻面試題」,可添加我的微信 shanyue94
進行交流。
歡迎關注公眾號【互聯網大廠招聘】,定時推送大廠內推信息及面試題簡答,「每天學習五分鐘,半年進入大廠中」

本文使用 mdnice 排版