Canvas API는 웹 브라우저에서 그래픽을 그리기 위해 설계되었습니다. 애니메이션, 게임 그래픽, 데이터 시각화, 이미지 편집, 실시간 비디오 처리 등에 사용할 수 있습니다. 또한 브라우저 핑거프린팅을 통한 온라인 추적에도 사용할 수 있습니다. 이 기술은 다양한 웹 브라우저와 플랫폼에서 캔버스 이미지를 렌더링하는 방식의 변화에 따라 사용자 브라우저의 개인화된 디지털 지문을 생성합니다. 하지만 동일한 장비 환경에서는 반복이 가능합니다.

캔버스 기능 감지

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(지문인식에 주로 사용됨)
• OffscreenCanvas API
• Canvas native

  Canvas toDataURL 함수는 브라우저 플러그인으로 수정할 수도 있지만 쉽게 식별할 수 있습니다.

• 안정

  Canvas는 동일한 디바이스, 브라우저 환경에서 안정적입니다.

• 사람이 아닌 소음

  일부 지문 브라우저 또는 지문 플러그인은 캔버스 노이즈에 매개변수를 추가할 수 있지만 여전히 인식될 수 있습니다.

이미지 세부정보

캔버스 지문의 원인

캔버스 이미지가 캔버스에 렌더링되는 방식은 웹 브라우저, 운영 체제, 그래픽 카드 및 기타 요인에 따라 달라질 수 있으며 결과적으로 지문을 생성하는 데 사용할 수 있는 고유한 이미지가 생성됩니다.

1. 앤티앨리어싱

안티앨리어싱 기술은 뷰티필터의 일종으로 널리 사용되고 있다. 운영 체제에서 글꼴 다듬기가 활성화되지 않은 경우 일부 글꼴은 컴퓨터 모니터에서 보기 흉하게 보입니다. 일반적으로 Windows 운영 체제는 기본적으로 글꼴 및 이미지 다듬기를 켭니다. Mac OS X에서는 앤티앨리어싱이 특정 크기 이하의 글꼴에만 작동하는 것 같습니다. 운영 체제 수준뿐만 아니라 일부 브라우저에는 자체 앤티앨리어싱 기술이 내장되어 있습니다. 예를 들어 Safari는 자체 내장 글꼴 렌더링 엔진을 사용합니다. 그리고 무엇보다도 앤티앨리어싱 기술은 캔버스에 글꼴과 이미지를 그릴 때도 작동합니다.

아래 그림과 같이 왼쪽에는 글꼴 다듬기가 활성화되지 않은 상태가 표시되고 오른쪽에는 활성화된 상태가 표시됩니다.

앤티앨리어싱 기술은 일부 비순수 색상 픽셀을 생성하며 이러한 중간 상태의 픽셀 값은 그래픽 카드의 색상 프로필에 영향을 받아 결과적으로 서로 다른 색상이 발생합니다. 충분히 큰 캔버스에 동일한 글꼴과 이미지를 그린 다음 모든 픽셀 데이터를 계산하면 상대적으로 고유한 지문 데이터를 얻을 수 있습니다.

2. 글꼴 힌트

미세 조정 기능 중 하나는 격자 맞춤입니다. 이는 글꼴 문자의 높이와 너비를 수정하여 화면에 표시되는 설정된 픽셀 격자에 맞춰 정렬하는 것을 의미합니다. 이미지는 작은 사각형의 격자로 화면에 표시됩니다. 이는 글꼴이 격자에 올바르게 표시되도록 하기 위해 왼쪽과 오른쪽으로 이동할 수도 있습니다. 스크린.

수십 명의 다양한 사용자의 캔버스 이미지를 모아 놓은 다음 GIF 이미지를 통해 동일한 코드가 다양한 디바이스 환경에서 표현되는 방식의 차이를 직관적으로 확인할 수 있습니다.

위 이미지 세부정보에서 볼 수 있듯이 일반적으로 toDataURL 함수를 호출하여 Canvas 이미지의 base64 데이터를 가져오거나 Canvas에서 생성된 PNG 이미지의 데이터 블록에서 IDAT 블록의 CRC 체크섬을 가져올 수 있습니다. 그런 다음 해당 문자열의 해시(base64 또는 CRC 체크섬)(정확한 알고리즘은 사이트마다 다름)를 Canvas 지문으로 계산할 수 있습니다.

참고: Canvas 지문이 웹사이트마다 다른 데에는 여러 가지 이유가 있습니다. 사용되는 문자열(base64 또는 CRC 체크섬), 해싱 알고리즘(MD5, SHA, MUMUHASH 등)이 다르기 때문에 Canvas 지문이 완전히 달라집니다. Canvas 지문은 안정적이므로 동일한 브라우저 및 장치 환경에서는 동일한 웹 사이트의 Canvas 지문이 고정됩니다. 이는 안정적인 특성을 지닌 사용자 보조 식별에 사용되는 Canvas 지문의 이론적 기반이기도 합니다.