021.自定义指纹浏览器编译-修改ClientRects指纹

news2024/9/17 8:27:17

一、什么是ClientRects指纹

ClientRects指纹获取的核心方法是DOM元素方法getClientRects() 。
getClientRects() 可以返回一个元素的所有 CSS 边界框（ClientRect对象数组），包括其大小、位置等信息。每个边界框由其左上角的 x, y 坐标和宽高定义。
因为不同的设备和浏览器因字体、渲染引擎、屏幕分辨率等因素会有细微的渲染差异，这些差异被用来生成独一无二的指纹。

二、js如何获取ClientRects指纹

将下面的代码复制到F12控制台，画个矩形，使用getClientRects()显示矩形尺寸信息。

let parentElement = document.getElementsByTagName('body')[0]
let newElement = document.createElement('div');
newElement.innerHTML = `
<svg width="100" height="100">
  <rect id="myRect" x="10" y="10" width="30" height="30" />
</svg>
`
parentElement.appendChild(newElement);
let svgRectElement = document.getElementById('myRect');
svgRectElement.getClientRects()[0]

输出：

可以看到：小数位非常长，不同的浏览器之间存在细微差异。以此hash，则可以获取clientRects指纹

三、编译

我在第一篇文章写了如何编译chromium的大概流程，假设你已经编译成功了。
打开源码 third_party\blink\renderer\core\geometry\dom_rect.cc

1.头部加上(随便加在一个`#include`后面)

#include "base/command_line.h"

2.找到下面的代码

DOMRect* DOMRect::FromRectF(const gfx::RectF& rect) {
  return MakeGarbageCollected<DOMRect>(rect.x(), rect.y(), rect.width(),
                                       rect.height());
}

替换为

DOMRect* DOMRect::FromRectF(const gfx::RectF& rect) {
  base::CommandLine* base_command_line = base::CommandLine::ForCurrentProcess();
  int seed;
  if (base_command_line->HasSwitch("fingerprints")) {
      std::istringstream(base_command_line->GetSwitchValueASCII("fingerprints")) >> seed; 
  }else{
      auto now = std::chrono::system_clock::now();
      std::time_t now_time_t = std::chrono::system_clock::to_time_t(now);
      seed = static_cast<int>(now_time_t);
  }
  
  float new_width = rect.width() == 0 ? 0 : rect.width() + (seed % 103 / 1000000000.0);
  float new_height = rect.height() == 0 ? 0 : rect.height() + (seed % 107 / 1000000000.0);
  
  //return MakeGarbageCollected<DOMRect>(rect.x(), rect.y(), rect.width(), rect.height());
  return MakeGarbageCollected<DOMRect>(rect.x(), rect.y(), new_width, new_height);
}