What Are Client Rects?

Client Rects are a set of APIs provided by browsers for obtaining layout information about web page elements, including their precise position and dimensions on the page. This information is returned in the form of “rectangles” (rects), containing detailed data such as the element’s top, bottom, left, right, width, and height.



How Do Client Rects Become a Fingerprint?

The core reason Client Rects can serve as a browser fingerprinting and tracking technology is that even when two devices open the exact same web page, differences in hardware configuration, operating system, browser type and version, screen resolution, font settings, and other factors may cause the final rendered layout information of page elements to vary.



For example, the same piece of text or the same button may appear slightly larger on one device, while on another device its position may be slightly shifted. These subtle differences are difficult to notice with the naked eye, but they can be precisely captured through the Client Rects API.



The Process of Generating a Client Rects Fingerprint

Websites typically obtain a browser fingerprint through Client Rects using the following steps:



Step 1: Select or Generate a Target Element



The website first needs to select an element for collecting layout information. This could be a text box, a button, or any existing element on the page. To improve the stability and uniqueness of the fingerprint, the website may also dynamically generate a hidden element specifically for fingerprint collection.



Step 2: Obtain the Element’s Client Rects



JavaScript is used to call the element’s getClientRects() method to obtain its layout information. The returned data includes the element’s position and size information—top, bottom, left, right, width, height, and so on.



Step 3: Record or Process the Data



The website records this raw data or further processes it. For example, it may calculate the element’s area (width × height) or calculate the relative positional relationship between the element and other elements.



Step 4: Generate the Browser Fingerprint



Finally, the website combines this layout information with other data, such as the IP address and user-agent string, and uses a specific algorithm to generate a unique browser fingerprint for identifying and tracking users.



It should be noted that this is only a simplified example. In practice, websites may collect Client Rects data from multiple elements and perform more complex statistical processing and analysis to improve the uniqueness and stability of the fingerprint.



Client Rects can be understood as a website’s “ruler”—it precisely measures how your browser renders and arranges page elements, and these measurements contain small but identifiable differences across different devices.