跨浏览器设备指纹追踪技术详解

1. 前言

本文档详细解析了跨浏览器设备指纹追踪技术的实现原理和架构，基于先知社区"一叶飘零"的文章《Cross-Browser-Tracking-Summary-Part-4》。该技术通过收集多种浏览器和设备特征，生成唯一指纹用于跨浏览器识别同一设备。

2. 整体架构

系统采用前后端分离架构，主要流程如下：

1. 后端下发渲染任务：后端服务器向前端发送需要执行的渲染测试任务
2. 前端执行并收集数据：
   • 执行指定的渲染测试
   • 将部分结果进行哈希处理后发送给后端
   • 同时收集浏览器和设备信息
3. 数据传输：前端将收集的数据发送到后端
4. 后端处理：
   • 接收并处理前端发送的数据
   • 生成浏览器指纹与设备指纹
5. 存储与反馈：将指纹存储到数据库，并将结果返回前端

3. 模块整合与数据生成

3.1 WebGL渲染测试

系统通过loader.js整合多个测试模块，主要测试GPU渲染能力：

this.testList.push(new CubeTest('normal'));
this.testList.push(new CubeTest('aa'));
this.testList.push(new CameraTest());
this.testList.push(new LineTest('normal'));
this.testList.push(new LineTest('aa'));
this.testList.push(new TextureTest(....));
this.testList.push(new TextureTest(....));
this.testList.push(new SimpleLightTest(....));
this.testList.push(new SimpleLightTest(....));
this.testList.push(new MoreLightTest(....));
this.testList.push(new TwoTexturesMoreLightTest(....));
this.testList.push(new TransparentTest(....));
this.testList.push(new LightingTest());
this.testList.push(new ClippingTest());
this.testList.push(new BubbleTest());
this.testList.push(new CompressedTextureTest());
this.testList.push(new ShadowTest());

这些测试涵盖了多种渲染场景，包括：

• 基本立方体渲染
• 抗锯齿测试
• 相机测试
• 线条渲染
• 纹理测试
• 光照测试
• 透明效果测试
• 阴影测试等

3.2 浏览器字符支持测试

this.asyncTests.push(new LanguageDector());

该测试检测浏览器支持的字符集，结果返回给后端用于指纹生成。

4. 数据收集

系统通过toServer.js收集多种设备特征，主要收集以下数据：

4.1 初始数据结构

var Sender = function() {
    this.finalized = false;
    this.postData = {
        fontlist: "No Flash",
        fonts: "",
        WebGL: false,
        inc: "Undefined",
        gpu: "Undefined",
        hash: "Undefined",
        timezone: "Undefined",
        resolution: "Undefined",
        plugins: "Undefined",
        cookie: "Undefined",
        localstorage: "Undefined",
        manufacturer: "Undefined",
        gpuImgs: {},
        adBlock: "Undefined",
        cpu_cores: "Undefined",
        canvas_test: "Undefined",
        audio: "Undefined",
        langsDetected: [],
        video: []
    };
};

4.2 WebGL相关数据收集

this.toServer = function(WebGL, inc, gpu, hash, id, dataurl) {
    this.postData['gpuImgs'][id] = dataurl.hashCode();
    if (WebGL) {
        this.postData['WebGL'] = WebGL;
        this.postData['inc'] = inc;
        this.postData['gpu'] = gpu;
        this.postData['hash'] = hash;
    }
};

其中：

• inc 来自 gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL)
• gpu 来自 gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
• hash 和 gpuImgs 使用自定义哈希算法计算

4.3 哈希算法实现

Uint8Array.prototype.hashCode = function() {
    var hash = 0, i, chr, len;
    if (this.length === 0) return hash;
    for (i = 0, len = this.length; i < len; i++) {
        chr = this[i];
        hash = ((hash << 5) - hash) + chr;
        hash |= 0; // Convert to 32bit integer
    }
    return hash;
}

4.4 字体检测

