Canvas fingerprinting(canvas 지문 채취)는 브라우저 쿠키 없이 웹사이트에 접속한 사용자를 고유하게 식별하여 추적하는 브라우저 fingerprint 기술 중 하나입니다. 식별 정확도가 100%는 아니기 때문에, 주로 광고 타겟팅에 사용됩니다.

University of California, San Diego 의 연구원이 2012년 5월에 쓴 논문 “Pixel Perfect: Fingerprinting Canvas in HTML5” 이 최초입니다. 이후 Princeton 대학과 KU Leuven 대학의 2014-07-24 연구 결과 “The Web never forgets: Persistent tracking mechanisms in the wild” 로 화제가 되었습니다.

사용 중인 곳을 살펴보면 미국 백악관 사이트 를 포함하여 상위 1만 개의 사이트 중 5.5% 이상이 사용하고 있습니다. Rap Genius, CBS, YouPorn 등이 대표적입니다. 사용 중인 사이트를 정리한 사이트 도 있습니다. 사용하는 곳 중 95%가 AddThis가 만든 Canvas Fingerprinting 스크립트를 쓰고 있습니다.

쿠키보다 무서운 점은 두 가지입니다. 사용자가 자신이 추적되고 있는지를 알 수 없고, 추적을 거부할 수 없다는 것입니다.

구현

Canvas Fingerprinting

사용자가 사이트를 방문하면, 브라우저는 HTML5 canvas element를 사용하여 이미지를 그리게 됩니다. 아래 코드와 같이 fillStyle, fillText, fillRect 와 같은 canvas API 로 이미지를 만듭니다.

var txt = "BrowserLeaks,com 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);

렌더링되는 이미지는 PC마다 미묘하게 달라서 고유한 이미지가 됩니다. 이 미묘한 차이는 PC에 설치된 GPU나 그래픽 드라이버의 차이에서 옵니다. 만들어진 이미지를 canvas.toDataURL.replace("data:image/png;base64,",""); 와 같이 인코딩해서 서버로 보냅니다. 서버는 받은 이미지에 번호를 매기고(실제로는 해싱을 할 것입니다), 그 번호로 타겟팅 광고 등을 합니다.

p.s.

DSP는 쿠키를 써서 여러 매체에 리타겟팅 광고를 합니다. 그런데 사파리는 외부 쿠키를 금지하고 있고, 다른 브라우저도 미래에 금지할 수 있습니다. 요즘 분위기를 보면 그럴 가능성이 높아 보입니다. 쿠키가 막히면 리타겟팅을 할 수 없게 됩니다. 그래서 쿠키 없이 사용자를 식별하려는 시도가 많고, 그 시도 중 가장 정확도가 높은 것이 Canvas Fingerprint 인 듯합니다.

링크