피드로 돌아가기
Browserscan.net Canvas Fingerprint Pure-JS Technical Report
Dev.toDev.to
Security

Canvas 렌더링 안정성 검증 기반의 SHA1 지문 추출 아키텍처

Browserscan.net Canvas Fingerprint Pure-JS Technical Report

LoseNine2026년 6월 9일9intermediate

Context

브라우저마다 상이한 Canvas 렌더링 엔진 특성을 이용하여 고유 식별자를 생성하는 Fingerprinting 기술 분석. 단순 렌더링 결과값의 변동성으로 인한 식별 오류를 방지하기 위한 안정성 검증 메커니즘이 요구됨.

Technical Solution

  • 텍스트 캔버스 렌더링 후 toDataURL()을 2회 호출하여 결과값의 일치 여부를 확인하는 Stability Check 단계 설계
  • 텍스트 기반 안정성 확인 완료 시에만 122x110 크기의 Geometry Canvas를 렌더링하는 2단계 파이프라인 구축
  • globalCompositeOperationmultiplyevenodd fill rule을 적용하여 그래픽 스택의 세밀한 렌더링 차이를 유도
  • 최종 생성된 PNG dataURL 전체를 SHA1 해시 함수의 입력값으로 사용하여 고유한 canvasHash를 생성
  • 렌더링 아티팩트와 PNG 인코더 동작 특성을 결합하여 하드웨어 및 OS 레벨의 식별 정밀도 확보
  • isPointInPath를 통한 Winding Check를 보조 지표로 활용하여 렌더링 엔진의 특성을 추가 검증

1. 외부 입력값의 일관성이 중요한 시스템 설계 시, 동일 연산을 반복 수행하여 결과값의 불변성을 검증하는 Stability Check 패턴 검토

2. 하드웨어/소프트웨어 환경 식별이 필요할 경우, 표준 API의 렌더링 아티팩트(Anti-aliasing, Color blending)를 활용한 지문 생성 기법 적용

3. 대용량 바이너리 데이터(PNG DataURL)를 식별자로 사용할 때, 데이터 전송 효율을 위해 SHA1 등 해시 함수를 통한 고정 길이 식별자 변환 프로세스 도입

원문 읽기