[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:

https://blog.jangmt.com/2017/03/canvas-fingerprinting.html

https://stackoverflow.com/questions/25508970/canvas-fingerprinting-on-chrome

https://hovav.net/ucsd/dist/canvas.pdf

https://github.com/artem0/canvas-fingerprinting


當麻許的超技八 2014 | Donma Hsu Design.