抖音是如何在你没登录时对你精准推送美女&浏览器指纹原理及实现

全村最野的狗
300 阅读7分钟

浏览器指纹的前世今生

在互联网的发展过程中，人们越来越注重隐私和安全问题。很多用户开始使用浏览器扩展程序和隐私保护软件，屏蔽网站的广告追踪、第三方 Cookie 等。这也就导致网站运营方不能够精准的识别用户。这在很长一段时间里，都是困扰各大的一个难题。

并且随着人们对个性化服务的需求增加，网站和服务提供商也开始探索使用浏览器指纹技术来为用户提供更加个性化的服务。通过浏览器指纹技术，他们可以更好地了解用户的需求和喜好，为他们推荐更加符合他们兴趣的内容和产品。

于是浏览器指纹出现了。

浏览器指纹（Browser Fingerprint）是指基于浏览器和设备上的硬件和软件配置等信息，生成的一个用于识别特定设备和浏览器的标识。它不需要任何浏览器扩展程序或 Cookie 等辅助工具，通过收集一系列特征信息，如浏览器版本、屏幕分辨率、操作系统、语言环境等，就可以生成一个唯一的标识。不依赖于 Cookie 或其他辅助工具。比 IP 地址更加准确和精细。

由于每个人使用的浏览器和设备配置不同，因此生成的浏览器指纹也是唯一的。浏览器指纹可以被用来识别特定的用户，跟踪他们的在线行为，进行定向广告投放，或者其他各种目的。

浏览器指纹技术的出现，既可以帮助网站和服务提供商更好地为用户提供服务，也存在着一定的隐私和安全风险。用户在使用互联网的过程中，应该更加关注自己的隐私安全问题，并根据自己的需要选择是否开启或关闭浏览器指纹技术。

浏览器指纹的发展历程：

  • 第一代：关键词（状态），主要集中在用户的 Cookie 和 Session 上，需要用户登录才可以得到有效的信息。
  • 第二代：关键词（特征值），通过浏览器的特征值从而让用户更具有区分度，例如 UA、语言等。
  • 第三代：关键词（AI、模型），通过收集用户的行为、习惯来为用户建立特征值甚至模型，可以实现真正的追踪技术。

图片.png

浏览器指纹的原理

简单原理：使用能够区分浏览器的默认参数，同时这个参数在不同的浏览器上又是不同的。并且这个参数碰撞的几率微乎其微。那么这个参数就可以作为浏览器指纹。但是绝大多数情况都会采用多个参数拼接，然后再通过SHA-256或者其他Hash算法对原文加密作为浏览器指纹。

浏览器指纹（Browser Fingerprint）是指基于浏览器和设备上的硬件和软件配置等信息，生成的一个用于识别特定设备和浏览器的标识。这个标识就好像是一个Token。请求的时候需要携带这个参数。

在《Cross-Browser Fingerprinting via OS and Hardware Level Features》论文中介绍的一些指标的信息熵和稳定性：

指标信息熵稳定性
User Agent6.15不稳定
Accept Header2.62稳定
Screen Resolution5.25稳定
Color Depth2.37稳定
Time Zone3.51稳定
Language5.38稳定
Platform2.79稳定
Cookies Enabled0.97不稳定
Do Not Track0.26不稳定
Canvas Fingerprint26.98稳定
WebGL Fingerprint47.72稳定
Audio Fingerprint12.13不稳定
Battery Status0.23不稳定
CPU Class0.68稳定
Device Memory0.65稳定
Hardware Concurrency1.48稳定
IndexedDB0.92不稳定
Local Storage0.62不稳定
Session Storage0.47不稳定
Open Database0.15不稳定
Ad Blocker Detection0.05不稳定

信息熵越高，表示该指标的区分度越高，指纹的唯一性也更高；稳定性越高，表示该指标不受环境和设备变化的影响，指纹的一致性也更高。从上表可以看出，Canvas Fingerprint、WebGL Fingerprint两个指标的信息熵最高，稳定性也较高，因此在浏览器指纹识别中比较常用。而一些与用户设置有关的指标，如User Agent、Cookies Enabled等的信息熵较低，不稳定性较高，不能作为独立的指纹特征使用。

Canvas 指纹

