Web浏览器的设备指纹的常用特征和指标

本文最后更新于2019年3月2日,已超过 1 年没有更新,如果文章内容失效,还请反馈给我,谢谢!

=Start=

缘由:

在介绍完了Web指纹的大体思路和原理之后,这里再整理一下Web指纹的常用特征及其指标,方便提需求和测效果的时候用到。

正文:

参考解答:

常见特征的熵值(熵值越高表示唯一性越低,反之亦然):

特征 熵 (bits)
plugins 15.4
fonts 13.9
user agent 10.0
http accept 6.09
screen resolution 4.83
timezone 3.04
supercookies 2.12
cookies enabled 0.353

 

还有更全的——不同特征在跨浏览器测试中的熵值:

Entropy and Cross-browser Stability by Features

amiunique.org在测试时会收集的一些信息:

  • the User agent header
  • the Accept header
  • the Connection header
  • the Encoding header
  • the Language header
  • the list of plugins
  • the platform
  • the cookies preferences (allowed or not)
  • the Do Not Track preferences (yes, no or not communicated)
  • the timezone
  • the screen resolution and its color depth
  • the use of local storage
  • the use of session storage
  • a picture rendered with the HTML Canvas element
  • a picture rendered with WebGL
  • the presence of AdBlock
  • the list of fonts

收集这些信息时需要用到的一些技术:

  • UserAgent和Accept头这些信息在和网站建立连接时会自动发送过去。The user agent and the accept headers are automatically sent to websites when a connection is initiated.
  • 通过JavaScript可以拿到一些浏览器的特性,比如安装的插件信息。JavaScript gives access to many browser-populated features like the plugins installed on the user’s device.
  • 如果安装了Flash插件,它的API提供了对许多系统特定属性的访问,比如:操作系统的精确版本、字体列表、屏幕分辨率、时区。If the Flash plugin is installed, its rich programming interface (API) provides access to many system-specific attributes: exact version of the operating system, list of fonts, screen resolution, timezone.
  • 在HTML5中通过展示Canvas元素,可以在硬件或软件配置中收集到细微的差异,这要归功于设备之间在图像呈现方面的细微差异。可以检测到最小的像素差。这叫做帆布指纹。Through the display of an HTML5 Canvas element, it is possible to collect small differences in the hardware or in the software configurations, thanks to slight differences in the image rendering between devices. The smallest pixel difference can be detected. This is called canvas fingerprinting .

本地测试clientjs和fingerprint2.js的方法:

新建一个HTML文件,在其中用<script>标签引入相关js文件,然后通过在HTML文件中写js代码或是在console上输入js代码来进行简单的手工测试:

<!-- 以下是 fingerprintjs2 的测试方法 -->
<!-- 测试情况不太乐观,我的Mac上的Chrome和Safari的哈希值不相同。。。 -->

var options = {fonts: {extendedJsFonts: true}, excludes: {userAgent: true}}
var options = {}

if (window.requestIdleCallback) {
    requestIdleCallback(function () {
        Fingerprint2.get(options, function (components) {
            console.log(components) // an array of components: {key: ..., value: ...}
            var values = components.map(function (component) { return component.value })
            console.log(values)
            var murmur = Fingerprint2.x64hash128(values.join(''), 31)
            console.log(murmur)
        })
    })
} else {
    setTimeout(function () {
        Fingerprint2.get(options, function (components) {
            console.log(components) // an array of components: {key: ..., value: ...}
            var values = components.map(function (component) { return component.value })
            console.log(values)
            var murmur = Fingerprint2.x64hash128(values.join(''), 31)
            console.log(murmur)
        })  
    }, 500)
}


<!-- 不延迟,直接打印出来(官方不推荐这么做) -->
var options = {};
Fingerprint2.getV18(options, function (result, components) {
  // result is murmur hash fingerprint
  console.log(result); //a hash, representingyour device fingerprint
  // components is array of {key: 'foo', value: 'component value'}
  console.log(components); // an array of FPcomponents
})


Fingerprint2.get(options, function (components) {
    var values = components.map(function (component) { return component.value })
    console.log(values)
    var murmur = Fingerprint2.x64hash128(values.join(''), 31)
    console.log(murmur)
})



<!-- 以下是 ClientJS 的测试方法 -->

