在前端開發中，如何獲取瀏覽器的唯一標識

由於不同的系統顯卡繪制 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 摘要計算，得到指紋信息

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

• fingerprintjs2

它依據以下信息，獲取到瀏覽器指紋信息，而這些信息，則成為 component

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)
  })
})

在 fingerprintjs2 中，對於 component 也有分類

• browser independent component：有些 component 同一設備跨瀏覽器也可以得到相同的值，有些獨立瀏覽器，得到不同的值
• stable component: 有些 component 刷新后值就會發生變化，稱為不穩定組件

在實際業務中，可根據業務選擇合適的組件

const options = {
  excludes: {userAgent: true, language: true}
}

簡答

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

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

若在生產環境使用，可以使用 fingerprintjs2，根據業務需求，如單設備是否可跨瀏覽器，以此選擇合適的 component