Browser Fingerprints 101: Client Rects & Font
Client Rects
Client Rects is a browser API that provides layout information for webpage elements, including the position and size of the elements. This information is referred to as “rectangles” (rects).
The reason why Client Rects can become a browser fingerprinting technology is that even if two devices open the same webpage, due to differences in their hardware configuration, operating system, browser type and version, screen resolution, font settings, etc., the layout information of the rendered webpage elements may differ. These differences can be used to generate a unique identifier, that is, a browser fingerprint.
For example, the monitor of one device may display an element larger or smaller than the monitor of another device, or in a different position on the screen. These differences can be captured through the Client Rects API.
Here is a simplified example illustrating how a website uses Client Rects to obtain browser fingerprints:
Step 1: Select or Generate Elements
The website first needs to select or generate an element, such as a text box or button. The element can be an existing element on the page or an element dynamically generated by the website.
Step 2: Get the Client Rects of the Element
Then, the website uses JavaScript to obtain the Client Rects of this element. After obtaining, some information will be returned, which includes the position and size information of the element, such as the top, bottom, left, right, width, and height.
Step 3: Record or Process Client Rects
Next, the website records the Client Rects of this element or processes this information. For example, the website may calculate the area of the element (width multiplied by height), or compare the position of the element with other elements.
Step 4: Generate Browser Fingerprint
Finally, the website combines this information with other information (such as the user’s IP address, the browser’s user agent string, etc.) to generate a unique browser fingerprint. This fingerprint can be used to identify and track users.
This is just a basic example, and the actual process may be more complex. For example, the website may obtain the Client Rects of multiple elements, or perform complex statistics and analysis on this information. But in any case, the core idea is to use the slight differences in Client Rects between different devices to generate a unique browser fingerprint.
In summary, Client Rects is like a “ruler” and “notebook” for websites, which can help them identify and remember you. But this does not mean that the website can know who you are or what you are doing. They just record how your browser displays web pages and some basic information about your device. The website needs to combine other fingerprint information to improve the accuracy of the fingerprint.
Font Fingerprinting
Fonts can be part of a browser fingerprint. When your device installs a specific font, or does not install certain fonts, this information can be used to generate a unique fingerprint of your device. This is because the combination of fonts installed on everyone’s device may be unique, especially for users who have installed a lot of non-standard fonts. Therefore, fonts can help form a fairly unique and detailed browser fingerprint.
Font fingerprinting is mainly implemented through the JavaScript API of the browser. The main principle of this technology is that the browser can obtain and report the list of fonts available on the user’s device. These font lists, combined with other browser and device information, can form a fairly unique browser fingerprint.
Here are some commonly used font fingerprinting techniques:
- Font Enumeration: This is the most direct method. Just like checking which apps are installed on your device, websites can check which fonts are installed on your device. This is achieved through a function provided by the browser, which will return a list containing all installed fonts.
- Font Detection: This is a more subtle method. The website can make the browser display a paragraph of text using a specific font, and then measure the size of this text. If this font is installed, the size of this text will change, and through this method, the website can know whether this font is installed. This is like a trial and error process, the website tries to use a font, and then see the browser’s reaction.
- Canvas Fingerprint: This is a more complex method. The website can draw a paragraph of text on a virtual canvas, and then see how the pixels of this text are arranged. Because different fonts will cause different pixel arrangements, so the website can judge whether this font is installed on your device by comparing the pixel arrangement of this text. This is like writing a paragraph of text on a blackboard, and then judging what pen you use by studying the handwriting of this text.
In summary, these two fingerprints may be easily overlooked by everyone, so BrowserScan explains them to everyone here. In BrowserScan, you can also detect these two fingerprints. If you want to prevent Client Rects fingerprint or font fingerprint tracking, antidetect browser may be one of the best choices.
We have written a series of articles focused on browser fingerprinting for you. These articles are tailored to provide you with an array of resources, aimed at helping you gain a deeper understanding of browser fingerprinting.
