Canvas 지문을 피하는 방법

Canvas란 무엇인가요?

Canvas는 HTML5에 추가된 새로운 태그로, 해당 API와 함께 사용하여 웹 페이지에서 실시간으로 이미지를 생성하고 이미지 콘텐츠를 조작하는 데 사용됩니다.


Canvas는 어떤 용도로 사용할 수 있나요?

• 기본적인 그래픽 드로잉(점, 선, 타원 등) 및 텍스트 드로잉
• 그래픽 변형 및 구성(크기 조정, 회전, 오버레이 등)
• 이미지 및 비디오 처리
• 애니메이션 구현
• 미니 게임 제작
  
  

인터넷의 발전으로 사용자는 웹 페이지에 대한 더욱 높은 수준의 시각적 및 인터랙티브 요구 사항을 가지게 되었으며, 이는 기존 웹 프런트엔드 방식으로는 충족할 수 없습니다. 개발. 따라서 강력한 Canvas 드로잉 기능을 사용하면 웹 페이지에 더욱 풍부한 콘텐츠를 표시하여 사용자에게 더욱 향상된 시각적 및 인터랙티브 경험을 제공할 수 있습니다.

다음은 예시입니다.

<script 유형=“텍스트/자바스크립트”>  ... ; & nbsp;

// 캔버스 요소에 해당하는 DOM 객체를 가져옵니다.

var canvas_xy = document.getElementById(“canvas_xy”);

// 캔버스에 그리는 canvasRenderingContent2D 객체를 가져옵니다.

var ctx = canvas_xy.getContext(“2d”);

// 시작점을 설정합니다. 그리기

ctx.moveTo(100, 100);

// 그릴 다음 점 설정

ctx.lineTo(200, 200);

// 그릴 다음 점 설정

ctx.lineTo(400, 100);

//그리기 종료

ctx.closePath();

// 선 두께 설정

ctx.lineWidth = 10;

// 그리기 스타일 설정

ctx.strokeStyle = “red”;

//점 사이에 선을 그립니다.

ctx.stroke();

// 채우기 스타일을 설정합니다.

ctx.fillStyle = “green”;

// 현재 뷰를 채웁니다.

ctx.fill();

</script>

다음과 같은 결과가 나타납니다.

캔버스 핑거프린팅이란 무엇인가요?

캔버스 핑거프린팅을 이해하려면 먼저 브라우저 핑거프린팅이 무엇인지 이해하는 것이 중요합니다.

일반적으로 웹사이트나 광고주는 웹상의 각 개인을 정확하게 타겟팅하여 해당 개인에 대한 데이터를 수집하고 분석한 후 광고 및 기타 캠페인을 더욱 정확하게 푸시할 수 있는 기술을 원합니다. 예를 들어, 사용자가 어떤 페이지를 탐색하는지, 어떤 키워드를 검색하는지, 무엇에 관심이 있는지, 어떤 버튼을 클릭하는지, 어떤 기능을 사용하는지, 어떤 제품을 보는지, 장바구니에 무엇을 담는지 등이 있습니다.

하지만 사용자를 보호하기 위해 모든 브라우저가 강화됨에 따라, 개인 정보 보호를 위해 브라우저는 웹사이트에 유효한 사용자 식별 정보를 제공하지 않고, 웹사이트에서 일반적으로 사용되는 추적 기술을 차단합니다. 예를 들어, 크로스 도메인 요청은 더 이상 쿠키를 포함하지 않고, 시크릿 모드가 실행됩니다. 이로 인해 두 번의 방문을 각각 완료한 사용자가 동일한 사용자인지 식별할 수 없으므로 웹사이트가 사용자 행동을 추적하기 어려워집니다.