// Create a new ClientJS object
var client = new ClientJS();

// Get the client's fingerprint id
var fingerprint = client.getFingerprint();

// Print the 32bit hash id to the console
console.log(fingerprint);

 

 

参考链接:

=END=

声明: 除非注明,ixyzero.com文章均为原创,转载请以链接形式标明本文地址,谢谢!
https://ixyzero.com/blog/archives/4333.html

10 thoughts on “Web浏览器的设备指纹的常用特征和指标”

  1. 深入理解浏览器原理
    https://mp.weixin.qq.com/s/QqpPGWf3IVEDN1t80CZ06Q
    `
    导语:本文从市面主流的浏览器及相应的内核引擎开始,介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构,用户从启动运行浏览器后,先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成到栅格化,最后完成GPU展示。而页面渲染完成后,浏览器如何响应页面操作事件也进行了深入的介绍。良心推荐!

    本文第二至五部分内容根据 Mariko Kosaka 的英文原版《Inside look at modern web browser》(见参考文献),进行翻译、理解、总结提炼、条理化、加入应用示例、进行相关知识补充扩展而来。

    一、浏览器概论
    1. 浏览器引擎

    1.1 浏览器引擎
    Trident:IE浏览器引擎
    Gecko:Firefox浏览器引擎
    Presto:Opera浏览器引擎
    Webkit:Safari,Google Chrome浏览器引擎。

    1) Chromium:基于webkit,08年开始作为Chrome的引擎,Chromium浏览器是Chrome的实验版,实验新特性。
    2) Webkit2:2010年随OS X Lion一起面世。WebCore层面实现进程隔离与Google的沙箱设计存在冲突。
    3) Blink:基于Webkit2分支,13年谷歌开始作为Chrome 28的引擎集成在Chromium浏览器里。Android的WebView同样基于Webkit2。

    1.2 微软浏览器

    2. 浏览器架构
    2.1 多进程架构
    2.2 Webkit(Blink)架构

    二、Chrome的多进程架构
    三、页面导航过程
    四、页面渲染
    五、页面操作
    六、小结
    浏览器是一个复杂的系统,这里介绍的只是冰山一角,chromium项目也在不停地迭代更新,所以可能一段时间后,某些功能已经发生了变化。更加细节及最新的可以关注一下最新的chromium源码。
    `
    1、Inside look at modern web browser
    https://developers.google.com/web/updates/2018/09/inside-browser-part1

    2、V8
    https://v8.dev

    3、JavaScript module
    https://v8.dev/features/modules

    4、Gpu-accelerated-compositing
    https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

    5、Chrominum-design-documents
    https://www.chromium.org/developers/design-documents

    6、How Blink works
    https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg/edit

    7、Life of a Pixel 2018
    https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit

  2. 详细判断浏览器运行环境
    https://segmentfault.com/a/1190000020716933
    `
    # 使用场景
    判断用户浏览器是桌面端还是移动端,显示对应的主题样式
    判断用户浏览器是Android端还是iOS端,跳转到对应的App下载链接
    判断用户浏览器是微信端还是H5端,调用微信分享或当前浏览器分享
    获取用户浏览器的内核和载体,用于统计用户设备平台分布区间
    获取用户浏览器的载体版本,用于提示更新信息
    其实还有很多使用场景,就不一一举例了
    `
    https://github.com/JowayYoung/juejin-code/blob/master/browser-type.js

  3. h5页面获取网络状态总结 – 网络状态API
    https://blog.csdn.net/amihui/article/details/93174155

    网络状况 API
    https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
    https://developer.mozilla.org/zh-CN/docs/Web/API/Network_Information_API
    `
    网络状态 API 可以获取到系统的网络连接信息,比如说连接方式是 WiFi 还是蜂窝。应用程序可以根据此信息为用户展现不同清晰度的内容。该 API 是由 NetworkInformation 接口和 Navigator 接口上新增的一个 connection 属性组成的。
    当前的功能和支持有限。
    `
    https://caniuse.com/#feat=netinfo

    1. 刚才我又去看了一下原文,好像是你说的意思。但,从实际来看「cookies enabled」的唯一性明显要比「user agent」的识别效果好。所以这里我认为熵值越高表示唯一性越低。

发表评论

电子邮件地址不会被公开。 必填项已用*标注