Choose: Simple Style

Fingerprinting getClientRects

║▌║▌│█║▌║│█│█║║║▌║

/Tracking/Fingerprinting/active/get_client_rects/

  • $ fingerprint@info:~ echo $GET-CLIENT-RECTS

  • Name:

    getClientRects

    Original feature purpose:

    The method getClientRects of a DOM element returns DOMRect objects which reveal bounding rectangles of CSS border boxes. A DOMRect object comprises the height, width, left, right, top, bottom and, depending on the browser, the x and y values of the element. For more details see, e.g., MDN web docs


    FP-Explanation:

    The DOMRect information of a specific DOM element is available by default and can be read out without any privileges. The values are provided with an accuracy of up to 16 decimal places or special values in edge cases. For example, values generated through scale operations with large scale factors like
    transform: scale(100000000000000000000009999999999999.99, 1.89)
    will result in various different outputs:

    • A Firefox version:
      left: -17895698
      right: 0
      top: 304.6000061035156
    • A Chrome version:
      left: -3.419999878488261e+37
      right: 3.419999878488261e+37
      top: 301.6449890136719
    • An Internet Explorer Version:
      left: -Infinity
      right: -Infinity
      top: NaN

    The getClientRects fingerprint is hashed information from multiple DOMRect objects, where each object represents a different scenario, such as (vendor specific) transformations, caption tests and translations (with hardware acceleration; GPU instead of CPU).


    FP-Type:

    active

    FP-Categories:

    js, js-attrib, software-dependent, consistent

    Counter-measures:

    The method getClientRects is supported by almost all browsers and the browser settings do not allow to change readout permissions or accuracies. The best solution (for the future) should be an internal browser feature, which limits the fingerprinting surface of the DOMRect object, which all browser vendors agree to implement in the same way. But this would be a non-trivial task, because there need to be considered many browser-specific dependencies. And old browser versions will remain unprotected.
    Browser Addons, which block or spoof DOMRect objects should be used with causion, because these may not reduce your DOMRect fingerprintability, but make you more unique (in combination with other fingerprinting techniques) instead. For instance, a Firefox browser spoofing Chrome values or fake values, which will not be reproduced by any other real browser. This would also lead to layout or feature errors, if websites rely on DOMRect information for their website design or other features.


    Publications/References:


  • $ fingerprint@info:~ run get-client-rects-demo

    • Demo:

    >> Jump to getClientRects Fingerprinting Demo <<


getClientRects Fingerprinting:




Your getClientRects Fingerprint:


ClientRects readouts (test 1):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS
/* Simple Test (1) */

#clientRectsTest1 {
  border: solid 2.715px;
  border-color: green;
  padding: 3.98px;
  margin-left: 12.12px;
} /* Transformation Test (2) */

#clientRectsTest2 {
  border: solid 2px;
  border-color: purple;
  /*font-family: "1942_report1942_report";*/
  /* cached font-family results in different values in chrome*/
  font-size: 30px;
  margin-top: 200px;
  /* No position absolute to influence other boxes */
  -webkit-transform: skewY(23.1753218deg);
  -moz-transform: skewY(23.1753218deg);
  -ms-transform: skewY(23.1753218deg);
  -o-transform: skewY(23.1753218deg);
  transform: skewY(23.1753218deg);
}
ClientRects readouts (test 2):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS

ClientRects readouts (test 3):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS
/* Large Scale Test (3) */

#clientRectsTest3 {
  border: solid 2.89px;
  border-color: orange;
  font-size: 45px;
  transform: scale(100000000000000000000009999999999999.99, 1.89);
  margin-top: 50px;
} /* Vendor specific transformation Test (4) */

#clientRectsTest4 {
  border: solid 2px;
  border-color: silver;
  /*Fallback order important */
  transform: matrix(1.11, 2.0001, -1.0001, 1.009, 150, 94.4);
  -webkit-transform: matrix(0.95559, 2.13329, -0.9842, 0.98423, 150, 95);
  -moz-transform: matrix(0.66371, 1.94587, -0.6987, 0.98423, 150, 103.238);
  -ms-transform: matrix(0.5478, 1.94587, -0.7383, 0.98423, 150, 100.569);
  -o-transform: matrix(0.4623, 1.83523, -0.6734, 0.81231, 150, 99.324);

  /* Combine position absolute (left/top) with margin top/left */
  position: absolute;
  margin-top: 11.1331px;
  margin-left: 12.1212px;
  padding: 4.4545px;
  left: 239.4141px;
  top: 178.5050px;
}
ClientRects readouts (test 4):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS

ClientRects readouts (test 5):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS
/* Table caption Test (5) */

#clientRectsTest5 {
  /* 1px = 1/96 of 1in */
  /* 1pt = 1/72 of 1in */
  border: solid 2pt;
  border-color: red;
  margin-left: 42.395pt;
}

caption {
  border: solid 2px;
  border-color: darkred;
  font-size: 20.99px;
  margin-left: 20.8px;
} /* translateZ Test (6) */

#clientRectsTest6 {
  border: solid 2px;
  border-color: darkblue;
  /* trigger hardware-acceleration (GPU instead of CPU) */
  -webkit-transform: perspective(12890px) translateZ(101.5px);
  -moz-transform: perspective(12890px) translateZ(101.5px);
  -ms-transform: perspective(12890px) translateZ(101.5px);
  -o-transform: perspective(12890px) translateZ(101.5px);
  transform: perspective(12890px) translateZ(101.5px);
  padding: 12px;
}
ClientRects readouts (test 6):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS

ClientRects readouts (test 7):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS
/* Selection Options Test (7) */

#clientRectsTest7 {
  position: absolute;
  margin-top: -350.552px;
  margin-left: 0.9099rem;
  border: solid 2px;
  border-color: burlywood;
}

// HMTML Code
  <div id="clientRectsTest7">
    <select>
      <option>selection-option (Test 7)</option>
    </select>
  </div>
/* Details Summary Test (8) */

#clientRectsTest8 {
  position: absolute;
  margin-top: -150.552px;
  margin-left: 15.9099rem;
  border: solid 2px;
  border-color: sandybrown;
}

// HMTML Code
  <div id="clientRectsTest8">
    <details>
      <summary>detail summary (Test 8)</summary>
    </details>
  </div>
ClientRects readouts (test 8):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS

ClientRects readouts (test 9):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS
/* Progress Test (9) */

#clientRectsTest9 {
  position: absolute;
  margin-top: -110.552px;
  margin-left: 15.9099rem;
  border: solid 2px;
  border-color: orchid;
}

// HMTL Code
  <div id="clientRectsTest9">
    <progress value="49" max="100"></progress>
  </div>
/* Button Test (10) */

#clientRectsTest10 {
  position: absolute;
  margin-top: 315.552px;
  margin-left: 15.9099rem;
  border: solid 2px;
  border-color: turquoise;
}

// HMTL Code
  <div id="clientRectsTest10">
    <button type="button"></button>
  </div>
ClientRects readouts (test 10):
Hash: ---
bottom: ---
height: ---
left: ---
right: ---
top: ---
width: ---
x: ---
y: ---
Show CSS