Canvas 指纹是指通过HTML5中的canvas元素获取浏览器图形引擎的版本和能力，进而生成浏览器指纹的一种技术。

即便使用 Canvas 绘制相同的元素，但是由于系统的差别，字体渲染引擎不同，对抗锯齿、次像素渲染等算法也不同，Canvas 将同样的文字转成图片，得到的结果也是不同的。

canvas: function () {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var txt = 'Canvas Fingerprint';
    ctx.textBaseline = "top";
    ctx.font = "14px 'Arial'";
    ctx.textBaseline = "alphabetic";
    ctx.fillStyle = "#f60";
    ctx.fillRect(125, 1, 62, 20);
    ctx.fillStyle = "#069";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
    ctx.fillText(txt, 4, 17);
    return canvas.toDataURL(); // 导出base64
},

WebGL指纹

WebGL指纹是指利用WebGL（Web Graphics Library）技术对不同浏览器进行特征识别，以产生唯一的浏览器指纹的技术。

不同的浏览器、操作系统、显卡会对WebGL实现有不同的支持程度，因此WebGL指纹技术可以通过测量不同实现版本下的特征差异来生成一个浏览器指纹。

webgl: function () {
    var canvas = document.createElement('canvas');
    var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) {
        return null;
    }
    var result = gl.getParameter(gl.VERSION) + gl.getParameter(gl.SHADING_LANGUAGE_VERSION) + gl.getParameter(gl.VENDOR) + gl.getParameter(gl.RENDERER);
    return result;
}

第三代浏览器指纹

第三代浏览器指纹是通过收集用户操作习惯，运用人工智能的手段。构建一个模型，模型入参为用户习惯数据。出参为用户标识。

// 获取鼠标行为 
var mouseMoves = []; 
document.addEventListener('mousemove', function(e) { 
    mouseMoves.push([e.clientX, e.clientY, Date.now()]); 
}); 
// 获取键盘行为 
var keyStrokes = []; 
document.addEventListener('keydown', function(e) { 
    keyStrokes.push([e.keyCode, Date.now()]); 
});

在这里根据论文：《Behavioral Biometrics for Web Authentication》总结了一种生成浏览器指纹的办法。

  1. 收集鼠标行为和键盘行为数据：在用户使用Web应用程序时，通过JavaScript代码监听用户的鼠标行为和键盘行为，并将相关数据记录在浏览器缓存中。
  2. 特征提取：从收集到的数据中提取特征。论文作者提取了一些常用的鼠标行为和键盘行为特征，如鼠标移动速度、键盘按键间隔时间等。
  3. 特征选择：根据信息熵等指标选择最具有代表性的特征，构建浏览器指纹。论文作者通过实验发现，使用速度、距离等鼠标行为特征以及按键间隔时间、按键码等键盘行为特征可以生成较为稳定和唯一的浏览器指纹。
  4. 浏览器指纹验证：将生成的浏览器指纹存储在服务器上，用户每次访问Web应用程序时，将生成的指纹与服务器上存储的指纹进行比对，以验证用户的身份。

总结

浏览器指纹是一种非常有前景的技术。随着互联网的不断发展，网络安全问题也日益突出，因此对于保护用户的个人信息和隐私的需求也越来越高。浏览器指纹技术可以作为一种有效的身份认证手段，为用户提供更加安全的网络环境。另外，浏览器指纹技术也可以用于在线广告等领域，帮助广告商更准确地定位目标用户，并为用户推荐更加个性化的产品和服务。同时，由于浏览器指纹是基于硬件和软件环境的特征，因此具有较高的稳定性和唯一性，能够有效防止欺诈和冒充等行为。

然而，浏览器指纹技术也存在一些问题和挑战。例如，由于浏览器指纹是基于用户的硬件和软件环境特征，因此在不同设备或浏览器环境下可能会产生不同的指纹，这可能会影响指纹的准确性和可靠性。另外，由于一些浏览器特征是可以通过配置或调整来更改的，因此一些攻击者可能会利用这些漏洞来欺骗浏览器指纹检测系统，从而降低指纹的可信度。

综上所述，浏览器指纹技术具有非常广阔的应用前景，但同时也需要持续进行技术创新和完善，以提高指纹的准确性和可靠性，并防止相关的安全风险。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情

avatar
文章
阅读
粉丝