大家知道有些網站是會員制,而且對會員所用的機器會有一個綁定,這就意味着一個用戶只能在固定的機器上或瀏覽器上登陸,如果換了電腦或瀏覽器那很不幸,請聯系商家解綁,類似的還有某些企業通過下載終端的方式進行綁定,當然這樣對用戶體驗有很大的影響,總而言之都是為了保護企業的利益,你懂的!言歸正傳,既然說到綁定機器,那他們是怎么實現的呢?當然方法很多,今天我們說一下通過獲取瀏覽器指紋的方式來識別用戶是否更換了機器(嘗試用js獲取用戶物理地址的還是放棄吧,IE可能還給你點機會, 反正我是不想再研究了,能力有限).
下邊我們直接用js獲取用戶瀏覽器指紋,先上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
<script>
function finger() {
let excludes = {};
excludes.audio = true;
excludes.fontsFlash = true;
excludes.webgl = true;
excludes.canvas = true;
excludes.enumerateDevices = true;
let options = {excludes: excludes};
Fingerprint2.get(options, function (components) {
const values = components.map(function (component) {
return component.value
});
const murmur = Fingerprint2.x64hash128(values.join(''), 31);
alert(murmur)
});
}
</script>
</head>
<body>
<button onclick="finger()">點擊</button>
</body>
</html>
代碼很簡單,有點前端基礎的都能看懂,這里主要是利用了前端fingerprint2這個庫來實現,這里我主要通過audio,fontsFlash,webgl,canvas,enumerateDevices這幾項來識別的,返回的是一個MD5值,可以嘗試清除緩存刷新,發現它是不會變化的,如果換個瀏覽器或換台機器,它會返回不同的值,當然配置項不止這幾個,可以根據自己的實際情況配置,獲取到用戶瀏覽器指紋再加上用戶的ip就可以防止用戶使用代理ip對信息進行采集,具體實現也不多說了.
- userAgent: navigator.userAgent
- language: 語言
- colorDepth: 返回目標設備或緩沖器上的調色板的比特深度 screen.colorDepth
- deviceMemory: 以千兆字節為單位返回設備內存量。該值是通過舍入到最接近的2的冪並將該數除以1024而給出的近似值
- pixelRatio: 像素比 devicePixelRatio
- hardwareConcurrency: navigator.hardwareConcurrency 返回可用於運行在用戶的計算機上的線程的邏輯處理器的數量
- screenResolution: 檢測屏幕寬高，並根據屏幕方向矯正返回值[width,height]
- availableScreenResolution: 返回屏幕分辨率[width,height]，無頭瀏覽器無法獲取
- timezoneOffset: 返回從當前區域設置（主機系統設置）到UTC的時區差異（以分鍾為單位）
- timezone: 時區
- sessionStorage: 是否支持 sessionStorage，不支持時返回錯誤
- localStorage: 是否支持 localStorage
- indexedDb: 是否支持 indexedDb
- addBehavior :此時可能未定義body或以編程方式刪除
- openDatabase: 返回是否支持 Web SQL
- cpuClass: 返回瀏覽器系統的 CPU 等級,一般無法獲取
- platform: 返回表示瀏覽器平台的字符串,該規范允許瀏覽器始終返回空字符串，因此不要依賴此屬性來獲得可靠的答案
- doNotTrack: 返回用戶的“不跟蹤”設置。如果用戶請求不被網站，內容或廣告跟蹤，則為“1”
- plugins: 返回瀏覽器安裝的插件列表
- canvas: 如果瀏覽器支持canvas則返回生成baes64數據
- webgl: 返回瀏覽器對webgl繪圖協議的支持情況匯總
- webglVendorAndRenderer: 返會顯卡型號相關信息
- adBlock: 返回是否安裝去廣告插件
- hasLiedLanguages: 返回用戶是否改變了首選語言
- hasLiedResolution: 返回用戶是否改變了分辨率
- hasLiedOs: 返回用戶是否改變了操作系統
- hasLiedBrowser: 返回用戶是否改變了瀏覽器
- touchSupport: 返回最大觸摸點數，是否支持touch，是否支持ontouchstart事件
- fonts: 返回從64種字體種篩選出的可用字體
- fontsFlash: Flash字體枚舉,如果沒有swfobject，不會觸發
- audio: 返回音頻指紋
- enumerateDevices: navigator.mediaDevices 請求可用媒體輸入和輸出設備的列表，例如麥克風，相機，耳機等