1. 设备指纹技术介绍

1.1 第一代 —— cookie / evercookie

1.2 第二代 —— 浏览器指纹技术

1.3 第三代 —— 发现设备后面的人

2. 指纹的分类

2.1 普通指纹 —— 通过 http 拿到浏览器信息

2.2 高级指纹 —— 通过多种信息计算出用户uid

3. Canvas 指纹追踪技术

3.1 技术原理

3.2 实现过程

3.3 防止被 Canvas 指纹追踪

4. 参考文章

1. 设备指纹技术介绍

1.1 第一代 —— cookie / evercookie

用户登陆后，服务端在客户端设置标志，通过 cookie / evercookie 获取用户信息（可被禁用、无法跨域）

1.2 第二代 —— 浏览器指纹技术

navigator通过 js 获取操作系统、分辨率、像素比等等一系列信息，可供服务端归类用户

通过浏览器的可见配置、设置等有辨识度的信息（比如语言、UA、地理位置等），经过一系列计算可以获取到一个唯一值 —— 浏览器指纹

收集用户浏览器指纹并记录用户操作，是一个有价值的行为

举个栗子：我喜欢浏览美食类视频，即使我不登陆账户信息，禁用 cookie，浏览器指纹仍然可以锁定我的身份，记录我的兴趣爱好，进而在下次打开网站时推送个性化广告

但是不能仅仅依靠 navigator 哦

1.3 第三代 —— 发现设备后面的人

通过收集用户的行为、习惯来为用户建立特征值甚至模型，将用户进行归并

2. 指纹的分类

2.1 普通指纹 —— 通过 http 拿到浏览器信息

普通指纹：容易被发现，容易被修改，例如 http 的 header

Accept-Language —— 包含了浏览器的语言信息，通过操作系统或浏览器设置的语言生成；一些网站会直接忽略掉，通过用户IP 判断地区呈现不同的网页的语言

User-Agent —— 包含了浏览器和操作系统的信息，例如我当前使用的是 Windows10、106 版本的 Chrome；即使在头部刻意伪造了UA，网页也可以通过navigator.userAgent 拿到真实 UA

可通过下方网站，查看当前浏览器 http headers 信息

https://httpbin.org/headershttps://httpbin.org/headers

{headers: {Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",Accept-Encoding: "gzip, deflate, br",Accept-Language: "zh-CN,zh;q=0.9",Host: "httpbin.org",Sec-Ch-Ua: ""Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"",Sec-Ch-Ua-Mobile: "?0",Sec-Ch-Ua-Platform: ""Windows"",Sec-Fetch-Dest: "document",Sec-Fetch-Mode: "navigate",Sec-Fetch-Site: "none",Sec-Fetch-User: "?1",Upgrade-Insecure-Requests: "1",User-Agent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36",X-Amzn-Trace-Id: "Root=1-63534c12-209269e506c472a85e88c574"}
}

也可通过下方网站，拿到更详细的浏览器信息（IP地址、地理信息等）

What browser? My browser? Is my browser out of date?What browser do I have? Find out my browser, check that my browser is up to date and what my settings are.https://www.whatismybrowser.com/

Fingerprint Pro - Formerly FingerprintJS - Device fingerprinting APIFingerprint Pro is the 99.5% accurate device fingerprinting solution. FingerprintJS is the top open-source browser fingerprinting library. Prevent fraud, spam, and account takeovers. Available for web, iOS, and Android.https://fingerprint.com/

2.2 高级指纹 —— 通过多种信息计算出用户uid

信息熵（entropy）是接收的每条消息中，所包含信息的平均量，熵越高，则传输的信息越多

除了通过 http 可以拿到浏览器信息外，其他方式也可以拿到，参考下面的文章

Cover Your Tracks | Abouthttps://coveryourtracks.eff.org/about

每个浏览器的用户代理字符串
浏览器发送的HTTP ACCEPT标头
屏幕分辨率和色彩深度
系统设置为时区
浏览器中安装的浏览器扩展/插件，例如Quicktime，Flash，Java或Acrobat，以及这些插件的版本
计算机上安装的字体，由Flash或Java报告。
浏览器是否执行JavaScript脚本
浏览器是否能种下各种cookie和“超级cookie（super cookies）”
通过Canvas指纹生成的图像的哈希
WebGL指纹生成的图像的哈希
是否浏览器设置为“Do Not Track”
系统平台（例如Win32，Linux x86）
系统语言（例如，cn,en-US）
浏览器是否支持触摸屏

上面列出来的信息，有各自的权重，通过一定的计算规则，可以生成唯一的用户uid

权重信息：

Variable	Entropy (bits)
user agent	10.0
plugins	15.4
fonts	13.9
video	4.83
supercookies	6.09
timezone	3.04
cookies enabled	0.353

3. Canvas 指纹追踪技术

通过前面的内容，我们应该能意识到，navigator 并不能对客户端进行唯一判定

3.1 技术原理

Canvas 是 HTML5 新特性，可以用于绘制图片，也可以用于追踪用户

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

因此，使用 Canvas 调用 toDataURL 转换 base64 图片，会通过设备，操作系统，浏览器三种信息生成唯一标识，重复的概率很小

3.2 实现过程

