推薦一個(gè)神器，可一鍵生成瀏覽器指紋！
下面是兩個(gè)我們平時(shí)上網(wǎng)經(jīng)常會(huì)遇到的場景：
場景一：在網(wǎng)站上瀏覽某個(gè)商品，了解了相關(guān)的商品信息，但并沒有下單購買，甚至沒有進(jìn)行登錄操作。過兩天用同臺電腦訪問其他網(wǎng)站的時(shí)候卻發(fā)現(xiàn)很多同類商品的廣告。
場景二：在某博客中你有多個(gè)小號（水軍），這些小號的存在就是為了刷某個(gè)帖子的熱度或者進(jìn)行輿論引導(dǎo)，又或者純粹進(jìn)行流量交易，即便你在切換賬號的時(shí)候清空了cookie、本地緩存，重開路由器甚至使用vpn來進(jìn)行操作，你覺得自己足夠小心，并盡可能提高水軍的真實(shí)性，但是管理人員可能還是知道這是同一個(gè)人在操作，從而被打擊。
在遇到這些場景的時(shí)候，你是不是會(huì)感到疑惑呢？或者你在研發(fā)中也要用到類似的功能？那么你可以首先考慮一下 瀏覽器指紋。
什么是瀏覽器指紋
“瀏覽器指紋” 是一種通過瀏覽器對網(wǎng)站可見的配置和設(shè)置信息來跟蹤 Web 瀏覽器的方法，瀏覽器指紋就像我們?nèi)耸稚系闹讣y一樣，每個(gè)人擁有一份接近于獨(dú)一無二的配置。與 Cookie 和本地存儲(chǔ)不同，瀏覽器指紋可以做到在隱身/隱私模式下甚至瀏覽器數(shù)據(jù)被清除都保持不變。
怎么生成一個(gè)瀏覽器指紋？
如果單單拿出一個(gè)配置來講可能很多人和你擁有一樣的配置，比如下面的：
系統(tǒng)版本： 我的系統(tǒng)版本是 Mac OS X 10_14_6 大約 11.91% 的人與我的配置相同 大約每 8 個(gè)人中有一個(gè)和我配置相同 Chrome 版本： 我使用的瀏覽器是 Chrome，并且版本是：81.0.4044.92 大約 0.08% 的人與我的配置相同 大約每 1250 個(gè)人中有一個(gè)和我配置相同 UTC+8 時(shí)間： 我的UTC+8 時(shí)間是 2020.4.15 23:00:00 大約 2.30% 的人與我的配置相同 大約每 43 個(gè)人中有一個(gè)和我配置相同
如果單獨(dú)看每個(gè)配置，那他們都不能作為你獨(dú)一無二的特征，但是綜合起來看呢？比如就看這三項(xiàng)，三項(xiàng)的配置與你都相同的人的概率就會(huì)大大減小了。以上只是一些簡單的特征，比如系統(tǒng)版本，瀏覽器版本，這些只需要一個(gè)簡單的 navigator.userAgent 屬性就可以拿到。
像這樣的屬性還有非常多個(gè)，他們可能來自 HTTP Header、Javascript attributes、瀏覽器插件等等，甚至還有一些和硬件相關(guān)的 API ，例如 WebGL 或者 Canvas 圖像繪制的一些 API，在繪圖時(shí)不同瀏覽器使用了不同的圖形處理引擎、不同的圖片導(dǎo)出選項(xiàng)、不同的默認(rèn)壓縮級別、對抗鋸齒、次像素渲染等算法也不同，最終結(jié)果可能取決于進(jìn)行計(jì)算的硬件設(shè)備。
這些屬性都組合起來那么你就擁有了一個(gè)獨(dú)一無二的指紋。
fingerprintjs
FingerprintJS 是一個(gè)瀏覽器指紋庫，可通過查詢?yōu)g覽器屬性并從中計(jì)算出散列的訪問者標(biāo)識符，從而生成一個(gè)用戶指紋。
你可以在 https://fingerprintjs.github.io/fingerprintjs/ 查看 一個(gè)指紋 DEMO
簡單看了下源碼，發(fā)現(xiàn)了它主要提取了以下幾個(gè)基本能力：
IP地址：部分網(wǎng)站訪問者通過VPN等方式隱藏真實(shí)網(wǎng)絡(luò)出口IP，browserleaks中提到了一種基于WebRTC的方案，通過發(fā)送P2P連接，繞過NAT，獲取真實(shí)的出口IP地址； 聲卡信息：硬件相關(guān)參數(shù)，通過navigator對象的方法可以獲取，相關(guān)信息包括音頻設(shè)置和硬件特征指紋； TLS信息：提取web瀏覽器的SSL/TLS功能，確定支持的TLS協(xié)議和密碼套件，并標(biāo)記它們中是否有薄弱或不安全的，顯示支持的TLS擴(kuò)展和密鑰交換組的列表。利用這些數(shù)據(jù)，它以JA3格式計(jì)算TLS指紋； 瀏覽器信息：目前方案提供了Useragent信息，容易被篡改，可結(jié)合canvas信息、Useragent等信息，進(jìn)行關(guān)聯(lián)判斷，識別出真正的客戶端信息及相關(guān)的版本數(shù)據(jù)。
目前瀏覽器的支持情況：
「Internet Explorer」 11 (see the section below) 「Edge」 18 and 85+ 「Chrome」 42+ 「Firefox」 48+ 「Desktop Safari」 11.1+ 「Mobile Safari」 9.3+ 「Samsung Internet」 11.1+ 「Android Browser」 4.1+ (see the section below)
它的使用方法也非常簡單：
通過 CDN 引用
<script>
function initFingerprintJS() {
// Initialize an agent at application startup.
const fpPromise = FingerprintJS.load()
// Get the visitor identifier when you need it.
fpPromise
.then(fp => fp.get())
.then(result => {
// This is the visitor identifier:
const visitorId = result.visitorId
console.log(visitorId)
})
}
</script>
<script
async
src="http://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"
onload="initFingerprintJS()"
></script>
通過 NPM 安裝
npm i @fingerprintjs/fingerprintjs
# or
yarn add @fingerprintjs/fingerprintjs
import FingerprintJS from '@fingerprintjs/fingerprintjs'
// Initialize an agent at application startup.
const fpPromise = FingerprintJS.load()
;(async () => {
// Get the visitor identifier when you need it.
const fp = await fpPromise
const result = await fp.get()
// This is the visitor identifier:
const visitorId = result.visitorId
console.log(visitorId)
})()
目前這個(gè)庫是開源的，即使用不到也可以翻翻代碼學(xué)習(xí)學(xué)習(xí)，挺有意思的～
https://github.com/fingerprintjs/fingerprintjs
抖音前端正急缺人才，如果你想加入我們，歡迎加我微信和我聯(lián)系。另外如果你想加入前端、面試、理財(cái)?shù)冉涣魅海蛘吣阌腥魏纹渌虑橄牒臀医涣饕部梢蕴砑游业膫€(gè)人微信 ConardLi 。
文中如有錯(cuò)誤，歡迎在后臺和我留言，如果這篇文章幫助到了你，歡迎點(diǎn)贊、在看和關(guān)注。你的點(diǎn)贊、在看和關(guān)注是對我最大的支持！
點(diǎn)贊、在看支持作者??