昨天簡單介紹過幾個瀏覽器指紋信息的包，以下簡單使用下
browser_fingerprint
browser_fingerprint 是actionhero 開發的，屬於一個服務器端的處理，如果使用過里邊actionhero會發現響應li bian直接包含了一個fingerprint
- 參考代碼
const http = require("http");
const port = 8080;
const { BrowserFingerprint } = require("browser_fingerprint");
// these are the default options
const options = {
cookieKey: "__browser_fingerprint",
toSetCookie: true,
onlyStaticElements: true,
settings: {
path: "/",
expires: 3600000,
httpOnly: null,
},
};
const fingerPrinter = new BrowserFingerprint(options);
http
.createServer((req, res) => {
let { fingerprint, elementsHash, headersHash } = fingerPrinter.fingerprint(
req
);
headersHash["Content-Type"] = "text/plain"; // append any other headers you want
res.writeHead(200, headersHash);
let resp = `Your Browser Fingerprint: ${fingerprint} \r\n\r\n`;
for (let i in elementHash) {
resp += `Element ${i}: ${elementHash[i]}\r\n`;
}
res.end(resp);
console.log(
"request from " +
req.connection.remoteAddress +
", fingerprint -> " +
fingerprint
);
})
.listen(port);
console.log(`server running at http://127.0.0.1:${port}`);
- 效果
fingerprintjs
這個是一個專門搞saas服務的一個開源版本，使用簡單
- 參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demoapp</title>
</head>
<body>
<div id="id"></div>
<script>
// Initialize the agent at application startup.
// You can also use https://openfpcdn.io/fingerprintjs/v3/esm.min.js
const fpPromise = import('./v3.js')
.then(FingerprintJS => FingerprintJS.load({debug:true}))
// Get the visitor identifier when you need it.
fpPromise
.then(fp => fp.get())
.then(result => {
console.log(result.visitorId)
document.getElementById("id").innerHTML=result.visitorId;
} )
</script>
</body>
</html>
- 訪問效果
注意構建使用了parcel
clientjs
使用了parcel 構建
- 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demoapp</title>
</head>
<body>
<h>fingerprintjs:</h>
<div id="id"></div>
<h>clientjs:</h>
<div id="id2"></div>
<script>
// Initialize the agent at application startup.
// You can also use https://openfpcdn.io/fingerprintjs/v3/esm.min.js
const fpPromise = import('./v3.js')
.then(FingerprintJS => FingerprintJS.load({ debug: true }))
// Get the visitor identifier when you need it.
fpPromise
.then(fp => fp.get())
.then(result => {
console.log(result.visitorId)
document.getElementById("id").innerHTML = result.visitorId;
})
</script>
<script type="module">
import { ClientJS } from 'clientjs';
// Create a new ClientJS object
const client = new ClientJS();
// Get the client's fingerprint id
const fingerprint = client.getFingerprint();
// Print the 32bit hash id to the console
document.getElementById("id2").innerHTML = fingerprint;
</script>
</body>
</html>
- 效果
說明
以上幾個工具都是很不錯的選擇，可以結合起來使用，而且parcel 是一個方便的工具對於測試es6特性很方便，參考package.json 配置
{
"name": "finger",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"parcel": "^2.2.1"
},
"scripts": {
"app": "parcel index.html"
},
"dependencies": {
"browser_fingerprint": "^2.0.4",
"clientjs": "^0.2.1"
}
}
參考資料
https://github.com/actionhero/browser_fingerprint
https://www.npmjs.com/package/clientjs
https://www.npmjs.com/package/@fingerprintjs/fingerprintjs
https://github.com/jackspirou/clientjs
https://github.com/fingerprintjs/fingerprintjs