DomRect

DomRect stands for “DOM Rectangle”. In the context of web APIs, a DOMRect represents the size and position of a rectangle. This might sound innocuous, but it can be utilized for fingerprinting purposes.

How DomRect Browser Fingerprinting Works#

When rendering content, browsers can sometimes display slight differences in layout due to variations in rendering engines, hardware, settings, or even installed fonts. These nuances can be captured via the getBoundingClientRect() method, which returns the position and dimensions of an element relative to the viewport. By calling this method on various elements, one can generate a unique profile or “fingerprint” of a device or user.

Implementing DomRect Browser Fingerprinting in JS#

Here’s a basic implementation:

function getDomRectFingerprint() {
    // Select some common elements - you can choose others
    let elements = ["html", "body", "h1", "p", "a"];

    let fingerprint = elements.map(selector => {
        let element = document.querySelector(selector);
        if (element) {
            let rect = element.getBoundingClientRect();
            return `${selector}:${rect.top},${rect.left},${rect.width},${rect.height}`;
        }
        return `${selector}:null`;
    }).join(';');

    return fingerprint;
}

With the function above, you can now call getDomRectFingerprint() and obtain a fingerprint string derived from the DomRect of the selected elements.

Bypassing DomRect Fingerprinting#

Randomly altering page layouts can disrupt the consistent fingerprints that tracking scripts look for. This can be done by occasionally adjusting CSS styles or adding random paddings and margins.

Some browser extensions or even built-in features normalize page rendering, making all pages appear the same regardless of the device or browser.