const createCanvasUuid = () => {// 创建 canvas 画布const canvas = document.createElement('canvas');// 2Dconst ctx = canvas.getContext('2d');// 即将绘制的文字const txt = 'Lyrelion';ctx.fillText(txt, 10, 10);// 导出绘制的图片console.log('base64 图片中包含了 设备、系统、浏览器标识 ===', canvas.toDataURL());
};
createCanvasUuid();

生成效果：

查看自己的 canvas 指纹信息

Canvas Fingerprinting - BrowserLeaksBrowser Fingerprinting with no user agent identifiers, only through the HTML5 Canvas element. The method is based on the fact that the same canvas-code can produce different pixels on a different web browser, depending on the system on which it was executed.https://browserleaks.com/canvas

如下图所示，在 901701 份样本中，只有 2157 个样本，和我的 Canvas 指纹一样

3.3 防止被 Canvas 指纹追踪

Canvas 指纹追踪的优缺点并存：

可能暴露用户浏览网页的行为，如果无法将用户和真人联系起来，产生的价值有限；
可以防止恶意刷票等行为；

预防措施：

【推荐】安装某歌浏览器插件 —— CanvasFingerprintBlock，每次往 Canvas 画布里面注入一个随机噪音，从而影响 base64 加密结果（图片数据的CRC校验结果）
使用 Tor、LoginBox 等指纹仿关联浏览器，每次往 Canvas 画布里面注入一个固定噪音，从而影响 base64 加密结果（图片数据的CRC校验结果）

4. 参考文章

浏览器指纹追踪技术简述 - 掘金如果遇到过以上类似的场景，这时候就要考虑是不是浏览器指纹在其中发挥作用。 “浏览器指纹”是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法，浏览器指纹就像我们人手上的指纹一样，具有个体辨识度，只不过现阶段浏览器指纹辨别的是浏览器。人手上的指纹之所以具有唯一性，…https://juejin.cn/post/6844903970180169742https://www.jianshu.com/p/e2efc4c070ebhttps://www.jianshu.com/p/e2efc4c070eb

Canvas 指纹追踪技术相关推荐

2.5代指纹追踪技术—跨浏览器指纹识别
01. 研究背景在如今,做安全防御已经不仅仅是被动的等着攻击者攻击,作为防御方,有越来越多的方法去反击攻击者,甚至给攻击者一些威胁. 设备指纹技术是一种长久有效的追踪技术,即使攻击者挂再多 vpn, ...
指纹浏览器指纹追踪技术：指纹浏览器开源代码，浏览器指纹js插件
指纹追踪技术(指纹浏览器)的前世今生: 1)．第一代第一代指纹追踪是cookie这类的服务端在客户端设置标志的追踪技术,evercookie 是 cookie 的加强版. . 第二代第二代指纹追踪 ...
浏览器指纹追踪技术，如何完整修改浏览器指纹？
来源 | http://www.fly63.com/article/detial/10479 什么是浏览器指纹 "浏览器指纹"是一种通过浏览器对网站可见的配置和设置信息来跟踪Web ...
什么是浏览器指纹追踪(浏览器指纹追踪修改,浏览器指纹追踪技术)
浏览器指纹追踪现实世界可通过体貌特征.身份证件.生物特征(如指纹信息)等手段对用户进行唯一性识别.Web 世界主要通过 Cookies 技术.浏览器指纹.WebRTC 等技术进行识别. 典型追踪技术 ...
反浏览器指纹追踪（反浏览器指纹追踪技术）
浏览器指纹追踪是一种在网络上追踪用户信息的方法.而在大数据时代,更多的人不希望自己的信息被过多收集.为了反制浏览器指纹追踪行为,反浏览器追踪技术也在不断发展. 什么是反浏览器指纹追踪技术? 浏览器指纹 ...
浏览器指纹追踪技术有哪些
当我们在进行浏览器网站时,都是会留下痕迹的,哪怕是打开了隐私浏览,运营商也是可以看到相关的浏览数据信息的,那浏览器指纹是如何被追踪到的呢? Cookie Cookie是目前浏览器最常用的一种方式,当我 ...
h5调用指纹识别_HTML5 + JS 网站追踪技术：帆布指纹识别 Canvas FingerPrinting Universally Unique Identifier，简称UUID...
一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动.Cookie ...
取代cookie的网站追踪技术：”帆布指纹识别”初探
博文作者:rices 发布日期:2014-07-28 阅读次数:4120 博文内容: [前言] 一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集 ...
h5调用指纹识别_基于HTML Canvas实现“指纹识别”技术，canvas指纹
基于HTML Canvas实现"指纹识别"技术,canvas指纹作者:zhanhailiang 日期:2015-01-31 说明所谓指纹识别是指为每个设备标识唯一标识符(以下简 ...

Canvas 指纹追踪技术

1. 设备指纹技术介绍

1.1 第一代 —— cookie / evercookie

1.2 第二代 —— 浏览器指纹技术

1.3 第三代 —— 发现设备后面的人

2. 指纹的分类

2.1 普通指纹 —— 通过 http 拿到浏览器信息

2.2 高级指纹 —— 通过多种信息计算出用户uid

3. Canvas 指纹追踪技术

3.1 技术原理

3.2 实现过程

3.3 防止被 Canvas 指纹追踪

4. 参考文章

Canvas 指纹追踪技术相关推荐

最新文章

热门文章