바로 이 부분에서 브라우저 지문이 작용합니다. 웹사이트는 브라우저를 통해 사용자 기기의 하드웨어 유형, 운영 체제, 사용자 에이전트, 시스템 글꼴, 언어, 화면 해상도, 브라우저 플러그인, 브라우저 확장 프로그램, 브라우저 설정, 시간대 차이, 지리적 위치 등 다양한 정보를 수집하는데, 이를 브라우저 지문이라고 합니다. 그러나 이러한 지문은 사람의 키, 나이 등과 "유사"하기 때문에 반복될 가능성이 높습니다. 따라서 개인을 식별하는 고유 식별자로 사용할 수 없습니다.

HTML5 기반 고급 핑거프린팅은 새로운 솔루션을 제공하며, 그중 Canvas 핑거프린팅은 가장 널리 사용되는 솔루션 중 하나입니다. 앞서 언급했듯이 Canval 기술을 사용하면 페이지에 실시간으로 이미지를 그릴 수 있지만, 컴퓨터마다 미묘한 차이가 있는 이미지를 그릴 수 있으며, 이러한 이미지는 일반적으로 사람의 눈으로는 인식할 수 없습니다. 하지만 생성된 이미지 데이터를 계산하면 지문 값을 생성하여 다른 사용자를 식별할 수 있습니다.

웹사이트는 어떻게 Canvas 지문을 얻나요?

우리가 방문하는 웹사이트에는 웹 페이지에 숨겨진 캔버스 이미지가 그려져 있습니다. HTML5 Canvas API를 통해 두 사용자가 동일한 기기, 동일한 운영체제, 동일한 브라우저로 웹사이트를 방문하면 Canvas 이미지는 정확히 동일합니다. 두 대의 컴퓨터에서 서로 다른 설정을 사용하는 경우, Canvas 지문은 일반적으로 다릅니다.

다음은 https://browserleaks.com/canvas에서 감지된 두 컴퓨터의 지문입니다.

캔버스 지문은 고유하지 않습니다. 고유성 값이 높을수록 캔버스 지문은 더 고유합니다. 하지만 높은 값이 반드시 좋은 결과를 의미하는 것은 아닙니다. 이 지문은 주로 컴퓨터 하드웨어, 특히 그래픽 카드 모델과 관련이 있기 때문입니다. 정상적인 상황에서는 하드웨어 중복이 발생할 가능성이 있습니다.

Canvas 핑거프린팅을 방지하는 방법

다음 메서드를 배포하여 Canvas 핑거프린팅을 방지할 수 있습니다.

• 브라우저 플러그인 설치

Google 앱 스토어에는 Canvas Fingerprint Block과 같이 캔버스 지문을 무작위로 수정하는 플러그인이 있습니다. 이 원리는 인간의 눈에는 보이지 않는 무작위 노이즈가 캔버스에 주입될 때마다 이미지 데이터의 CRC 검증 결과에 영향을 미친다는 것입니다.

플러그인으로 감지한 결과는 다음과 같습니다.

• 하드웨어 가속 비활성화

캔버스 지문 생성은 주로 컴퓨터 하드웨어 구성에 따라 달라지므로, 특수 하드웨어 설정을 사용하여 캔버스 지문 생성을 방지함으로써 캔버스 지문의 차이를 배제할 수 있습니다.

예를 들어, Chrome의 고급 설정 → 시스템에서 “가능한 경우 하드웨어 가속 사용”을 찾아 끄고 Chrome을 다시 시작합니다. 이렇게 하면 어떤 컴퓨터를 사용하든 동일한 Canvas 지문을 얻을 수 있습니다.

• 탐지 방지 브라우저 사용

탐지 방지 브라우저는 고유한 지문을 사용하여 별도의 브라우징 환경을 제공합니다. 첫 번째 방법과 마찬가지로, 지문을 피하기 위해 탐지 방지 브라우저를 사용하는 원리도 캔버스에 약간의 노이즈를 발생시킵니다. 하지만 노이즈가 브라우저 커널에 구현되어 있기 때문에, 안티디텍트 브라우저는 실제 Canvas 지문을 숨기는 데 더 효과적입니다. 심지어 여러 Canvas 지문을 모방하여 웹사이트가 여러 사용자가 웹사이트를 방문하고 있다고 "속일" 수도 있습니다.