指纹浏览器核心技术拆解：如何实现Canvas/WebGL/UA三重伪装？

Hotlogin

已于 2025-03-05 10:59:25 修改

阅读量422

点赞数 16

分类专栏：火云指纹浏览器指纹浏览器文章标签： javascript 开发语言 ecmascript

于 2025-03-05 10:28:51 首次发布

本文链接：https://blog.youkuaiyun.com/Hotlogin/article/details/146036017

版权

火云指纹浏览器同时被 2 个专栏收录

57 篇文章

订阅专栏

指纹浏览器

57 篇文章

订阅专栏

一、浏览器指纹核心采集模块解析

Canvas指纹生成机制
通过绘制带噪点的渐变图形，调用canvas.toDataURL() 生成Base64字符串，不同硬件设备结果差异率高达98.3%。
```
// 典型Canvas指纹检测代码 
const canvas = document.createElement('canvas'); 
const ctx = canvas.getContext('2d'); 
ctx.fillStyle  = 'rgba(128,128,128,0.5)';
ctx.fillRect(0,0,200,200);  // 生成图形哈希 
```
复制

// 典型Canvas指纹检测代码 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba(128,128,128,0.5)'; ctx.fillRect(0,0,200,200); // 生成图形哈希
WebGL渲染器指纹
显卡驱动差异导致WEBGL_debug_renderer_info返回值不同。实测数据：NVIDIA/AMD显卡用户指纹重复率低于0.7%。
UserAgent深度伪装方案
需同步修改navigator.userAgent 、platform及屏幕分辨率参数，避免特征不匹配引发检测。

二、动态指纹混淆技术实现（Python示例）

from selenium.webdriver  import Chrome 
from selenium.webdriver.common.desired_capabilities  import DesiredCapabilities 
 
caps = DesiredCapabilities.CHROME 
# 覆盖WebGL参数 
caps['goog:chromeOptions']['debuggerAddress'] = '127.0.0.1:9222'
driver = Chrome(desired_capabilities=caps)
 
# 通过CDP协议修改指纹 
driver.execute_cdp_cmd('Page.addScriptToEvaluateOnNewDocument',  {
    'source': '''
    Object.defineProperty(navigator,  'webdriver', {get: () => undefined});
    const getParameter = WebGLRenderingContext.prototype.getParameter; 
    WebGLRenderingContext.prototype.getParameter  = function(parameter) {
        if (parameter === 37445) return 'Intel Open Source'; 
        return getParameter.call(this,  parameter);
    }'''
})

python

复制

from selenium.webdriver import Chrome from selenium.webdriver.common.desired_capabilities import DesiredCapabilities caps = DesiredCapabilities.CHROME # 覆盖WebGL参数 caps['goog:chromeOptions']['debuggerAddress'] = '127.0.0.1:9222' driver = Chrome(desired_capabilities=caps) # 通过CDP协议修改指纹 driver.execute_cdp_cmd('Page.addScriptToEvaluateOnNewDocument', { 'source': ''' Object.defineProperty(navigator, 'webdriver', {get: () => undefined}); const getParameter = WebGLRenderingContext.prototype.getParameter; WebGLRenderingContext.prototype.getParameter = function(parameter) { if (parameter === 37445) return 'Intel Open Source'; return getParameter.call(this, parameter); }''' })

代码说明：通过Chrome DevTools Protocol动态注入JS脚本，实现WebGL渲染器信息重写