系统检测4422种字体支持情况，支持标记为1，不支持标记为0，生成二进制数组。

4.5 时区信息

收集本地时间与GMT时间之间的时间差。

4.6 屏幕分辨率

收集浏览器缩放比例和页面大小信息：

• 缩放比例（如80%、100%）
• 浏览器窗口大小（小窗、最大化等）

4.7 Navigator对象信息

this.postData['plugins'] = navigator.plugins;
this.postData['cookie'] = navigator.cookieEnabled;
this.postData['cpu_cores'] = navigator.hardwareConcurrency;

4.8 本地存储检测

try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    this.postData['localstorage'] = true;
} catch (e) {
    this.postData['localstorage'] = false;
}

4.9 其他特征收集

this.postData['adBlock'] = $('#ad')[0] == null ? 'Yes' : 'No';
this.postData['canvas_test'] = Base64EncodeUrlSafe(calcSHA1(cvs_test.substring(22, cvs_test.length)));
this.postData['audio'] = audioFingerPrinting();
this.postData['langsDetected'] = get_writing_scripts();

4.10 数据发送

function startSend(postData){
    $.ajax({
        url: "http://" + ip_address + "/features",
        dataType: "json",
        contentType: 'application/json',
        type: 'POST',
        data: JSON.stringify(postData),
        success: function(data) {
            data['finished'] = true;
            parent.postMessage(data, "http://uniquemachine.org");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError);
        }
    });
}

5. 后端处理

后端使用Python Flask框架实现：

5.1 接收端点

@app.route('/features', methods=['POST'])
def features():
    agent = ""
    accept = ""
    encoding = ""
    language = ""
    IP = ""
    try:
        agent = request.headers.get('User-Agent')
        accpet = request.headers.get('Accept')
        encoding = request.headers.get('Accept-Encoding')
        language = request.headers.get('Accept-Language')
        IP = request.remote_addr
    except:
        pass

5.2 特征列表

feature_list = [
    "agent", "accept", "encoding", "language", "langsDetected",
    "resolution", "fonts", "WebGL", "inc", "gpu", "gpuImgs",
    "timezone", "plugins", "cookie", "localstorage", "adBlock",
    "cpu_cores", "canvas_test", "audio"
]

cross_feature_list = [
    "timezone", "fonts", "langsDetected", "audio"
]

5.3 处理流程

1. 通过User-Agent判断设备类型（如Mac）
2. 加载不同的掩码配置
3. 对收集的字体支持数据进行与运算
4. 将所有特征值字符串化并拼接
5. 对拼接后的字符串进行MD5哈希，生成浏览器指纹和设备指纹

6. 测试结果分析

实际测试显示该技术的识别效果：

1. 同一IP，不同浏览器(Safari, Firefox, Chrome)：识别失败
2. 不同浏览器但成功案例(Chrome, Firefox)：部分成功
3. 不同IP，同一浏览器(Chrome)：
   • 挂代理时：识别成功
   • 不挂代理：识别成功

7. 技术总结

7.1 关键技术点

1. 多维度特征收集：包括GPU渲染、字体支持、时区、分辨率、插件等
2. WebGL指纹：通过UNMASKED_VENDOR_WEBGL和UNMASKED_RENDERER_WEBGL获取GPU信息
3. 跨浏览器特征：主要依赖时区、字体、语言支持和音频指纹
4. 哈希算法：对特征数据进行哈希处理生成唯一指纹

7.2 局限性

1. 稳定性不足：作为Demo实现，识别成功率有限
2. 特征选择：实际只使用了部分跨浏览器特征（timezone, fonts, langsDetected, audio）
3. 隐私考虑：UNMASKED_VENDOR_WEBGL等API可能引发隐私担忧

7.3 应用前景

该技术为跨浏览器设备识别提供了思路，可用于：

1. 反欺诈系统
2. 用户行为分析
3. 安全风控系统

未来可通过增加更多稳定特征和提高算法复杂度来增强识别能力。