HTML5 Canvas fingerprinting
우리가 인터넷을 사용할 때마다 우리를 tracking 하는 기술들이 많이 있다. 이 post 에서는 canvas fingerprinting(캔버스 지문채취) 라는 기술에 대해서 간략히 알아보자.ref. 1 에 가면 현재 자신의 browser 로 fingerprinting 을 한 내용을 보여줄 것이다. 그리고 이것이 어떻게 동작하는 지를 알려준다.
ref.1 에서 설명을 잘해 주고 있어서 ref.1 의 내용 중 일부를 번역했다.
아래의 글은 ref.1 의 내용을 번역한 것이다.
Canvas 2D context 를 사용한다면, 특히 WebGL profiling 을 사용한다면 비디오 adapter 를 구분할 수 있다. 일반적인 font 를 rendering 할 때 그래픽 카드 드라이버마다 다른 영향을 준다.
이렇게 만든 화면은 memory 상에 있게 되는데, 이 화면을 toDataURL() 함수를 이용해서 추출한다. toDataURL() 함수가 binary image 파일을 base64-encoding 된 문자열로 변환해서 보여준다.
그래서 이 string 을 MD5 hashing 을 할 수도 있고, PNG file 마지막에서부터 16 ~12 byte 에 있는 IDAT chunk 로 부터 CRC checksum을 추출할 수도 있다.
이것이 Canvas Fingerprint 가 된다고 한다.
실제로 구현된 모습은 ref. 1 에서 확인할 수 있다. 아래는 javascript code 이다.
// Text with lowercase/uppercase/punctuation symbols var txt = "BrowserLeaks,com <canvas> 1.0"; ctx.textBaseline = "top"; // The most common type ctx.font = "14px 'Arial'"; ctx.textBaseline = "alphabetic"; ctx.fillStyle = "#f60"; ctx.fillRect(125,1,62,20); // Some tricks for color mixing to increase the difference in rendering ctx.fillStyle = "#069"; ctx.fillText(txt, 2, 15); ctx.fillStyle = "rgba(102, 204, 0, 0.7)"; ctx.fillText(txt, 4, 17);
converse 를 이용해서 video 카드 특성을 알아보는 법
ref. 2 에 보면 html 의 canvas 와 js 를 이용해서 어떤 식으로 video 카드의 특징을 파악하는 지 알 수 있다.ref.2 에서는 font-smoothing 기능을 지원하는지 여부를 알아보는 함수를 보여주는데, 원리는 간단하다.
canvas 2D context 를 이용해서 그 안에 검정색의 문자를 하나 넣는다. 그러면 video card 가 그것을 rendering 할 텐데, 이 rendering 된 결과의 pixel 들을 확인하는 것이다. 그래서 검은색이 이외의 색(예를 들면 회색) 이 있다면, 이것은 font-smoothing 이 적용돼서 흐릿한 색이 들어간 것일 테니, 이런 경우라면, graphic card 가 font-smoothing 을 사용한다고 보는 것이다.
기타
이외에도 browser 를 통해 많은 정보를 가져갈 수 있는데 이런 방법들은 아래 source 에서 확인할 수 있다. 대략 보면 DOM 의 navigator 정보를 많이 이용하는 듯 하다.Reference
- HTML5 Canvas Fingerprinting : further reading 에서 더 많은 자료를 확인할 수 있다.
- How to Detect Font-Smoothing Using JavaScript
댓글 없음:
댓글 쓰기