[Javascript] 關於 Canvas Fingerprints 的一些小操作

2021-10-04

最近在搞事情，然後需要一個確保客戶是誰的因子，這時候我查了一下，找到一個有趣的小東西，叫做 Canvas Fingerprint，簡單的說就是利用每一台裝置在叫用 CPU/GPU/其他硬體繪圖的時候，會有些許差異，所以可以造成，該瀏覽器可以變成識別該用戶的一個因子..

1. 簡單的說，就是選告一個 canvas 然後，開始在上面畫一些文字，幾何圖形，旋轉後之後轉成 base 64

2. 之後引入 sha512 的 lib ，參考的 lib : https://github.com/emn178/js-sha512 ，接下來就是直接呼叫將步驟一的 canvas image base64 給 hash 出來

我的 CHROME 結果:

DATA:

24f506384bf9b28839ec652fb6e07db75fe9961709975669b0677f03d34e641e783377bc5c54273f23302ae964c6acd3b0cdf07068f4915bc0f98481e0a482c5

我的 firefox 結果 :

DATA:

f9f3137fb9b49a3ad8305dade0a7f1632d57d0aefef3ba7a6e19506101994a98c7319162e8871b04509919872c94603e7319a453ee8a3ca11a11028ed119e8d8

很神奇吧，竟然不一樣，但是是真的不一樣嗎，當然在很多硬體變數的情況下，尤其是手機，可能會一樣。所以網路上有整理好了 lib 直接可以使用，當然他們的因子還有加上許多瀏覽器變數， https://github.com/fingerprintjs/fingerprintjs

有興趣可以參考

Result:

很神奇吧，我是覺得這可以拿來作一些身分識別，當然也有很多人拿來作一些追蹤客戶隱私的事情，當然這就是看你怎麼使用囉 :)

reference:

當麻許的超技八