浏览器指纹-nojavascript-fingerprinting

关于浏览器指纹

指纹估计每个人都有，照目前技术来看，应该是唯一的。浏览器指纹，也是同样的道理，针对于每一个浏览器一个唯一的记录或者标记。

通过收集浏览器的一些信息，例如：版本、插件、webgl、canvas、cookie、storage等等的数据，来生成一个相对唯一的ID，通常都是用JavaScript来完成，例如常见的js库：FingerprintJS

不使用JavaScript

使用JavaScript来获取浏览器指纹都比较常见了，今天要介绍一种，不需要JavaScript也能生成指纹的方式。 来源： No-JS fingerprinting。

一下内容基本上翻译了一下原文。可能有误。

网站中简单描述了其实现原理。

实现方式

在不使用cookie、storage的情况下，使用语言、字体等一些信息来创建一个浏览器指纹。即使在隐身模式下也可以正常工作。

收集了的数据项。

• CSS hack to tell Chromium-based browsers from other browsers
  CSS @supports(-webkit-app-region: inherit) { .selector { } }
  Value Yes

• CSS hack to tell Firefox from other browsers
  CSS @supports(-moz-appearance: inherit) { .selector { } }
  Value No

• CSS hack to tell Safari from other browsers
  CSS @supports(-apple-pay-button-style: inherit) { .selector { } }
  Value No

• CSS hack to tell whether the Safari is mobile
  CSS @supports(-webkit-touch-callout: inherit) { .selector { } }
  Value No

• CSS hack to tell macOS Firefox from other Firefox versions
  CSS @supports(-moz-osx-font-smoothing: inherit) { .selector { } }
  Value No

• CSS hack to tell Firefox from Tor
  CSS @supports(accent-color: inherit) { .selector { } }
  Value Yes

• Any hover
  CSS @media (any-hover: …) { }
  Value hover

• Hover
  CSS @media (hover: …) { }
  Value hover

• Any pointer
  CSS @media (any-pointer: …) { }
  Value fine

• Pointer
  CSS @media (pointer: …) { }
  Value fine

• Color bitness
  CSS @media (color: …) { }
  Value 8

• Color gamut
  CSS @media (color-gamut: …) { }
  Value srgb

• Forces colors
  CSS @media (forced-colors: …) { }
  Value none

• Inverted colors
  CSS @media (inverted-colors: …) { }
  Value (undefined)

• Monochrome
  CSS @media (monochrome: …) { }
  Value 0

• Dark/light mode
  CSS @media (prefers-color-scheme: …) { }
  Value light

• Contrast preference
  CSS @media (prefers-contrast: …) { }
  Value no-preference

• Reduced motion
  CSS @media (prefers-reduced-motion: …) { }
  Value no-preference

• Screen dynamic range
  CSS @media (dynamic-range: …) { }
  Value standard

• Pixel density
  CSS @media (-webkit-min-device-pixel-ratio: …) and (-webkit-max-device-pixel-ratio: …) { }
  Value ≥2, <2.3

• Screen width
  CSS @media (min-device-width: …) and (max-device-width: …) { }
  Value ≥2370px, <2600px

• Screen height
  CSS @media (min-device-height: …) and (max-device-height: …) { }
  Value ≥1340px, <1470px

• “Roboto” font
  Font name Roboto
  Value No

• “Ubuntu” font
  Font name Ubuntu
  Value No

• “Calibri” font
  Font name Calibri
  Value No

• “MS UI Gothic” font
  Font name MS UI Gothic
  Value No

• “Gill Sans” font
  Font name Gill Sans
  Value Yes

• “Helvetica Neue” font
  Font name Helvetica Neue
  Value Yes

• “Arimo” font
  Font name Arimo
  Value No

• Language
  HTTP header name Accept-Language
  Value en

• Accepted encoding
  HTTP header name Accept-Encoding
  Value gzip, deflate, br

• Accept header for web page
  HTTP header name Accept
  Value 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 header for image
  HTTP header name Accept
  Value image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8

• Accept header for stylesheet
  HTTP header name Accept
  Value text/css,/;q=0.1

这个数据包含了一些css的支持情况，通过css来判断获取设备的尺寸，还有一些请求头的相关数据等等，其实能应付很大一部分的场景。

当然也不是那么的准确，例如：我的mac 外接了一个显示器，当调整系统设置里面的缩放时，就会生成两个不同的ID。 在 screen width 和 screen height 这两个数据就发生了变化。