狠狠干很很操,色播在线观看,九九视频九九

FingerprintJS中有意思的知識(shí)

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年8月4日 0:56 本文熱度 1202

FingerprintJS

之前有后端小哥問道，前端可否生成瀏覽器唯一標(biāo)識(shí)UUID，發(fā)給后端處理。當(dāng)時(shí)我想都不用想，直接拒絕(手動(dòng)狗頭)。后來想了想，這是個(gè)不錯(cuò)了研究題材，就google了一把，于是乎發(fā)現(xiàn)了這個(gè)寶藏庫(kù)(FingerprintJS)。它能夠生成瀏覽器唯一標(biāo)識(shí)來區(qū)別不同的用戶，pro版本的識(shí)別率高達(dá)99.5%(然而開源版本只有60%,本文簡(jiǎn)述的是開源版本)。

FingerprintJS 原理

FingerprintJS 的實(shí)現(xiàn)思路挺簡(jiǎn)單的，首先找出能區(qū)分瀏覽器不同的部分，我們最常見的就是通過navigator來獲取瀏覽器的詳細(xì)信息了。而 FingerprintJS 除了使用 navigator, 還用到了canvas指紋，字體寬高等其他方面，具體看下面代碼：

// FingerprintJS 細(xì)化了各個(gè)不同的部分
export const sources = {
  // Expected errors and default values must be handled inside the functions. Unexpected errors must be thrown.
  osCpu: getOsCpu,
  languages: getLanguages,
  colorDepth: getColorDepth,
  deviceMemory: getDeviceMemory,
  screenResolution: getScreenResolution,
  availableScreenResolution: getAvailableScreenResolution,
  hardwareConcurrency: getHardwareConcurrency,
  timezoneOffset: getTimezoneOffset,
  timezone: getTimezone,
  sessionStorage: getSessionStorage,
  localStorage: getLocalStorage,
  indexedDB: getIndexedDB,
  openDatabase: getOpenDatabase,
  cpuClass: getCpuClass,
  platform: getPlatform,
  plugins: getPlugins,
  canvas: getCanvasFingerprint,
  // adBlock: isAdblockUsed, // https://github.com/fingerprintjs/fingerprintjs/issues/405
  touchSupport: getTouchSupport,
  fonts: getFonts,
  audio: getAudioFingerprint,
  pluginsSupport: getPluginsSupport,
  productSub: getProductSub,
  emptyEvalLength: getEmptyEvalLength,
  errorFF: getErrorFF,
  vendor: getVendor,
  chrome: getChrome,
  cookiesEnabled: areCookiesEnabled,
}

FingerprintJS 把各個(gè)部分當(dāng)成組件分別實(shí)現(xiàn)，然后使用loadBuiltinSources方法獲取所有組件，接著使用componentsToCanonicalString遍歷組件的返回值，系列化拼接成字符串，最后用x64hash128方法把字符串轉(zhuǎn)成一個(gè)獨(dú)一無二的hash值。

上面的一大坨組件，其實(shí)大部分都是查詢navigator對(duì)象的，這里就不展開了，除此之外，canvas指紋，字體差和所用到了hash算法倒是有點(diǎn)意思。

canvas指紋

canvas指紋是指：通過canvas接口在頁(yè)面上繪制一個(gè)隱藏的圖像，在不同的系統(tǒng)，瀏覽器中最終的圖像是存在像素級(jí)別的差別的，主要是因?yàn)椴僮飨到y(tǒng)各自使用了不同的設(shè)置和算法來進(jìn)行抗鋸齒和子像素渲染操作。即使相同的繪圖操作，產(chǎn)生的圖片數(shù)據(jù)的CRC檢驗(yàn)也不相同。(CRC是指使用canvas.toDataURL返回的base64數(shù)據(jù)中，最后一段32位的驗(yàn)證碼)。

canvas指紋并不少見，除此之外，還有使用音頻指紋，甚至使用WebGL指紋和WebGL指紋的。音頻指紋跟canvas指紋的原理差不多，都是利用硬件或軟件的差異，前者生成音頻，后者生成圖片，然后計(jì)算得到不同哈希值來作為標(biāo)識(shí)。音頻指紋的生成方式有兩種：

生成音頻信息流(三角波)，對(duì)其進(jìn)行FFT變換，計(jì)算SHA值作為指紋
生成音頻信息流（正弦波），進(jìn)行動(dòng)態(tài)壓縮處理，計(jì)算MD5值 FingerprintJS 也使用了音頻指紋，使用的貌似是方法一，具體有興趣可以看一下代碼

系統(tǒng)字體

FingerprintJS 通過getFonts()方法獲取系統(tǒng)支持的字體，原理不復(fù)雜，大致分為下面的步驟：

定義字體文案const testString = 'mmMwWLliI0O&1';字體大小const textSize = '48px';基本的fontFamilyconst baseFonts = ['monospace', 'sans-serif', 'serif'];和待檢測(cè)字體列表fontList(定義了很多字體類型)
分別遍歷baseFonts和fontList，生成span標(biāo)簽，并設(shè)置對(duì)應(yīng)的fontFamily，注意fontList遍歷的時(shí)候，需要同時(shí)遍歷baseFonts，這樣設(shè)置fontFamily的時(shí)候可以設(shè)置默認(rèn)的baseFonts字體

// creates a span and load the font to detect and a base font for fallback
const createSpanWithFonts = (fontToDetect: string, baseFont: string) => {
  return createSpan(`'${fontToDetect}',${baseFont}`)
}

比較fontList和baseFonts的字體文案在不同的fontFamily下的寬高，如果不相等說明支持該字體，如果相等，說明系統(tǒng)不支持fontList的字體，使用了默認(rèn)的baseFonts的字體

// checks if a font is available
const isFontAvailable = (fontSpans: HTMLElement[]) => {
  return baseFonts.some(
    (baseFont, baseFontIndex) =>
      fontSpans[baseFontIndex].offsetWidth !== defaultWidth[baseFont] ||
      fontSpans[baseFontIndex].offsetHeight !== defaultHeight[baseFont],
  )
}

murmurHash3

x64hash128使用的hash算法是murmurHash3。代碼比較復(fù)雜，有興趣可以去琢磨一下，這里只做簡(jiǎn)單介紹。

MurmurHash是一種經(jīng)過廣泛測(cè)試且速度很快的非加密哈希函數(shù)。它有Austin Appleby于2008年創(chuàng)建，并存在多種變體，名字來自兩個(gè)基本運(yùn)算，即multiply(乘法)和rotate(旋轉(zhuǎn))（盡管該算法實(shí)際上使用shift和xor而不是rotate）。

MurmurHash3可以產(chǎn)生32位或128位哈希，舊版本MurmurHash2產(chǎn)生32位或64位值，MurmurHash2A變體添加了Merkel-Damgard構(gòu)造，以便可以逐步調(diào)用它。MurmurHash64A針對(duì)64位處理器進(jìn)行了優(yōu)化，針對(duì)32位處理器進(jìn)行MurmurHash64B優(yōu)化。

該文章在 2023/8/4 0:59:24 編輯過

關(guān)鍵字查詢

知識(shí)

意思

erp

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。