Browser Fingerprinting ㅗㅜㅑ

HTML5 성행 이전에는 브라우저 내 사용자 식별 가능한 유일한 수단은 쿠키 뿐이었다.
그러다가 HTML5 표준화 이후, 다양한 스토리지 방식(Local Storage 등)을 통해 임의의 키를 사용자에 주입해 특정 사용자를 식별하는 행위가 가능했다.
하지만 이들 방식은, 브라우저 캐시만 날려도 날아가는 등 아주 손쉽게 사용자 흔적을 없애버릴 수 없고,
요즘 부라우저들은 호락호락하지 않아서 보안 이슈가 컸던 제3자쿠키에 대해 엄격해지기 시작했다.

HTML5 가 실험적 단계였을 2012년부터, 이를 보완하여 사용자 식별에 유용해 왠만한 사이트에서 성행하기 시작한 2가지 몇 가지 사용자 식별 방법이 생겨났다.

Canvas Fingerprinting

캔버스 지문채취. <canvas> 태그에 임의의 폰트 문자를 렌더링 시켜 거기서 나오는 hash 값을 통해 사용자를 식별하는 방법이다.
구현하는 게 생각보다 쉽고, 무엇보다도 “시크릿 모드”에서도 같은 식별 코드가 렌더링 되어 광고 뿐 만 아니라 여러 기업에서 지금도 질리게 써먹는 기술이다.
심지어 KT는 공유기 사용자를 식별하기 위해 이 방법을 쓴다고 한다… 와우. 징한 놈들…

이 기술은 2012년 5월 샌디애고 캘리포니아 대학의 한 교수가 발견한 기술이다. Pixel Perfect: Fingerprinting Canvas in HTML5
이게 2년 뒤에 엄청난 화제를 불러 일으켰다.The Web never forgets: Persistent tracking mechanisms in the wild
생각보다 꽤 오래 전에 발견한 기술이었고, 한국 또한 화제거리로 떠오를 때 한 개발자 블로그에서 발췌했다. Canvas fingerprinting – 쿠키 없이 사용자 추적
이 방식은 꽤 높은 유일 해시가 나와 화제를 불러일으키기도 했다. 100%까지는 아니지만 무려 95%라는 엄청난 유일성을 지니고 있다.
더 무서운 점은 소셜공유 위젯 사이트 addthis.com이 화제 일으키기 전에 몰래 사용해왔다는 것이다.

또한가지, 같은 렌더링을 구현해도 같은 값이 나와서 쿠키가 굳이 필요가 없을 정도. (에이전트, IP와 같이 서버로 보내면 땡이니까.)

당연히 개인정보 문제가 발생 안할래야 안할 수 없었고, 결국 이를 방지하는 브라우저 플러그인이나, Firefox에서는 자체적으로 막을 수 있는 옵션을 제공하기까지 했다.
막는 원리 또한 간단하다. Canvas API 호출 시마다 임의의 노이즈를 생성시켜 해시 값이 다르게 나오게 하는 간단한 원리다. 요즘은 왠만한 애드블록 확장에서도 지원하기도 한다.

AudioContext Fingerprinting

예전에 내가 잠시 작곡놀이를 재미지게 했던 때가 생각났다. 그 와중에 브라우저에서 HTML5 기본 오디오 API는 나를 흥분의 도가니로 넣게 했다.
바로 순수 웹으로 드럼머신이나 신디사이저를 만들 수 있다는 것. 하지만 데스크탑 한정이고, 완벽하지도 않다.
그러나… 역시 브라우저에서 창조 가능하면 죄다 지문 채취가 가능한 것인가…

AudioContext Fingerprint Test Page

