Canvas fingerprinting - 쿠키 없이 사용자 추적

Canvas fingerprinting(canvas 지문 채취)는 브라우저 쿠키 없이 웹사이트에 접속한 사용자를 uniquely 하게 식별하여 추적하는 브라우저 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 인 듯.

링크