HTML5 canvas finger print

소개

보통 웹사이트에 접속한 사용자를 식별하려면 쿠키를 사용합니다.

Canvas fingerprinting 은 웹사이트에 접속한 브라우저를 95% uniquely 하게 식별하는 기술입니다.

100% 식별이 아니기 때문에 주로 광고 타겟팅에 이용되고 있습니다.

University of California, San Diego 의 연구원이 2012년 5월에 쓴 논문 

“Pixel Perfect: Fingerprinting Canvas in HTML5” 이 최초입니다.

미국 백악관 사이트 포함 5.5% 이상 이 기술을 사용중인 것으로 알려졌습니다.

원리

1. html5 canvas로 렌더링 되는 이미지는 GPU나 드라이버의 영향으로 pc 마다 달라서 고유 이미지가 됩니다.  
2. 이 canvas 이미지를 base64으로 인코딩하여 서버로 전달합니다.
3. 이 이미지를 해싱 후 서버에 저장하여 관리합니다.

구현

var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
var txt ="BrowserLeaks,com <canvas> 1.0";
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.textBaseline = "alphabetic";
ctx.fillStyle = "#f60";
ctx.fillRect(125,1,62,20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102,204,0,0.7)";
ctx.fillText(txt, 4, 17);
	
var canvasValue = canvasElement.toDataURL('image/png', 1.0);
        
console.log(canvasValue);

 

이를 이용한 api가 git hub에 존재 합니다.

https://github.com/fingerprintjs/fingerprintjs2

 

 

 

DEV