Client Rects란 무엇인가요?

Client Rects는 브라우저가 제공하는 API 집합으로, 웹페이지 요소의 레이아웃 정보를 가져오는 데 사용됩니다. 여기에는 페이지에서 요소의 정확한 위치와 크기가 포함됩니다. 이러한 정보는 “사각형”(rects) 형태로 반환되며, 요소의 위쪽, 아래쪽, 왼쪽, 오른쪽, 너비, 높이 등 상세 데이터를 포함합니다.



Client Rects는 어떻게 지문이 되나요?

Client Rects가 브라우저 지문 추적 기술이 될 수 있는 핵심 이유는 다음과 같습니다. 두 대의 기기에서 완전히 동일한 웹페이지를 열더라도 하드웨어 구성, 운영체제, 브라우저 유형 및 버전, 화면 해상도, 글꼴 설정 등의 차이로 인해 최종적으로 렌더링되는 웹페이지 요소의 레이아웃 정보가 서로 다를 수 있기 때문입니다.



예를 들어, 같은 문장이나 같은 버튼이라도 한 기기에서는 약간 더 크게 표시될 수 있고, 다른 기기에서는 위치가 조금 어긋날 수 있습니다. 이러한 미세한 차이는 육안으로 알아차리기 어렵지만, Client Rects API를 통해서는 정확하게 포착될 수 있습니다.



Client Rects 지문의 생성 과정

웹사이트가 Client Rects를 통해 브라우저 지문을 얻는 과정은 일반적으로 다음 단계를 포함합니다.



1단계: 대상 요소 선택 또는 생성



웹사이트는 먼저 레이아웃 정보를 수집할 요소를 선택해야 합니다. 이는 텍스트 상자, 버튼 또는 페이지에 이미 존재하는 어떤 요소든 될 수 있습니다. 지문의 안정성과 고유성을 높이기 위해 웹사이트는 지문 수집 전용의 숨겨진 요소를 동적으로 생성할 수도 있습니다.



2단계: 요소의 Client Rects 가져오기



JavaScript를 통해 요소의 getClientRects() 메서드를 호출하여 해당 요소의 레이아웃 정보를 가져옵니다. 반환되는 데이터에는 요소의 위치와 크기 정보——위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right), 너비(width), 높이(height) 등이 포함됩니다.



3단계: 데이터 기록 또는 처리



웹사이트는 이러한 원시 데이터를 기록하거나 데이터를 추가로 처리합니다. 예를 들어 요소의 면적(너비 × 높이)을 계산하거나, 요소와 다른 요소 간의 상대적 위치 관계를 계산할 수 있습니다.



4단계: 브라우저 지문 생성



마지막으로 웹사이트는 이러한 레이아웃 정보를 IP 주소, 사용자 에이전트 문자열 등의 다른 데이터와 결합하고, 특정 알고리즘을 통해 사용자를 식별하고 추적하기 위한 고유한 브라우저 지문을 생성합니다.



주의할 점은 이것이 단순화된 예시일 뿐이라는 것입니다. 실제 운영 과정에서 웹사이트는 여러 요소의 Client Rects 데이터를 수집하고 더 복잡한 통계 및 분석을 수행하여 지문의 고유성과 안정성을 높일 수 있습니다.



Client Rects는 웹사이트가 사용하는 하나의 “자”라고 이해할 수 있습니다——브라우저가 페이지 요소를 어떻게 렌더링하고 배치하는지 정확하게 측정하며, 이러한 측정 결과는 서로 다른 기기 사이에서 미세하지만 식별 가능한 차이를 보입니다.