이 페이지는 캔버스 지문 방식으로 화제가 된 1년 뒤에 나온 페이지다. 최초 발견 또한 비슷한 시기이지만 크게 화제가 되지는 못했다.
왜냐면 발견 당시에도 그렇고 지금도 이걸 쓸 만한 매리트가 없기 때문이다. 캔버스보다 느리고, 데스크탑만 몇몇 브라우저에서 지원한다.
원리는 캔버스 방식과 비슷하다. 파장을 생성하고, 압축(Compress)한다. 파장만 생성하면 일정하기 때문에 압축하는 과정도 거친다. 거기서 유일한 파장이 나온다고 한다.
재밌게도 폰트 채취는 덤. IE를 위해 플래시가 활성화된 경우 플래시를 이용하는 위엄까지 보여준다.

All in one: FingerprintJS2

이젠 살다살다 저걸 화제로 불러일으킨 팀이 이걸 오픈소스로 공개하고 팔 생각까지도 했다.
파는 것까진 아니지만 이 기술은 중국에서 존나게 좋아하고 존나게 즐겨쓴다고 한다…

Valve/fingerprintjs2

이 라이브러리에서는 아래와 같은 식별자 정보를 제공한다.

  • 에이전트 (브라우저 및 OS 등)
  • 언어
  • 색상 깊이
  • 해상도
  • 시간대(Timezone)
  • 세션 스토리지 여부
  • 로컬 스토리지 여부
  • 인덱스DB 여부
  • AddBehavior 탑재된 IE 여부
  • open DB 여부
  • 플랫폼
  • DoNotTrack 활성화 여부
  • 설치된 글꼴 (플래시,JS,CSS 사용)
  • 캔버스 지문
  • WebGL 지문
  • 플러그인 (IE 포함)
  • Adblock 설치 여부
  • 언어 변조 여부 (예를 들어 한국어 플랫폼에 일본어 사용)
  • 해상도 변조 여부 (음?)
  • OS 변조 여부 (예: 에이전트 바꾸는 플러그인 등)
  • 브라우저 변조 여부 (위와 동일)
  • 터치 스크린 감지 및 지원
  • 픽셀 감도 (화면 비율, 예: 16:9)
  • 에이전트를 통한 논리 프로세서 개수 추측
  • 장치 메모리 (이건 시발 W3C에서 공식 지원)

그리고 이 개새끼들은 아래 기능도 지원할 예정이라 한다.

  • 멀티 모니터 감지
  • HashTable 지원 여부
  • WebRTC 지문
  • 수학 상수
  • 접근성 지문(…)
  • 카메라 정보
  • DRM 지원 여부
  • 가속도 지원 여부
  • 가상 키보드
  • 제스쳐 지원(터치 스크린 한정)
  • 픽셀 밀도 (레티나나 고밀도 디스플레이 감지)
  • 비디오 및 오디오 코덱 지원
  • 오디오 지문

아 시발 그냥 나도 쓰는게 낫겠다 어자피 불법도 아니고 사용자 식별은 하긴 해야 하니 시발…
끗… 근데 나 지금 백엔드 프로젝트 투입중이라 업무상 만질 일은 일단 없다.

composite / 2018년 6월 8일 / Piss Development / 0 Comments

CSS로 만든 크로스 브라우저 흑백 효과

IE의 경우는 기본 흑백만 제공하고, 캔버스 태그에서 온갖 효과 기능들이 생겨났지만..

다행인 것은 바로 흑백 효과를 CSS를 통해 볼 수 있다는 것이다.

굉장하지 아니한가?

CSS 코드는 아래와 같다.

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

안타깝게도 불여우같은 경우 (달버전 말고)는 grayscale.svg 파일이 별도로 필요하다.

일단 여기에 data:uri 적용해놨는데 이게 성공한다면 외부에 의지할 필요가 없는 최고의 상태지만, 실패한다면 안습.

불여우 사용자 중 아래 그림이 흑백으로 보이거나 안보인다면 제보 바란다.

출처는 http://labs.voronianski.com/css3-grayscale/

Download ZIP (with .svg)

composite / 2013년 12월 13일 / 미분류 / 2 Comments