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

NO IMAGE

本文收錄於 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 可以獲取瀏覽器指紋信息。

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

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

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

  1. canvas
  2. webgl
  3. UserAgent
  4. AudioContext
  5. 對新式 API 的支持程度等
requestIdleCallback(function () {
Fingerprint2.get((components) => {
const values = components.map((component) => component.value)
const fp = Fingerprint2.x64hash128(values.join(''), 31)
})
})

簡答

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

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

若在生產環境使用,可以使用 fingerprintjs2

更多面試

關注我

我是山月,正致力於「每天用五分鐘能夠看完的簡短答案回答一個大廠高頻面試題」,可添加我的微信 shanyue94 進行交流。

歡迎關注公眾號【互聯網大廠招聘】,定時推送大廠內推信息及面試題簡答,「每天學習五分鐘,半年進入大廠中」

頭條:如何獲取瀏覽器指紋信息
每天五分鐘,半年大廠中

本文使用 mdnice 排版

相關文章

iOSDeepLink調研與實踐

canvas+js從0開始擼一個俄羅斯方塊

ReactNative實現AppStoreToday頁效果

駁《慎用trycatch》